fixup thing

epicweb-dev · Feb 13, 2024 · afe7729 · afe7729
1 parent b484127
commit afe7729
Show file tree

Hide file tree

Showing 15 changed files with 72 additions and 68 deletions.
diff --git a/exercises/02.sychronizing-side-effects/01.problem.effects/index.tsx b/exercises/02.sychronizing-side-effects/01.problem.effects/index.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import * as ReactDOM from 'react-dom/client'
 import { generateGradient, getMatchingPosts } from '#shared/blog-posts'
-import { setSearchParams } from '#shared/utils'
+import { setGlobalSearchParams } from '#shared/utils'
 
 function App() {
 	// NOTE: this will not work with server rendering, but in a real app you can
@@ -35,7 +35,7 @@ function App() {
 			<form
 				onSubmit={e => {
 					e.preventDefault()
-					setSearchParams({ query })
+					setGlobalSearchParams({ query })
 				}}
 			>
 				<div>

diff --git a/exercises/02.sychronizing-side-effects/01.solution.effects/index.tsx b/exercises/02.sychronizing-side-effects/01.solution.effects/index.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import * as ReactDOM from 'react-dom/client'
 import { generateGradient, getMatchingPosts } from '#shared/blog-posts'
-import { setSearchParams } from '#shared/utils'
+import { setGlobalSearchParams } from '#shared/utils'
 
 function App() {
 	// NOTE: this will not work with server rendering, but in a real app you can
@@ -30,7 +30,7 @@ function App() {
 			<form
 				onSubmit={e => {
 					e.preventDefault()
-					setSearchParams({ query })
+					setGlobalSearchParams({ query })
 				}}
 			>
 				<div>

diff --git a/exercises/02.sychronizing-side-effects/02.problem.deps/index.tsx b/exercises/02.sychronizing-side-effects/02.problem.deps/index.tsx
@@ -6,7 +6,7 @@ eslint
 import { useEffect, useState } from 'react'
 import * as ReactDOM from 'react-dom/client'
 import { generateGradient, getMatchingPosts } from '#shared/blog-posts'
-import { setSearchParams } from '#shared/utils'
+import { setGlobalSearchParams } from '#shared/utils'
 
 // 🐨 create a getQueryParam function which:
 // 1. creates a new params object
@@ -40,7 +40,7 @@ function App() {
 			<form
 				onSubmit={e => {
 					e.preventDefault()
-					setSearchParams({ query })
+					setGlobalSearchParams({ query })
 				}}
 			>
 				<div>

diff --git a/exercises/02.sychronizing-side-effects/02.solution.deps/index.tsx b/exercises/02.sychronizing-side-effects/02.solution.deps/index.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import * as ReactDOM from 'react-dom/client'
 import { generateGradient, getMatchingPosts } from '#shared/blog-posts'
-import { setSearchParams } from '#shared/utils'
+import { setGlobalSearchParams } from '#shared/utils'
 
 function getQueryParam() {
 	const params = new URLSearchParams(window.location.search)
@@ -33,7 +33,7 @@ function App() {
 			<form
 				onSubmit={e => {
 					e.preventDefault()
-					setSearchParams({ query })
+					setGlobalSearchParams({ query })
 				}}
 			>
 				<div>

diff --git a/exercises/02.sychronizing-side-effects/03.problem.cleanup/index.tsx b/exercises/02.sychronizing-side-effects/03.problem.cleanup/index.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import * as ReactDOM from 'react-dom/client'
 import { generateGradient, getMatchingPosts } from '#shared/blog-posts'
-import { setSearchParams } from '#shared/utils'
+import { setGlobalSearchParams } from '#shared/utils'
 
 function getQueryParam() {
 	const params = new URLSearchParams(window.location.search)
@@ -37,7 +37,7 @@ function App() {
 			<form
 				onSubmit={e => {
 					e.preventDefault()
-					setSearchParams({ query })
+					setGlobalSearchParams({ query })
 				}}
 			>
 				<div>

diff --git a/exercises/02.sychronizing-side-effects/03.solution.cleanup/index.tsx b/exercises/02.sychronizing-side-effects/03.solution.cleanup/index.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import * as ReactDOM from 'react-dom/client'
 import { generateGradient, getMatchingPosts } from '#shared/blog-posts'
-import { setSearchParams } from '#shared/utils'
+import { setGlobalSearchParams } from '#shared/utils'
 
 function getQueryParam() {
 	const params = new URLSearchParams(window.location.search)
@@ -38,7 +38,7 @@ function App() {
 			<form
 				onSubmit={e => {
 					e.preventDefault()
-					setSearchParams({ query })
+					setGlobalSearchParams({ query })
 				}}
 			>
 				<div>

diff --git a/exercises/03.lifting-state/01.problem.lift/index.tsx b/exercises/03.lifting-state/01.problem.lift/index.tsx
@@ -5,7 +5,7 @@ import {
 	generateGradient,
 	getMatchingPosts,
 } from '#shared/blog-posts'
-import { setSearchParams } from '#shared/utils'
+import { setGlobalSearchParams } from '#shared/utils'
 
 function getQueryParam() {
 	const params = new URLSearchParams(window.location.search)
@@ -35,13 +35,13 @@ function Form() {
 	const catChecked = words.includes('cat')
 	const caterpillarChecked = words.includes('caterpillar')
 
+	// 🐨 move this up to the App as well
 	useEffect(() => {
 		const updateQuery = () => setQuery(getQueryParam())
 		window.addEventListener('popstate', updateQuery)
 		return () => {
 			window.removeEventListener('popstate', updateQuery)
 		}
-		// 🐨 add setQuery to the dependency array here
 	}, [])
 
 	function handleCheck(tag: string, checked: boolean) {
@@ -53,7 +53,7 @@ function Form() {
 		<form
 			onSubmit={e => {
 				e.preventDefault()
-				setSearchParams({ query })
+				setGlobalSearchParams({ query })
 			}}
 		>
 			<div>

diff --git a/exercises/03.lifting-state/01.solution.lift/index.tsx b/exercises/03.lifting-state/01.solution.lift/index.tsx
@@ -5,7 +5,7 @@ import {
 	generateGradient,
 	getMatchingPosts,
 } from '#shared/blog-posts'
-import { setSearchParams } from '#shared/utils'
+import { setGlobalSearchParams } from '#shared/utils'
 
 function getQueryParam() {
 	const params = new URLSearchParams(window.location.search)
@@ -14,6 +14,15 @@ function getQueryParam() {
 
 function App() {
 	const [query, setQuery] = useState(getQueryParam)
+
+	useEffect(() => {
+		const updateQuery = () => setQuery(getQueryParam())
+		window.addEventListener('popstate', updateQuery)
+		return () => {
+			window.removeEventListener('popstate', updateQuery)
+		}
+	}, [setQuery])
+
 	return (
 		<div className="app">
 			<Form query={query} setQuery={setQuery} />
@@ -35,14 +44,6 @@ function Form({
 	const catChecked = words.includes('cat')
 	const caterpillarChecked = words.includes('caterpillar')
 
-	useEffect(() => {
-		const updateQuery = () => setQuery(getQueryParam())
-		window.addEventListener('popstate', updateQuery)
-		return () => {
-			window.removeEventListener('popstate', updateQuery)
-		}
-	}, [setQuery])
-
 	function handleCheck(tag: string, checked: boolean) {
 		const newWords = checked ? [...words, tag] : words.filter(w => w !== tag)
 		setQuery(newWords.filter(Boolean).join(' ').trim())
@@ -52,7 +53,7 @@ function Form({
 		<form
 			onSubmit={e => {
 				e.preventDefault()
-				setSearchParams({ query })
+				setGlobalSearchParams({ query })
 			}}
 		>
 			<div>

diff --git a/exercises/03.lifting-state/02.problem.lift-array/index.tsx b/exercises/03.lifting-state/02.problem.lift-array/index.tsx
@@ -5,7 +5,7 @@ import {
 	generateGradient,
 	getMatchingPosts,
 } from '#shared/blog-posts'
-import { setSearchParams } from '#shared/utils'
+import { setGlobalSearchParams } from '#shared/utils'
 
 function getQueryParam() {
 	const params = new URLSearchParams(window.location.search)
@@ -14,6 +14,15 @@ function getQueryParam() {
 
 function App() {
 	const [query, setQuery] = useState(getQueryParam)
+
+	useEffect(() => {
+		const updateQuery = () => setQuery(getQueryParam())
+		window.addEventListener('popstate', updateQuery)
+		return () => {
+			window.removeEventListener('popstate', updateQuery)
+		}
+	}, [setQuery])
+
 	return (
 		<div className="app">
 			<Form query={query} setQuery={setQuery} />
@@ -35,14 +44,6 @@ function Form({
 	const catChecked = words.includes('cat')
 	const caterpillarChecked = words.includes('caterpillar')
 
-	useEffect(() => {
-		const updateQuery = () => setQuery(getQueryParam())
-		window.addEventListener('popstate', updateQuery)
-		return () => {
-			window.removeEventListener('popstate', updateQuery)
-		}
-	}, [setQuery])
-
 	function handleCheck(tag: string, checked: boolean) {
 		const newWords = checked ? [...words, tag] : words.filter(w => w !== tag)
 		setQuery(newWords.filter(Boolean).join(' ').trim())
@@ -52,7 +53,7 @@ function Form({
 		<form
 			onSubmit={e => {
 				e.preventDefault()
-				setSearchParams({ query })
+				setGlobalSearchParams({ query })
 			}}
 		>
 			<div>

diff --git a/exercises/03.lifting-state/02.solution.lift-array/index.tsx b/exercises/03.lifting-state/02.solution.lift-array/index.tsx
@@ -5,7 +5,7 @@ import {
 	generateGradient,
 	getMatchingPosts,
 } from '#shared/blog-posts'
-import { setSearchParams } from '#shared/utils'
+import { setGlobalSearchParams } from '#shared/utils'
 
 function getQueryParam() {
 	const params = new URLSearchParams(window.location.search)
@@ -14,6 +14,15 @@ function getQueryParam() {
 
 function App() {
 	const [query, setQuery] = useState(getQueryParam)
+
+	useEffect(() => {
+		const updateQuery = () => setQuery(getQueryParam())
+		window.addEventListener('popstate', updateQuery)
+		return () => {
+			window.removeEventListener('popstate', updateQuery)
+		}
+	}, [setQuery])
+
 	return (
 		<div className="app">
 			<Form query={query} setQuery={setQuery} />
@@ -35,14 +44,6 @@ function Form({
 	const catChecked = words.includes('cat')
 	const caterpillarChecked = words.includes('caterpillar')
 
-	useEffect(() => {
-		const updateQuery = () => setQuery(getQueryParam())
-		window.addEventListener('popstate', updateQuery)
-		return () => {
-			window.removeEventListener('popstate', updateQuery)
-		}
-	}, [setQuery])
-
 	function handleCheck(tag: string, checked: boolean) {
 		const newWords = checked ? [...words, tag] : words.filter(w => w !== tag)
 		setQuery(newWords.filter(Boolean).join(' ').trim())
@@ -52,7 +53,7 @@ function Form({
 		<form
 			onSubmit={e => {
 				e.preventDefault()
-				setSearchParams({ query })
+				setGlobalSearchParams({ query })
 			}}
 		>
 			<div>

diff --git a/exercises/03.lifting-state/03.problem.colocate/index.tsx b/exercises/03.lifting-state/03.problem.colocate/index.tsx
@@ -5,7 +5,7 @@ import {
 	generateGradient,
 	getMatchingPosts,
 } from '#shared/blog-posts'
-import { setSearchParams } from '#shared/utils'
+import { setGlobalSearchParams } from '#shared/utils'
 
 function getQueryParam() {
 	const params = new URLSearchParams(window.location.search)
@@ -14,6 +14,15 @@ function getQueryParam() {
 
 function App() {
 	const [query, setQuery] = useState(getQueryParam)
+
+	useEffect(() => {
+		const updateQuery = () => setQuery(getQueryParam())
+		window.addEventListener('popstate', updateQuery)
+		return () => {
+			window.removeEventListener('popstate', updateQuery)
+		}
+	}, [setQuery])
+
 	return (
 		<div className="app">
 			<Form query={query} setQuery={setQuery} />
@@ -35,14 +44,6 @@ function Form({
 	const catChecked = words.includes('cat')
 	const caterpillarChecked = words.includes('caterpillar')
 
-	useEffect(() => {
-		const updateQuery = () => setQuery(getQueryParam())
-		window.addEventListener('popstate', updateQuery)
-		return () => {
-			window.removeEventListener('popstate', updateQuery)
-		}
-	}, [setQuery])
-
 	function handleCheck(tag: string, checked: boolean) {
 		const newWords = checked ? [...words, tag] : words.filter(w => w !== tag)
 		setQuery(newWords.filter(Boolean).join(' ').trim())
@@ -52,7 +53,7 @@ function Form({
 		<form
 			onSubmit={e => {
 				e.preventDefault()
-				setSearchParams({ query })
+				setGlobalSearchParams({ query })
 			}}
 		>
 			<div>

diff --git a/exercises/03.lifting-state/03.solution.colocate/index.tsx b/exercises/03.lifting-state/03.solution.colocate/index.tsx
@@ -5,7 +5,7 @@ import {
 	generateGradient,
 	getMatchingPosts,
 } from '#shared/blog-posts'
-import { setSearchParams } from '#shared/utils'
+import { setGlobalSearchParams } from '#shared/utils'
 
 function getQueryParam() {
 	const params = new URLSearchParams(window.location.search)
@@ -14,6 +14,15 @@ function getQueryParam() {
 
 function App() {
 	const [query, setQuery] = useState(getQueryParam)
+
+	useEffect(() => {
+		const updateQuery = () => setQuery(getQueryParam())
+		window.addEventListener('popstate', updateQuery)
+		return () => {
+			window.removeEventListener('popstate', updateQuery)
+		}
+	}, [setQuery])
+
 	return (
 		<div className="app">
 			<Form query={query} setQuery={setQuery} />
@@ -35,14 +44,6 @@ function Form({
 	const catChecked = words.includes('cat')
 	const caterpillarChecked = words.includes('caterpillar')
 
-	useEffect(() => {
-		const updateQuery = () => setQuery(getQueryParam())
-		window.addEventListener('popstate', updateQuery)
-		return () => {
-			window.removeEventListener('popstate', updateQuery)
-		}
-	}, [setQuery])
-
 	function handleCheck(tag: string, checked: boolean) {
 		const newWords = checked ? [...words, tag] : words.filter(w => w !== tag)
 		setQuery(newWords.filter(Boolean).join(' ').trim())
@@ -52,7 +53,7 @@ function Form({
 		<form
 			onSubmit={e => {
 				e.preventDefault()
-				setSearchParams({ query })
+				setGlobalSearchParams({ query })
 			}}
 		>
 			<div>

diff --git a/exercises/06.tic-tac-toe/03.solution.history/index.tsx b/exercises/06.tic-tac-toe/03.solution.history/index.tsx
@@ -48,7 +48,7 @@ function Board({
 	)
 }
 
-const defaultState = {
+const defaultState: GameState = {
 	history: [Array(9).fill(null)],
 	currentStep: 0,
 }