great progress

epicweb-dev · Mar 28, 2024 · 5db2b32 · 5db2b32
1 parent 7bd6b65
commit 5db2b32
Show file tree

Hide file tree

Showing 96 changed files with 4,422 additions and 268 deletions.
diff --git a/exercises/01.start/01.problem.ssr/src/ship-search-results.js b/exercises/01.start/01.problem.ssr/src/ship-search-results.js
@@ -1,42 +1,29 @@
 import { createElement as h } from 'react'
 import { getImageUrlForShip } from './img-utils.js'
 
-const shipFallbackSrc = '/img/fallback-ship.png'
-
-export function SearchResults({ shipId: currentShipId, shipResults }) {
-	return shipResults.ships.map(ship =>
-		h(
+export function SearchResults({ shipId: currentShipId, shipResults, search }) {
+	return shipResults.ships.map(ship => {
+		const href = [
+			`/${ship.id}`,
+			search ? `search=${encodeURIComponent(search)}` : null,
+		]
+			.filter(Boolean)
+			.join('?')
+		return h(
 			'li',
 			{ key: ship.name },
 			h(
 				'a',
 				{
 					style: { fontWeight: ship.id === currentShipId ? 'bold' : 'normal' },
-					href: `/${ship.id}`,
+					href,
 				},
 				h('img', {
 					src: getImageUrlForShip(ship.id, { size: 20 }),
 					alt: ship.name,
 				}),
 				ship.name,
 			),
-		),
-	)
-}
-
-export function SearchResultsFallback() {
-	return Array.from({
-		length: 12,
-	}).map((_, i) =>
-		h(
-			'li',
-			{ key: i },
-			h(
-				'a',
-				{ href: '#' },
-				h('img', { src: shipFallbackSrc, alt: 'loading' }),
-				'... loading',
-			),
-		),
-	)
+		)
+	})
 }
diff --git a/exercises/01.start/01.solution.ssr/src/ship-search-results.js b/exercises/01.start/01.solution.ssr/src/ship-search-results.js
@@ -1,42 +1,29 @@
 import { createElement as h } from 'react'
 import { getImageUrlForShip } from './img-utils.js'
 
-const shipFallbackSrc = '/img/fallback-ship.png'
-
-export function SearchResults({ shipId: currentShipId, shipResults }) {
-	return shipResults.ships.map(ship =>
-		h(
+export function SearchResults({ shipId: currentShipId, shipResults, search }) {
+	return shipResults.ships.map(ship => {
+		const href = [
+			`/${ship.id}`,
+			search ? `search=${encodeURIComponent(search)}` : null,
+		]
+			.filter(Boolean)
+			.join('?')
+		return h(
 			'li',
 			{ key: ship.name },
 			h(
 				'a',
 				{
 					style: { fontWeight: ship.id === currentShipId ? 'bold' : 'normal' },
-					href: `/${ship.id}`,
+					href,
 				},
 				h('img', {
 					src: getImageUrlForShip(ship.id, { size: 20 }),
 					alt: ship.name,
 				}),
 				ship.name,
 			),
-		),
-	)
-}
-
-export function SearchResultsFallback() {
-	return Array.from({
-		length: 12,
-	}).map((_, i) =>
-		h(
-			'li',
-			{ key: i },
-			h(
-				'a',
-				{ href: '#' },
-				h('img', { src: shipFallbackSrc, alt: 'loading' }),
-				'... loading',
-			),
-		),
-	)
+		)
+	})
 }
diff --git a/exercises/01.start/02.problem.server-context/src/ship-search-results.js b/exercises/01.start/02.problem.server-context/src/ship-search-results.js
@@ -1,42 +1,29 @@
 import { createElement as h } from 'react'
 import { getImageUrlForShip } from './img-utils.js'
 
-const shipFallbackSrc = '/img/fallback-ship.png'
-
-export function SearchResults({ shipId: currentShipId, shipResults }) {
-	return shipResults.ships.map(ship =>
-		h(
+export function SearchResults({ shipId: currentShipId, shipResults, search }) {
+	return shipResults.ships.map(ship => {
+		const href = [
+			`/${ship.id}`,
+			search ? `search=${encodeURIComponent(search)}` : null,
+		]
+			.filter(Boolean)
+			.join('?')
+		return h(
 			'li',
 			{ key: ship.name },
 			h(
 				'a',
 				{
 					style: { fontWeight: ship.id === currentShipId ? 'bold' : 'normal' },
-					href: `/${ship.id}`,
+					href,
 				},
 				h('img', {
 					src: getImageUrlForShip(ship.id, { size: 20 }),
 					alt: ship.name,
 				}),
 				ship.name,
 			),
-		),
-	)
-}
-
-export function SearchResultsFallback() {
-	return Array.from({
-		length: 12,
-	}).map((_, i) =>
-		h(
-			'li',
-			{ key: i },
-			h(
-				'a',
-				{ href: '#' },
-				h('img', { src: shipFallbackSrc, alt: 'loading' }),
-				'... loading',
-			),
-		),
-	)
+		)
+	})
 }
diff --git a/exercises/01.start/02.solution.server-context/src/ship-details.js b/exercises/01.start/02.solution.server-context/src/ship-details.js
@@ -43,40 +43,3 @@ export function ShipDetails() {
 		),
 	)
 }
-
-export function ShipFallback() {
-	const { shipId } = shipDataStorage.getStore()
-	return h(
-		'div',
-		{ className: 'ship-info' },
-		h(
-			'div',
-			{ className: 'ship-info__img-wrapper' },
-			h('img', {
-				src: getImageUrlForShip(shipId, { size: 200 }),
-				// TODO: handle this better
-				alt: shipId,
-			}),
-		),
-		h('section', null, h('h2', null, 'Loading...')),
-		h('div', null, 'Top Speed: XX', ' ', h('small', null, 'lyh')),
-		h(
-			'section',
-			null,
-			h(
-				'ul',
-				null,
-				Array.from({ length: 3 }).map((_, i) =>
-					h(
-						'li',
-						{ key: i },
-						h('label', null, 'loading'),
-						':',
-						' ',
-						h('span', null, 'XX ', h('small', null, '(loading)')),
-					),
-				),
-			),
-		),
-	)
-}
diff --git a/exercises/01.start/02.solution.server-context/src/ship-search-results.js b/exercises/01.start/02.solution.server-context/src/ship-search-results.js
@@ -2,43 +2,34 @@ import { createElement as h } from 'react'
 import { shipDataStorage } from '../server/async-storage.js'
 import { getImageUrlForShip } from './img-utils.js'
 
-const shipFallbackSrc = '/img/fallback-ship.png'
-
 export function SearchResults() {
-	const { shipId: currentShipId, shipResults } = shipDataStorage.getStore()
-	return shipResults.ships.map(ship =>
-		h(
+	const {
+		shipId: currentShipId,
+		shipResults,
+		search,
+	} = shipDataStorage.getStore()
+	return shipResults.ships.map(ship => {
+		const href = [
+			`/${ship.id}`,
+			search ? `search=${encodeURIComponent(search)}` : null,
+		]
+			.filter(Boolean)
+			.join('?')
+		return h(
 			'li',
 			{ key: ship.name },
 			h(
 				'a',
 				{
 					style: { fontWeight: ship.id === currentShipId ? 'bold' : 'normal' },
-					href: `/${ship.id}`,
+					href,
 				},
 				h('img', {
 					src: getImageUrlForShip(ship.id, { size: 20 }),
 					alt: ship.name,
 				}),
 				ship.name,
 			),
-		),
-	)
-}
-
-export function SearchResultsFallback() {
-	return Array.from({
-		length: 12,
-	}).map((_, i) =>
-		h(
-			'li',
-			{ key: i },
-			h(
-				'a',
-				{ href: '#' },
-				h('img', { src: shipFallbackSrc, alt: 'loading' }),
-				'... loading',
-			),
-		),
-	)
+		)
+	})
 }
diff --git a/exercises/01.start/03.problem.url/src/ship-details.js b/exercises/01.start/03.problem.url/src/ship-details.js
@@ -43,40 +43,3 @@ export function ShipDetails() {
 		),
 	)
 }
-
-export function ShipFallback() {
-	const { shipId } = shipDataStorage.getStore()
-	return h(
-		'div',
-		{ className: 'ship-info' },
-		h(
-			'div',
-			{ className: 'ship-info__img-wrapper' },
-			h('img', {
-				src: getImageUrlForShip(shipId, { size: 200 }),
-				// TODO: handle this better
-				alt: shipId,
-			}),
-		),
-		h('section', null, h('h2', null, 'Loading...')),
-		h('div', null, 'Top Speed: XX', ' ', h('small', null, 'lyh')),
-		h(
-			'section',
-			null,
-			h(
-				'ul',
-				null,
-				Array.from({ length: 3 }).map((_, i) =>
-					h(
-						'li',
-						{ key: i },
-						h('label', null, 'loading'),
-						':',
-						' ',
-						h('span', null, 'XX ', h('small', null, '(loading)')),
-					),
-				),
-			),
-		),
-	)
-}
diff --git a/exercises/01.start/03.problem.url/src/ship-search-results.js b/exercises/01.start/03.problem.url/src/ship-search-results.js
@@ -2,43 +2,34 @@ import { createElement as h } from 'react'
 import { shipDataStorage } from '../server/async-storage.js'
 import { getImageUrlForShip } from './img-utils.js'
 
-const shipFallbackSrc = '/img/fallback-ship.png'
-
 export function SearchResults() {
-	const { shipId: currentShipId, shipResults } = shipDataStorage.getStore()
-	return shipResults.ships.map(ship =>
-		h(
+	const {
+		shipId: currentShipId,
+		shipResults,
+		search,
+	} = shipDataStorage.getStore()
+	return shipResults.ships.map(ship => {
+		const href = [
+			`/${ship.id}`,
+			search ? `search=${encodeURIComponent(search)}` : null,
+		]
+			.filter(Boolean)
+			.join('?')
+		return h(
 			'li',
 			{ key: ship.name },
 			h(
 				'a',
 				{
 					style: { fontWeight: ship.id === currentShipId ? 'bold' : 'normal' },
-					href: `/${ship.id}`,
+					href,
 				},
 				h('img', {
 					src: getImageUrlForShip(ship.id, { size: 20 }),
 					alt: ship.name,
 				}),
 				ship.name,
 			),
-		),
-	)
-}
-
-export function SearchResultsFallback() {
-	return Array.from({
-		length: 12,
-	}).map((_, i) =>
-		h(
-			'li',
-			{ key: i },
-			h(
-				'a',
-				{ href: '#' },
-				h('img', { src: shipFallbackSrc, alt: 'loading' }),
-				'... loading',
-			),
-		),
-	)
+		)
+	})
 }