Skip to content

Commit afe7729

Browse files
kentcdoddskentcdodds
committed
fixup thing
1 parent b484127 commit afe7729

File tree

15 files changed

+72
-68
lines changed

15 files changed

+72
-68
lines changed

‎exercises/02.sychronizing-side-effects/01.problem.effects/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useState } from 'react'
22
import * as ReactDOM from 'react-dom/client'
33
import { generateGradient, getMatchingPosts } from '#shared/blog-posts'
4-
import { setSearchParams } from '#shared/utils'
4+
import { setGlobalSearchParams } from '#shared/utils'
55

66
function App() {
77
// NOTE: this will not work with server rendering, but in a real app you can
@@ -35,7 +35,7 @@ function App() {
3535
<form
3636
onSubmit={e => {
3737
e.preventDefault()
38-
setSearchParams({ query })
38+
setGlobalSearchParams({ query })
3939
}}
4040
>
4141
<div>

‎exercises/02.sychronizing-side-effects/01.solution.effects/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useEffect, useState } from 'react'
22
import * as ReactDOM from 'react-dom/client'
33
import { generateGradient, getMatchingPosts } from '#shared/blog-posts'
4-
import { setSearchParams } from '#shared/utils'
4+
import { setGlobalSearchParams } from '#shared/utils'
55

66
function App() {
77
// NOTE: this will not work with server rendering, but in a real app you can
@@ -30,7 +30,7 @@ function App() {
3030
<form
3131
onSubmit={e => {
3232
e.preventDefault()
33-
setSearchParams({ query })
33+
setGlobalSearchParams({ query })
3434
}}
3535
>
3636
<div>

‎exercises/02.sychronizing-side-effects/02.problem.deps/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ eslint
66
import { useEffect, useState } from 'react'
77
import * as ReactDOM from 'react-dom/client'
88
import { generateGradient, getMatchingPosts } from '#shared/blog-posts'
9-
import { setSearchParams } from '#shared/utils'
9+
import { setGlobalSearchParams } from '#shared/utils'
1010

1111
// 🐨 create a getQueryParam function which:
1212
// 1. creates a new params object
@@ -40,7 +40,7 @@ function App() {
4040
<form
4141
onSubmit={e => {
4242
e.preventDefault()
43-
setSearchParams({ query })
43+
setGlobalSearchParams({ query })
4444
}}
4545
>
4646
<div>

‎exercises/02.sychronizing-side-effects/02.solution.deps/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useEffect, useState } from 'react'
22
import * as ReactDOM from 'react-dom/client'
33
import { generateGradient, getMatchingPosts } from '#shared/blog-posts'
4-
import { setSearchParams } from '#shared/utils'
4+
import { setGlobalSearchParams } from '#shared/utils'
55

66
function getQueryParam() {
77
const params = new URLSearchParams(window.location.search)
@@ -33,7 +33,7 @@ function App() {
3333
<form
3434
onSubmit={e => {
3535
e.preventDefault()
36-
setSearchParams({ query })
36+
setGlobalSearchParams({ query })
3737
}}
3838
>
3939
<div>

‎exercises/02.sychronizing-side-effects/03.problem.cleanup/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useEffect, useState } from 'react'
22
import * as ReactDOM from 'react-dom/client'
33
import { generateGradient, getMatchingPosts } from '#shared/blog-posts'
4-
import { setSearchParams } from '#shared/utils'
4+
import { setGlobalSearchParams } from '#shared/utils'
55

66
function getQueryParam() {
77
const params = new URLSearchParams(window.location.search)
@@ -37,7 +37,7 @@ function App() {
3737
<form
3838
onSubmit={e => {
3939
e.preventDefault()
40-
setSearchParams({ query })
40+
setGlobalSearchParams({ query })
4141
}}
4242
>
4343
<div>

‎exercises/02.sychronizing-side-effects/03.solution.cleanup/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useEffect, useState } from 'react'
22
import * as ReactDOM from 'react-dom/client'
33
import { generateGradient, getMatchingPosts } from '#shared/blog-posts'
4-
import { setSearchParams } from '#shared/utils'
4+
import { setGlobalSearchParams } from '#shared/utils'
55

66
function getQueryParam() {
77
const params = new URLSearchParams(window.location.search)
@@ -38,7 +38,7 @@ function App() {
3838
<form
3939
onSubmit={e => {
4040
e.preventDefault()
41-
setSearchParams({ query })
41+
setGlobalSearchParams({ query })
4242
}}
4343
>
4444
<div>

‎exercises/03.lifting-state/01.problem.lift/index.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
generateGradient,
66
getMatchingPosts,
77
} from '#shared/blog-posts'
8-
import { setSearchParams } from '#shared/utils'
8+
import { setGlobalSearchParams } from '#shared/utils'
99

1010
function getQueryParam() {
1111
const params = new URLSearchParams(window.location.search)
@@ -35,13 +35,13 @@ function Form() {
3535
const catChecked = words.includes('cat')
3636
const caterpillarChecked = words.includes('caterpillar')
3737

38+
// 🐨 move this up to the App as well
3839
useEffect(() => {
3940
const updateQuery = () => setQuery(getQueryParam())
4041
window.addEventListener('popstate', updateQuery)
4142
return () => {
4243
window.removeEventListener('popstate', updateQuery)
4344
}
44-
// 🐨 add setQuery to the dependency array here
4545
}, [])
4646

4747
function handleCheck(tag: string, checked: boolean) {
@@ -53,7 +53,7 @@ function Form() {
5353
<form
5454
onSubmit={e => {
5555
e.preventDefault()
56-
setSearchParams({ query })
56+
setGlobalSearchParams({ query })
5757
}}
5858
>
5959
<div>

‎exercises/03.lifting-state/01.solution.lift/index.tsx

+11-10
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
generateGradient,
66
getMatchingPosts,
77
} from '#shared/blog-posts'
8-
import { setSearchParams } from '#shared/utils'
8+
import { setGlobalSearchParams } from '#shared/utils'
99

1010
function getQueryParam() {
1111
const params = new URLSearchParams(window.location.search)
@@ -14,6 +14,15 @@ function getQueryParam() {
1414

1515
function App() {
1616
const [query, setQuery] = useState(getQueryParam)
17+
18+
useEffect(() => {
19+
const updateQuery = () => setQuery(getQueryParam())
20+
window.addEventListener('popstate', updateQuery)
21+
return () => {
22+
window.removeEventListener('popstate', updateQuery)
23+
}
24+
}, [setQuery])
25+
1726
return (
1827
<div className="app">
1928
<Form query={query} setQuery={setQuery} />
@@ -35,14 +44,6 @@ function Form({
3544
const catChecked = words.includes('cat')
3645
const caterpillarChecked = words.includes('caterpillar')
3746

38-
useEffect(() => {
39-
const updateQuery = () => setQuery(getQueryParam())
40-
window.addEventListener('popstate', updateQuery)
41-
return () => {
42-
window.removeEventListener('popstate', updateQuery)
43-
}
44-
}, [setQuery])
45-
4647
function handleCheck(tag: string, checked: boolean) {
4748
const newWords = checked ? [...words, tag] : words.filter(w => w !== tag)
4849
setQuery(newWords.filter(Boolean).join(' ').trim())
@@ -52,7 +53,7 @@ function Form({
5253
<form
5354
onSubmit={e => {
5455
e.preventDefault()
55-
setSearchParams({ query })
56+
setGlobalSearchParams({ query })
5657
}}
5758
>
5859
<div>

‎exercises/03.lifting-state/02.problem.lift-array/index.tsx

+11-10
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
generateGradient,
66
getMatchingPosts,
77
} from '#shared/blog-posts'
8-
import { setSearchParams } from '#shared/utils'
8+
import { setGlobalSearchParams } from '#shared/utils'
99

1010
function getQueryParam() {
1111
const params = new URLSearchParams(window.location.search)
@@ -14,6 +14,15 @@ function getQueryParam() {
1414

1515
function App() {
1616
const [query, setQuery] = useState(getQueryParam)
17+
18+
useEffect(() => {
19+
const updateQuery = () => setQuery(getQueryParam())
20+
window.addEventListener('popstate', updateQuery)
21+
return () => {
22+
window.removeEventListener('popstate', updateQuery)
23+
}
24+
}, [setQuery])
25+
1726
return (
1827
<div className="app">
1928
<Form query={query} setQuery={setQuery} />
@@ -35,14 +44,6 @@ function Form({
3544
const catChecked = words.includes('cat')
3645
const caterpillarChecked = words.includes('caterpillar')
3746

38-
useEffect(() => {
39-
const updateQuery = () => setQuery(getQueryParam())
40-
window.addEventListener('popstate', updateQuery)
41-
return () => {
42-
window.removeEventListener('popstate', updateQuery)
43-
}
44-
}, [setQuery])
45-
4647
function handleCheck(tag: string, checked: boolean) {
4748
const newWords = checked ? [...words, tag] : words.filter(w => w !== tag)
4849
setQuery(newWords.filter(Boolean).join(' ').trim())
@@ -52,7 +53,7 @@ function Form({
5253
<form
5354
onSubmit={e => {
5455
e.preventDefault()
55-
setSearchParams({ query })
56+
setGlobalSearchParams({ query })
5657
}}
5758
>
5859
<div>

‎exercises/03.lifting-state/02.solution.lift-array/index.tsx

+11-10
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
generateGradient,
66
getMatchingPosts,
77
} from '#shared/blog-posts'
8-
import { setSearchParams } from '#shared/utils'
8+
import { setGlobalSearchParams } from '#shared/utils'
99

1010
function getQueryParam() {
1111
const params = new URLSearchParams(window.location.search)
@@ -14,6 +14,15 @@ function getQueryParam() {
1414

1515
function App() {
1616
const [query, setQuery] = useState(getQueryParam)
17+
18+
useEffect(() => {
19+
const updateQuery = () => setQuery(getQueryParam())
20+
window.addEventListener('popstate', updateQuery)
21+
return () => {
22+
window.removeEventListener('popstate', updateQuery)
23+
}
24+
}, [setQuery])
25+
1726
return (
1827
<div className="app">
1928
<Form query={query} setQuery={setQuery} />
@@ -35,14 +44,6 @@ function Form({
3544
const catChecked = words.includes('cat')
3645
const caterpillarChecked = words.includes('caterpillar')
3746

38-
useEffect(() => {
39-
const updateQuery = () => setQuery(getQueryParam())
40-
window.addEventListener('popstate', updateQuery)
41-
return () => {
42-
window.removeEventListener('popstate', updateQuery)
43-
}
44-
}, [setQuery])
45-
4647
function handleCheck(tag: string, checked: boolean) {
4748
const newWords = checked ? [...words, tag] : words.filter(w => w !== tag)
4849
setQuery(newWords.filter(Boolean).join(' ').trim())
@@ -52,7 +53,7 @@ function Form({
5253
<form
5354
onSubmit={e => {
5455
e.preventDefault()
55-
setSearchParams({ query })
56+
setGlobalSearchParams({ query })
5657
}}
5758
>
5859
<div>

‎exercises/03.lifting-state/03.problem.colocate/index.tsx

+11-10
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
generateGradient,
66
getMatchingPosts,
77
} from '#shared/blog-posts'
8-
import { setSearchParams } from '#shared/utils'
8+
import { setGlobalSearchParams } from '#shared/utils'
99

1010
function getQueryParam() {
1111
const params = new URLSearchParams(window.location.search)
@@ -14,6 +14,15 @@ function getQueryParam() {
1414

1515
function App() {
1616
const [query, setQuery] = useState(getQueryParam)
17+
18+
useEffect(() => {
19+
const updateQuery = () => setQuery(getQueryParam())
20+
window.addEventListener('popstate', updateQuery)
21+
return () => {
22+
window.removeEventListener('popstate', updateQuery)
23+
}
24+
}, [setQuery])
25+
1726
return (
1827
<div className="app">
1928
<Form query={query} setQuery={setQuery} />
@@ -35,14 +44,6 @@ function Form({
3544
const catChecked = words.includes('cat')
3645
const caterpillarChecked = words.includes('caterpillar')
3746

38-
useEffect(() => {
39-
const updateQuery = () => setQuery(getQueryParam())
40-
window.addEventListener('popstate', updateQuery)
41-
return () => {
42-
window.removeEventListener('popstate', updateQuery)
43-
}
44-
}, [setQuery])
45-
4647
function handleCheck(tag: string, checked: boolean) {
4748
const newWords = checked ? [...words, tag] : words.filter(w => w !== tag)
4849
setQuery(newWords.filter(Boolean).join(' ').trim())
@@ -52,7 +53,7 @@ function Form({
5253
<form
5354
onSubmit={e => {
5455
e.preventDefault()
55-
setSearchParams({ query })
56+
setGlobalSearchParams({ query })
5657
}}
5758
>
5859
<div>

‎exercises/03.lifting-state/03.solution.colocate/index.tsx

+11-10
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
generateGradient,
66
getMatchingPosts,
77
} from '#shared/blog-posts'
8-
import { setSearchParams } from '#shared/utils'
8+
import { setGlobalSearchParams } from '#shared/utils'
99

1010
function getQueryParam() {
1111
const params = new URLSearchParams(window.location.search)
@@ -14,6 +14,15 @@ function getQueryParam() {
1414

1515
function App() {
1616
const [query, setQuery] = useState(getQueryParam)
17+
18+
useEffect(() => {
19+
const updateQuery = () => setQuery(getQueryParam())
20+
window.addEventListener('popstate', updateQuery)
21+
return () => {
22+
window.removeEventListener('popstate', updateQuery)
23+
}
24+
}, [setQuery])
25+
1726
return (
1827
<div className="app">
1928
<Form query={query} setQuery={setQuery} />
@@ -35,14 +44,6 @@ function Form({
3544
const catChecked = words.includes('cat')
3645
const caterpillarChecked = words.includes('caterpillar')
3746

38-
useEffect(() => {
39-
const updateQuery = () => setQuery(getQueryParam())
40-
window.addEventListener('popstate', updateQuery)
41-
return () => {
42-
window.removeEventListener('popstate', updateQuery)
43-
}
44-
}, [setQuery])
45-
4647
function handleCheck(tag: string, checked: boolean) {
4748
const newWords = checked ? [...words, tag] : words.filter(w => w !== tag)
4849
setQuery(newWords.filter(Boolean).join(' ').trim())
@@ -52,7 +53,7 @@ function Form({
5253
<form
5354
onSubmit={e => {
5455
e.preventDefault()
55-
setSearchParams({ query })
56+
setGlobalSearchParams({ query })
5657
}}
5758
>
5859
<div>

‎exercises/06.tic-tac-toe/03.solution.history/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ function Board({
4848
)
4949
}
5050

51-
const defaultState = {
51+
const defaultState: GameState = {
5252
history: [Array(9).fill(null)],
5353
currentStep: 0,
5454
}

0 commit comments

Comments
 (0)