good progress

epicweb-dev · Apr 1, 2024 · 7c0578d · 7c0578d
1 parent dfe6244
commit 7c0578d
Show file tree

Hide file tree

Showing 228 changed files with 10,555 additions and 182 deletions.
diff --git a/exercises/01.exercises/08.solution.hydrate/src/index.js b/exercises/01.exercises/08.solution.hydrate/src/index.js
@@ -21,7 +21,7 @@ const initialContentPromise = RSC.createFromFetch(
 	{ moduleBaseURL },
 )
 
-export function Root() {
+function Root() {
 	return use(initialContentPromise).root
 }
 

diff --git a/exercises/01.exercises/09.problem.routing/src/index.js b/exercises/01.exercises/09.problem.routing/src/index.js
@@ -21,7 +21,7 @@ const initialContentPromise = RSC.createFromFetch(
 	{ moduleBaseURL },
 )
 
-export function Root() {
+function Root() {
 	return use(initialContentPromise).root
 }
 

diff --git a/exercises/01.exercises/09.solution.routing/src/index.js b/exercises/01.exercises/09.solution.routing/src/index.js
@@ -42,7 +42,7 @@ if (!initialContentKey) {
 }
 contentCache.set(initialContentKey, initialContentPromise)
 
-export function Root() {
+function Root() {
 	const [, forceRender] = useReducer(() => Symbol(), Symbol())
 	const latestNav = useRef(null)
 	const [nextLocation, setNextLocation] = useState(getGlobalLocation)
@@ -92,7 +92,7 @@ export function Root() {
 		return () => window.removeEventListener('popstate', handlePopState)
 	}, [])
 
-	async function navigate(nextLocation, { replace = false, contentKey } = {}) {
+	function navigate(nextLocation, { replace = false, contentKey } = {}) {
 		setNextLocation(nextLocation)
 		const thisNav = Symbol()
 		latestNav.current = thisNav

diff --git a/exercises/01.exercises/09.solution.routing/src/ship-search.js b/exercises/01.exercises/09.solution.routing/src/ship-search.js
@@ -7,12 +7,11 @@ import { useSpinDelay } from './spin-delay.js'
 
 export function ShipSearch({ search, results, fallback }) {
 	const { navigate, location, nextLocation } = useRouter()
-	const previousSearch = parseLocationState(nextLocation).search
-	const nextSearch = parseLocationState(location).search
-	const isShipSearchPending = useSpinDelay(previousSearch !== nextSearch, {
-		delay: 300,
-		minDuration: 350,
-	})
+	const isShipSearchPending = useSpinDelay(
+		parseLocationState(nextLocation).search !==
+			parseLocationState(location).search,
+		{ delay: 300, minDuration: 350 },
+	)
 
 	return h(
 		Fragment,
@@ -59,7 +58,7 @@ export function SelectShipLink({ shipId, highlight, children }) {
 		href: `/${shipId}`,
 		style: { fontWeight: highlight ? 'bold' : 'normal' },
 		onClick: event => {
-			if (event.metaKey || event.ctrlKey) return
+			if (event.ctrlKey || event.metaKey || event.shiftKey) return
 			event.preventDefault()
 			const newLocation = mergeLocationState(location, { shipId })
 			navigate(newLocation)

diff --git a/exercises/01.exercises/10.problem.actions/src/index.js b/exercises/01.exercises/10.problem.actions/src/index.js
@@ -42,7 +42,7 @@ if (!initialContentKey) {
 }
 contentCache.set(initialContentKey, initialContentPromise)
 
-export function Root() {
+function Root() {
 	const [, forceRender] = useReducer(() => Symbol(), Symbol())
 	const latestNav = useRef(null)
 	const [nextLocation, setNextLocation] = useState(getGlobalLocation)
@@ -92,7 +92,7 @@ export function Root() {
 		return () => window.removeEventListener('popstate', handlePopState)
 	}, [])
 
-	async function navigate(nextLocation, { replace = false, contentKey } = {}) {
+	function navigate(nextLocation, { replace = false, contentKey } = {}) {
 		setNextLocation(nextLocation)
 		const thisNav = Symbol()
 		latestNav.current = thisNav

diff --git a/exercises/01.exercises/10.problem.actions/src/ship-search.js b/exercises/01.exercises/10.problem.actions/src/ship-search.js
@@ -7,12 +7,11 @@ import { useSpinDelay } from './spin-delay.js'
 
 export function ShipSearch({ search, results, fallback }) {
 	const { navigate, location, nextLocation } = useRouter()
-	const previousSearch = parseLocationState(nextLocation).search
-	const nextSearch = parseLocationState(location).search
-	const isShipSearchPending = useSpinDelay(previousSearch !== nextSearch, {
-		delay: 300,
-		minDuration: 350,
-	})
+	const isShipSearchPending = useSpinDelay(
+		parseLocationState(nextLocation).search !==
+			parseLocationState(location).search,
+		{ delay: 300, minDuration: 350 },
+	)
 
 	return h(
 		Fragment,
@@ -59,7 +58,7 @@ export function SelectShipLink({ shipId, highlight, children }) {
 		href: `/${shipId}`,
 		style: { fontWeight: highlight ? 'bold' : 'normal' },
 		onClick: event => {
-			if (event.metaKey || event.ctrlKey) return
+			if (event.ctrlKey || event.metaKey || event.shiftKey) return
 			event.preventDefault()
 			const newLocation = mergeLocationState(location, { shipId })
 			navigate(newLocation)

diff --git a/exercises/01.exercises/10.solution.actions/src/index.js b/exercises/01.exercises/10.solution.actions/src/index.js
@@ -60,7 +60,7 @@ if (!initialContentKey) {
 }
 contentCache.set(initialContentKey, initialContentPromise)
 
-export function Root() {
+function Root() {
 	const [, forceRender] = useReducer(() => Symbol(), Symbol())
 	const latestNav = useRef(null)
 	const [nextLocation, setNextLocation] = useState(getGlobalLocation)
@@ -113,7 +113,7 @@ export function Root() {
 		return () => window.removeEventListener('popstate', handlePopState)
 	}, [])
 
-	async function navigate(nextLocation, { replace = false, contentKey } = {}) {
+	function navigate(nextLocation, { replace = false, contentKey } = {}) {
 		setNextLocation(nextLocation)
 		const thisNav = Symbol()
 		latestNav.current = thisNav

diff --git a/exercises/01.exercises/10.solution.actions/src/ship-search.js b/exercises/01.exercises/10.solution.actions/src/ship-search.js
@@ -7,12 +7,11 @@ import { useSpinDelay } from './spin-delay.js'
 
 export function ShipSearch({ search, results, fallback }) {
 	const { navigate, location, nextLocation } = useRouter()
-	const previousSearch = parseLocationState(nextLocation).search
-	const nextSearch = parseLocationState(location).search
-	const isShipSearchPending = useSpinDelay(previousSearch !== nextSearch, {
-		delay: 300,
-		minDuration: 350,
-	})
+	const isShipSearchPending = useSpinDelay(
+		parseLocationState(nextLocation).search !==
+			parseLocationState(location).search,
+		{ delay: 300, minDuration: 350 },
+	)
 
 	return h(
 		Fragment,
@@ -59,7 +58,7 @@ export function SelectShipLink({ shipId, highlight, children }) {
 		href: `/${shipId}`,
 		style: { fontWeight: highlight ? 'bold' : 'normal' },
 		onClick: event => {
-			if (event.metaKey || event.ctrlKey) return
+			if (event.ctrlKey || event.metaKey || event.shiftKey) return
 			event.preventDefault()
 			const newLocation = mergeLocationState(location, { shipId })
 			navigate(newLocation)

diff --git a/exercises/02.no-ssr/05.solution.client/src/error-boundary.js b/exercises/02.no-ssr/05.solution.client/src/error-boundary.js
@@ -1,3 +1,4 @@
+// https://github.com/bvaughn/react-error-boundary/issues/182
 'use client'
 
-export * from 'react-error-boundary'
+export { ErrorBoundary } from 'react-error-boundary'
diff --git a/exercises/02.no-ssr/05.solution.client/src/index.js b/exercises/02.no-ssr/05.solution.client/src/index.js
@@ -10,8 +10,7 @@ const getGlobalLocation = () =>
 	window.location.pathname + window.location.search
 
 const initialLocation = getGlobalLocation()
-const initialContentFetchPromise = fetch(`/rsc${initialLocation}`)
-const initialContentPromise = createFromFetch(initialContentFetchPromise, {
+const initialContentPromise = createFromFetch(fetch(`/rsc${initialLocation}`), {
 	moduleBaseURL,
 })
 

diff --git a/exercises/02.no-ssr/05.solution.client/src/ship-search-results.js b/exercises/02.no-ssr/05.solution.client/src/ship-search-results.js
@@ -48,11 +48,3 @@ export function SearchResultsFallback() {
 		),
 	)
 }
-
-export function ShipResultsErrorFallback() {
-	return h(
-		'div',
-		{ style: { padding: 6, color: '#CD0DD5' } },
-		'There was an error retrieving results',
-	)
-}
diff --git a/exercises/02.no-ssr/06.problem.router/.gitignore b/exercises/02.no-ssr/06.problem.router/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/exercises/02.no-ssr/06.problem.router/.prettierignore b/exercises/02.no-ssr/06.problem.router/.prettierignore
@@ -0,0 +1,3 @@
+node_modules
+package-lock.json
+built_node_modules
diff --git a/exercises/02.no-ssr/06.problem.router/.prettierrc b/exercises/02.no-ssr/06.problem.router/.prettierrc
@@ -0,0 +1,35 @@
+{
+	"arrowParens": "avoid",
+	"bracketSameLine": false,
+	"bracketSpacing": true,
+	"embeddedLanguageFormatting": "auto",
+	"endOfLine": "lf",
+	"htmlWhitespaceSensitivity": "css",
+	"insertPragma": false,
+	"jsxSingleQuote": false,
+	"printWidth": 80,
+	"proseWrap": "always",
+	"quoteProps": "as-needed",
+	"requirePragma": false,
+	"semi": false,
+	"singleAttributePerLine": false,
+	"singleQuote": true,
+	"tabWidth": 2,
+	"trailingComma": "all",
+	"useTabs": true,
+	"overrides": [
+		{
+			"files": ["**/*.json"],
+			"options": {
+				"useTabs": false
+			}
+		},
+		{
+			"files": ["**/*.mdx"],
+			"options": {
+				"proseWrap": "preserve",
+				"htmlWhitespaceSensitivity": "ignore"
+			}
+		}
+	]
+}
diff --git a/exercises/02.no-ssr/06.problem.router/README.mdx b/exercises/02.no-ssr/06.problem.router/README.mdx
@@ -0,0 +1 @@
+# Client Router
diff --git a/exercises/02.no-ssr/06.problem.router/db/ship-api.js b/exercises/02.no-ssr/06.problem.router/db/ship-api.js
@@ -0,0 +1,59 @@
+import fs from 'node:fs/promises'
+
+const shipData = JSON.parse(
+	String(await fs.readFile(new URL('./ships.json', import.meta.url))),
+)
+
+const MIN_DELAY = 200
+const MAX_DELAY = 500
+
+export async function searchShips({
+	search,
+	delay = Math.random() * (MAX_DELAY - MIN_DELAY) + MIN_DELAY,
+}) {
+	const endTime = Date.now() + delay
+	const ships = shipData
+		.filter(ship => ship.name.toLowerCase().includes(search.toLowerCase()))
+		.slice(0, 13)
+	await new Promise(resolve => setTimeout(resolve, endTime - Date.now()))
+	return {
+		ships: ships.map(ship => ({ name: ship.name, id: ship.id })),
+	}
+}
+
+export async function getShip({
+	shipId,
+	delay = Math.random() * (MAX_DELAY - MIN_DELAY) + MIN_DELAY,
+}) {
+	const endTime = Date.now() + delay
+	if (!shipId) {
+		throw new Error('No shipId provided')
+	}
+	const ship = shipData.find(ship => ship.id === shipId)
+	await new Promise(resolve => setTimeout(resolve, endTime - Date.now()))
+	if (!ship) {
+		throw new Error(`No ship with the id "${shipId}"`)
+	}
+	return ship
+}
+
+export async function updateShipName({
+	shipId,
+	shipName,
+	delay = Math.random() * (MAX_DELAY - MIN_DELAY) + MIN_DELAY,
+}) {
+	const endTime = Date.now() + delay
+	const ship = shipData.find(ship => ship.id === shipId)
+	await new Promise(resolve => setTimeout(resolve, endTime - Date.now()))
+	if (!ship) {
+		throw new Error(`No ship with the id "${shipId}"`)
+	}
+	if (shipName.toLowerCase().includes('error')) {
+		throw new Error('Error updating ship name')
+	}
+	if (shipName === ship.name) {
+		throw new Error('New name is the same as the old name')
+	}
+	ship.name = shipName
+	return ship
+}