Skip to content

Commit 1a4f44d

Browse files
kentcdoddskentcdodds
committed
upgrade config
1 parent 7bf458b commit 1a4f44d

File tree

54 files changed

+1923
-634
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+1923
-634
lines changed

‎epicshop/package-lock.json

+943-264
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎epicshop/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"type": "module",
33
"dependencies": {
4-
"@epic-web/config": "^1.5.4",
4+
"@epic-web/config": "^1.11.2",
55
"@epic-web/workshop-app": "^4.8.1"
66
}
77
}

‎epicshop/setup-custom.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ if (!process.env.SKIP_PLAYGROUND) {
2626
() => {
2727
console.log('✅ first problem app set up')
2828
},
29-
error => {
29+
(error) => {
3030
console.error(error)
3131
throw new Error('❌ first problem app setup failed')
3232
},

‎exercises/01.use-reducer/01.problem.new-state/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ function App() {
3838
id="step-input"
3939
type="number"
4040
value={step}
41-
onChange={e => setStep(Number(e.currentTarget.value))}
41+
onChange={(e) => setStep(Number(e.currentTarget.value))}
4242
/>
4343
</div>
4444
</form>

‎exercises/01.use-reducer/01.solution.new-state/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ function App() {
3131
id="step-input"
3232
type="number"
3333
value={step}
34-
onChange={e => setStep(Number(e.currentTarget.value))}
34+
onChange={(e) => setStep(Number(e.currentTarget.value))}
3535
/>
3636
</div>
3737
</form>

‎exercises/01.use-reducer/02.problem.previous-state/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ function App() {
3636
id="step-input"
3737
type="number"
3838
value={step}
39-
onChange={e => setStep(Number(e.currentTarget.value))}
39+
onChange={(e) => setStep(Number(e.currentTarget.value))}
4040
/>
4141
</div>
4242
</form>

‎exercises/01.use-reducer/02.solution.previous-state/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ function App() {
3131
id="step-input"
3232
type="number"
3333
value={step}
34-
onChange={e => setStep(Number(e.currentTarget.value))}
34+
onChange={(e) => setStep(Number(e.currentTarget.value))}
3535
/>
3636
</div>
3737
</form>

‎exercises/01.use-reducer/03.problem.object/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ function App() {
4040
id="step-input"
4141
type="number"
4242
value={step}
43-
onChange={e => setStep(Number(e.currentTarget.value))}
43+
onChange={(e) => setStep(Number(e.currentTarget.value))}
4444
/>
4545
</div>
4646
</form>

‎exercises/01.use-reducer/03.solution.object/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ function App() {
3636
id="step-input"
3737
type="number"
3838
value={step}
39-
onChange={e => setStep(Number(e.currentTarget.value))}
39+
onChange={(e) => setStep(Number(e.currentTarget.value))}
4040
/>
4141
</div>
4242
</form>

‎exercises/01.use-reducer/04.problem.function/README.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const [state, setState] = useReducer(countReducer, {
1111
})
1212
const { count } = state
1313
const increment = () =>
14-
setState(currentState => ({ count: currentState.count + step }))
14+
setState((currentState) => ({ count: currentState.count + step }))
1515
const decrement = () =>
16-
setState(currentState => ({ count: currentState.count - step }))
16+
setState((currentState) => ({ count: currentState.count - step }))
1717
```

‎exercises/01.use-reducer/04.problem.function/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ function App() {
4444
id="step-input"
4545
type="number"
4646
value={step}
47-
onChange={e => setStep(Number(e.currentTarget.value))}
47+
onChange={(e) => setStep(Number(e.currentTarget.value))}
4848
/>
4949
</div>
5050
</form>

‎exercises/01.use-reducer/04.solution.function/index.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ function Counter({ initialCount = 0, step = 1 }) {
1414
})
1515
const { count } = state
1616
const increment = () =>
17-
setState(currentState => ({ count: currentState.count + step }))
17+
setState((currentState) => ({ count: currentState.count + step }))
1818
const decrement = () =>
19-
setState(currentState => ({ count: currentState.count - step }))
19+
setState((currentState) => ({ count: currentState.count - step }))
2020
return (
2121
<div className="counter">
2222
<output>{count}</output>
@@ -41,7 +41,7 @@ function App() {
4141
id="step-input"
4242
type="number"
4343
value={step}
44-
onChange={e => setStep(Number(e.currentTarget.value))}
44+
onChange={(e) => setStep(Number(e.currentTarget.value))}
4545
/>
4646
</div>
4747
</form>

‎exercises/01.use-reducer/05.problem.traditional/index.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@ function Counter({ initialCount = 0, step = 1 }) {
2222
// 🐨 the logic has now been moved back to the reducer, update these to pass
2323
// the appropriate action object to the dispatch function
2424
const increment = () =>
25-
setState(currentState => ({ count: currentState.count + step }))
25+
setState((currentState) => ({ count: currentState.count + step }))
2626
const decrement = () =>
27-
setState(currentState => ({ count: currentState.count - step }))
27+
setState((currentState) => ({ count: currentState.count - step }))
2828
return (
2929
<div className="counter">
3030
<output>{count}</output>
@@ -49,7 +49,7 @@ function App() {
4949
id="step-input"
5050
type="number"
5151
value={step}
52-
onChange={e => setStep(Number(e.currentTarget.value))}
52+
onChange={(e) => setStep(Number(e.currentTarget.value))}
5353
/>
5454
</div>
5555
</form>

‎exercises/01.use-reducer/05.solution.traditional/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ function App() {
5454
id="step-input"
5555
type="number"
5656
value={step}
57-
onChange={e => setStep(Number(e.currentTarget.value))}
57+
onChange={(e) => setStep(Number(e.currentTarget.value))}
5858
/>
5959
</div>
6060
</form>

‎exercises/01.use-reducer/06.problem.tic-tac-toe/index.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ function App() {
9595
// then call the dispatch function with the proper type
9696
if (winner || currentSquares[index]) return
9797

98-
setState(previousState => {
98+
setState((previousState) => {
9999
const { currentStep, history } = previousState
100100
const newHistory = history.slice(0, currentStep + 1)
101101
const squares = history[currentStep].with(index, nextValue)
@@ -124,7 +124,10 @@ function App() {
124124
<button
125125
// 🐨 update this to use the dispatch function with the proper type
126126
onClick={() =>
127-
setState(previousState => ({ ...previousState, currentStep: step }))
127+
setState((previousState) => ({
128+
...previousState,
129+
currentStep: step,
130+
}))
128131
}
129132
aria-disabled={isCurrentStep}
130133
aria-label={label}

‎exercises/01.use-reducer/README.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const initialNameValue = 'Joe'
2525

2626
function NameInput() {
2727
const [name, setName] = useReducer(nameReducer, initialNameValue)
28-
const handleChange = event => setName(event.currentTarget.value)
28+
const handleChange = (event) => setName(event.currentTarget.value)
2929
return (
3030
<div>
3131
<label>

‎exercises/02.state-optimization/01.problem.optimize/index.tsx

+11-9
Original file line numberDiff line numberDiff line change
@@ -58,14 +58,14 @@ function Form({
5858
query: string
5959
setSearchParams: typeof setGlobalSearchParams
6060
}) {
61-
const words = query.split(' ').map(w => w.trim())
61+
const words = query.split(' ').map((w) => w.trim())
6262

6363
const dogChecked = words.includes('dog')
6464
const catChecked = words.includes('cat')
6565
const caterpillarChecked = words.includes('caterpillar')
6666

6767
function handleCheck(tag: string, checked: boolean) {
68-
const newWords = checked ? [...words, tag] : words.filter(w => w !== tag)
68+
const newWords = checked ? [...words, tag] : words.filter((w) => w !== tag)
6969
setSearchParams(
7070
{ query: newWords.filter(Boolean).join(' ').trim() },
7171
{ replace: true },
@@ -74,7 +74,7 @@ function Form({
7474

7575
return (
7676
<form
77-
onSubmit={e => {
77+
onSubmit={(e) => {
7878
e.preventDefault()
7979
setSearchParams({ query })
8080
}}
@@ -86,7 +86,7 @@ function Form({
8686
name="query"
8787
type="search"
8888
value={query}
89-
onChange={e =>
89+
onChange={(e) =>
9090
setSearchParams({ query: e.currentTarget.value }, { replace: true })
9191
}
9292
/>
@@ -96,23 +96,25 @@ function Form({
9696
<input
9797
type="checkbox"
9898
checked={dogChecked}
99-
onChange={e => handleCheck('dog', e.currentTarget.checked)}
99+
onChange={(e) => handleCheck('dog', e.currentTarget.checked)}
100100
/>{' '}
101101
🐶 dog
102102
</label>
103103
<label>
104104
<input
105105
type="checkbox"
106106
checked={catChecked}
107-
onChange={e => handleCheck('cat', e.currentTarget.checked)}
107+
onChange={(e) => handleCheck('cat', e.currentTarget.checked)}
108108
/>{' '}
109109
🐱 cat
110110
</label>
111111
<label>
112112
<input
113113
type="checkbox"
114114
checked={caterpillarChecked}
115-
onChange={e => handleCheck('caterpillar', e.currentTarget.checked)}
115+
onChange={(e) =>
116+
handleCheck('caterpillar', e.currentTarget.checked)
117+
}
116118
/>{' '}
117119
🐛 caterpillar
118120
</label>
@@ -127,7 +129,7 @@ function MatchingPosts({ query }: { query: string }) {
127129

128130
return (
129131
<ul className="post-list">
130-
{matchingPosts.map(post => (
132+
{matchingPosts.map((post) => (
131133
<Card key={post.id} post={post} />
132134
))}
133135
</ul>
@@ -156,7 +158,7 @@ function Card({ post }: { post: BlogPost }) {
156158
/>
157159
<a
158160
href={post.id}
159-
onClick={event => {
161+
onClick={(event) => {
160162
event.preventDefault()
161163
alert(`Great! Let's go to ${post.id}!`)
162164
}}

‎exercises/02.state-optimization/01.solution.optimize/index.tsx

+13-11
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ function App() {
1717
useEffect(() => {
1818
function updateSearchParams() {
1919
console.log('updating search params')
20-
setSearchParamsState(prevParams => {
20+
setSearchParamsState((prevParams) => {
2121
const newParams = new URLSearchParams(window.location.search)
2222
return prevParams.toString() === newParams.toString()
2323
? prevParams
@@ -31,7 +31,7 @@ function App() {
3131
function setSearchParams(...args: Parameters<typeof setGlobalSearchParams>) {
3232
console.log('setting search params')
3333
const searchParams = setGlobalSearchParams(...args)
34-
setSearchParamsState(prevParams => {
34+
setSearchParamsState((prevParams) => {
3535
return prevParams.toString() === searchParams.toString()
3636
? prevParams
3737
: searchParams
@@ -57,14 +57,14 @@ function Form({
5757
query: string
5858
setSearchParams: typeof setGlobalSearchParams
5959
}) {
60-
const words = query.split(' ').map(w => w.trim())
60+
const words = query.split(' ').map((w) => w.trim())
6161

6262
const dogChecked = words.includes('dog')
6363
const catChecked = words.includes('cat')
6464
const caterpillarChecked = words.includes('caterpillar')
6565

6666
function handleCheck(tag: string, checked: boolean) {
67-
const newWords = checked ? [...words, tag] : words.filter(w => w !== tag)
67+
const newWords = checked ? [...words, tag] : words.filter((w) => w !== tag)
6868
setSearchParams(
6969
{ query: newWords.filter(Boolean).join(' ').trim() },
7070
{ replace: true },
@@ -73,7 +73,7 @@ function Form({
7373

7474
return (
7575
<form
76-
onSubmit={e => {
76+
onSubmit={(e) => {
7777
e.preventDefault()
7878
setSearchParams({ query })
7979
}}
@@ -85,7 +85,7 @@ function Form({
8585
name="query"
8686
type="search"
8787
value={query}
88-
onChange={e =>
88+
onChange={(e) =>
8989
setSearchParams({ query: e.currentTarget.value }, { replace: true })
9090
}
9191
/>
@@ -95,23 +95,25 @@ function Form({
9595
<input
9696
type="checkbox"
9797
checked={dogChecked}
98-
onChange={e => handleCheck('dog', e.currentTarget.checked)}
98+
onChange={(e) => handleCheck('dog', e.currentTarget.checked)}
9999
/>{' '}
100100
🐶 dog
101101
</label>
102102
<label>
103103
<input
104104
type="checkbox"
105105
checked={catChecked}
106-
onChange={e => handleCheck('cat', e.currentTarget.checked)}
106+
onChange={(e) => handleCheck('cat', e.currentTarget.checked)}
107107
/>{' '}
108108
🐱 cat
109109
</label>
110110
<label>
111111
<input
112112
type="checkbox"
113113
checked={caterpillarChecked}
114-
onChange={e => handleCheck('caterpillar', e.currentTarget.checked)}
114+
onChange={(e) =>
115+
handleCheck('caterpillar', e.currentTarget.checked)
116+
}
115117
/>{' '}
116118
🐛 caterpillar
117119
</label>
@@ -126,7 +128,7 @@ function MatchingPosts({ query }: { query: string }) {
126128

127129
return (
128130
<ul className="post-list">
129-
{matchingPosts.map(post => (
131+
{matchingPosts.map((post) => (
130132
<Card key={post.id} post={post} />
131133
))}
132134
</ul>
@@ -155,7 +157,7 @@ function Card({ post }: { post: BlogPost }) {
155157
/>
156158
<a
157159
href={post.id}
158-
onClick={event => {
160+
onClick={(event) => {
159161
event.preventDefault()
160162
alert(`Great! Let's go to ${post.id}!`)
161163
}}

‎exercises/02.state-optimization/README.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@ const [state, setState] = useState({ count: 0 })
1818

1919
// ...
2020
setState({ count: 0 }) // <-- will trigger a rerender
21-
setState(previousState => ({
21+
setState((previousState) => ({
2222
count: previousState.count,
2323
})) // <-- will trigger a rerender
24-
setState(previousState => previousState) // <-- will not trigger a rerender
24+
setState((previousState) => previousState) // <-- will not trigger a rerender
2525
```
2626

2727
So, with a little forethought, you can optimize your state updates by

0 commit comments

Comments
 (0)