upgrade config

epicweb-dev · Jun 27, 2024 · 1a4f44d · 1a4f44d
1 parent 7bf458b
commit 1a4f44d
Show file tree

Hide file tree

Showing 54 changed files with 1,923 additions and 634 deletions.
diff --git a/epicshop/package-lock.json b/epicshop/package-lock.json
diff --git a/epicshop/package.json b/epicshop/package.json
@@ -1,7 +1,7 @@
 {
   "type": "module",
   "dependencies": {
-    "@epic-web/config": "^1.5.4",
+    "@epic-web/config": "^1.11.2",
     "@epic-web/workshop-app": "^4.8.1"
   }
 }
diff --git a/epicshop/setup-custom.js b/epicshop/setup-custom.js
@@ -26,7 +26,7 @@ if (!process.env.SKIP_PLAYGROUND) {
 			() => {
 				console.log('✅ first problem app set up')
 			},
-			error => {
+			(error) => {
 				console.error(error)
 				throw new Error('❌  first problem app setup failed')
 			},

diff --git a/exercises/01.use-reducer/01.problem.new-state/index.tsx b/exercises/01.use-reducer/01.problem.new-state/index.tsx
@@ -38,7 +38,7 @@ function App() {
 						id="step-input"
 						type="number"
 						value={step}
-						onChange={e => setStep(Number(e.currentTarget.value))}
+						onChange={(e) => setStep(Number(e.currentTarget.value))}
 					/>
 				</div>
 			</form>

diff --git a/exercises/01.use-reducer/01.solution.new-state/index.tsx b/exercises/01.use-reducer/01.solution.new-state/index.tsx
@@ -31,7 +31,7 @@ function App() {
 						id="step-input"
 						type="number"
 						value={step}
-						onChange={e => setStep(Number(e.currentTarget.value))}
+						onChange={(e) => setStep(Number(e.currentTarget.value))}
 					/>
 				</div>
 			</form>

diff --git a/exercises/01.use-reducer/02.problem.previous-state/index.tsx b/exercises/01.use-reducer/02.problem.previous-state/index.tsx
@@ -36,7 +36,7 @@ function App() {
 						id="step-input"
 						type="number"
 						value={step}
-						onChange={e => setStep(Number(e.currentTarget.value))}
+						onChange={(e) => setStep(Number(e.currentTarget.value))}
 					/>
 				</div>
 			</form>

diff --git a/exercises/01.use-reducer/02.solution.previous-state/index.tsx b/exercises/01.use-reducer/02.solution.previous-state/index.tsx
@@ -31,7 +31,7 @@ function App() {
 						id="step-input"
 						type="number"
 						value={step}
-						onChange={e => setStep(Number(e.currentTarget.value))}
+						onChange={(e) => setStep(Number(e.currentTarget.value))}
 					/>
 				</div>
 			</form>

diff --git a/exercises/01.use-reducer/03.problem.object/index.tsx b/exercises/01.use-reducer/03.problem.object/index.tsx
@@ -40,7 +40,7 @@ function App() {
 						id="step-input"
 						type="number"
 						value={step}
-						onChange={e => setStep(Number(e.currentTarget.value))}
+						onChange={(e) => setStep(Number(e.currentTarget.value))}
 					/>
 				</div>
 			</form>

diff --git a/exercises/01.use-reducer/03.solution.object/index.tsx b/exercises/01.use-reducer/03.solution.object/index.tsx
@@ -36,7 +36,7 @@ function App() {
 						id="step-input"
 						type="number"
 						value={step}
-						onChange={e => setStep(Number(e.currentTarget.value))}
+						onChange={(e) => setStep(Number(e.currentTarget.value))}
 					/>
 				</div>
 			</form>

diff --git a/exercises/01.use-reducer/04.problem.function/README.mdx b/exercises/01.use-reducer/04.problem.function/README.mdx
@@ -11,7 +11,7 @@ const [state, setState] = useReducer(countReducer, {
 })
 const { count } = state
 const increment = () =>
-	setState(currentState => ({ count: currentState.count + step }))
+	setState((currentState) => ({ count: currentState.count + step }))
 const decrement = () =>
-	setState(currentState => ({ count: currentState.count - step }))
+	setState((currentState) => ({ count: currentState.count - step }))
 ```
diff --git a/exercises/01.use-reducer/04.problem.function/index.tsx b/exercises/01.use-reducer/04.problem.function/index.tsx
@@ -44,7 +44,7 @@ function App() {
 						id="step-input"
 						type="number"
 						value={step}
-						onChange={e => setStep(Number(e.currentTarget.value))}
+						onChange={(e) => setStep(Number(e.currentTarget.value))}
 					/>
 				</div>
 			</form>

diff --git a/exercises/01.use-reducer/04.solution.function/index.tsx b/exercises/01.use-reducer/04.solution.function/index.tsx
@@ -14,9 +14,9 @@ function Counter({ initialCount = 0, step = 1 }) {
 	})
 	const { count } = state
 	const increment = () =>
-		setState(currentState => ({ count: currentState.count + step }))
+		setState((currentState) => ({ count: currentState.count + step }))
 	const decrement = () =>
-		setState(currentState => ({ count: currentState.count - step }))
+		setState((currentState) => ({ count: currentState.count - step }))
 	return (
 		<div className="counter">
 			<output>{count}</output>
@@ -41,7 +41,7 @@ function App() {
 						id="step-input"
 						type="number"
 						value={step}
-						onChange={e => setStep(Number(e.currentTarget.value))}
+						onChange={(e) => setStep(Number(e.currentTarget.value))}
 					/>
 				</div>
 			</form>

diff --git a/exercises/01.use-reducer/05.problem.traditional/index.tsx b/exercises/01.use-reducer/05.problem.traditional/index.tsx
@@ -22,9 +22,9 @@ function Counter({ initialCount = 0, step = 1 }) {
 	// 🐨 the logic has now been moved back to the reducer, update these to pass
 	// the appropriate action object to the dispatch function
 	const increment = () =>
-		setState(currentState => ({ count: currentState.count + step }))
+		setState((currentState) => ({ count: currentState.count + step }))
 	const decrement = () =>
-		setState(currentState => ({ count: currentState.count - step }))
+		setState((currentState) => ({ count: currentState.count - step }))
 	return (
 		<div className="counter">
 			<output>{count}</output>
@@ -49,7 +49,7 @@ function App() {
 						id="step-input"
 						type="number"
 						value={step}
-						onChange={e => setStep(Number(e.currentTarget.value))}
+						onChange={(e) => setStep(Number(e.currentTarget.value))}
 					/>
 				</div>
 			</form>

diff --git a/exercises/01.use-reducer/05.solution.traditional/index.tsx b/exercises/01.use-reducer/05.solution.traditional/index.tsx
@@ -54,7 +54,7 @@ function App() {
 						id="step-input"
 						type="number"
 						value={step}
-						onChange={e => setStep(Number(e.currentTarget.value))}
+						onChange={(e) => setStep(Number(e.currentTarget.value))}
 					/>
 				</div>
 			</form>

diff --git a/exercises/01.use-reducer/06.problem.tic-tac-toe/index.tsx b/exercises/01.use-reducer/06.problem.tic-tac-toe/index.tsx
@@ -95,7 +95,7 @@ function App() {
 		// then call the dispatch function with the proper type
 		if (winner || currentSquares[index]) return
 
-		setState(previousState => {
+		setState((previousState) => {
 			const { currentStep, history } = previousState
 			const newHistory = history.slice(0, currentStep + 1)
 			const squares = history[currentStep].with(index, nextValue)
@@ -124,7 +124,10 @@ function App() {
 				<button
 					// 🐨 update this to use the dispatch function with the proper type
 					onClick={() =>
-						setState(previousState => ({ ...previousState, currentStep: step }))
+						setState((previousState) => ({
+							...previousState,
+							currentStep: step,
+						}))
 					}
 					aria-disabled={isCurrentStep}
 					aria-label={label}

diff --git a/exercises/01.use-reducer/README.mdx b/exercises/01.use-reducer/README.mdx
@@ -25,7 +25,7 @@ const initialNameValue = 'Joe'
 
 function NameInput() {
 	const [name, setName] = useReducer(nameReducer, initialNameValue)
-	const handleChange = event => setName(event.currentTarget.value)
+	const handleChange = (event) => setName(event.currentTarget.value)
 	return (
 		<div>
 			<label>

diff --git a/exercises/02.state-optimization/01.problem.optimize/index.tsx b/exercises/02.state-optimization/01.problem.optimize/index.tsx
@@ -58,14 +58,14 @@ function Form({
 	query: string
 	setSearchParams: typeof setGlobalSearchParams
 }) {
-	const words = query.split(' ').map(w => w.trim())
+	const words = query.split(' ').map((w) => w.trim())
 
 	const dogChecked = words.includes('dog')
 	const catChecked = words.includes('cat')
 	const caterpillarChecked = words.includes('caterpillar')
 
 	function handleCheck(tag: string, checked: boolean) {
-		const newWords = checked ? [...words, tag] : words.filter(w => w !== tag)
+		const newWords = checked ? [...words, tag] : words.filter((w) => w !== tag)
 		setSearchParams(
 			{ query: newWords.filter(Boolean).join(' ').trim() },
 			{ replace: true },
@@ -74,7 +74,7 @@ function Form({
 
 	return (
 		<form
-			onSubmit={e => {
+			onSubmit={(e) => {
 				e.preventDefault()
 				setSearchParams({ query })
 			}}
@@ -86,7 +86,7 @@ function Form({
 					name="query"
 					type="search"
 					value={query}
-					onChange={e =>
+					onChange={(e) =>
 						setSearchParams({ query: e.currentTarget.value }, { replace: true })
 					}
 				/>
@@ -96,23 +96,25 @@ function Form({
 					<input
 						type="checkbox"
 						checked={dogChecked}
-						onChange={e => handleCheck('dog', e.currentTarget.checked)}
+						onChange={(e) => handleCheck('dog', e.currentTarget.checked)}
 					/>{' '}
 					🐶 dog
 				</label>
 				<label>
 					<input
 						type="checkbox"
 						checked={catChecked}
-						onChange={e => handleCheck('cat', e.currentTarget.checked)}
+						onChange={(e) => handleCheck('cat', e.currentTarget.checked)}
 					/>{' '}
 					🐱 cat
 				</label>
 				<label>
 					<input
 						type="checkbox"
 						checked={caterpillarChecked}
-						onChange={e => handleCheck('caterpillar', e.currentTarget.checked)}
+						onChange={(e) =>
+							handleCheck('caterpillar', e.currentTarget.checked)
+						}
 					/>{' '}
 					🐛 caterpillar
 				</label>
@@ -127,7 +129,7 @@ function MatchingPosts({ query }: { query: string }) {
 
 	return (
 		<ul className="post-list">
-			{matchingPosts.map(post => (
+			{matchingPosts.map((post) => (
 				<Card key={post.id} post={post} />
 			))}
 		</ul>
@@ -156,7 +158,7 @@ function Card({ post }: { post: BlogPost }) {
 			/>
 			<a
 				href={post.id}
-				onClick={event => {
+				onClick={(event) => {
 					event.preventDefault()
 					alert(`Great! Let's go to ${post.id}!`)
 				}}

diff --git a/exercises/02.state-optimization/01.solution.optimize/index.tsx b/exercises/02.state-optimization/01.solution.optimize/index.tsx
@@ -17,7 +17,7 @@ function App() {
 	useEffect(() => {
 		function updateSearchParams() {
 			console.log('updating search params')
-			setSearchParamsState(prevParams => {
+			setSearchParamsState((prevParams) => {
 				const newParams = new URLSearchParams(window.location.search)
 				return prevParams.toString() === newParams.toString()
 					? prevParams
@@ -31,7 +31,7 @@ function App() {
 	function setSearchParams(...args: Parameters<typeof setGlobalSearchParams>) {
 		console.log('setting search params')
 		const searchParams = setGlobalSearchParams(...args)
-		setSearchParamsState(prevParams => {
+		setSearchParamsState((prevParams) => {
 			return prevParams.toString() === searchParams.toString()
 				? prevParams
 				: searchParams
@@ -57,14 +57,14 @@ function Form({
 	query: string
 	setSearchParams: typeof setGlobalSearchParams
 }) {
-	const words = query.split(' ').map(w => w.trim())
+	const words = query.split(' ').map((w) => w.trim())
 
 	const dogChecked = words.includes('dog')
 	const catChecked = words.includes('cat')
 	const caterpillarChecked = words.includes('caterpillar')
 
 	function handleCheck(tag: string, checked: boolean) {
-		const newWords = checked ? [...words, tag] : words.filter(w => w !== tag)
+		const newWords = checked ? [...words, tag] : words.filter((w) => w !== tag)
 		setSearchParams(
 			{ query: newWords.filter(Boolean).join(' ').trim() },
 			{ replace: true },
@@ -73,7 +73,7 @@ function Form({
 
 	return (
 		<form
-			onSubmit={e => {
+			onSubmit={(e) => {
 				e.preventDefault()
 				setSearchParams({ query })
 			}}
@@ -85,7 +85,7 @@ function Form({
 					name="query"
 					type="search"
 					value={query}
-					onChange={e =>
+					onChange={(e) =>
 						setSearchParams({ query: e.currentTarget.value }, { replace: true })
 					}
 				/>
@@ -95,23 +95,25 @@ function Form({
 					<input
 						type="checkbox"
 						checked={dogChecked}
-						onChange={e => handleCheck('dog', e.currentTarget.checked)}
+						onChange={(e) => handleCheck('dog', e.currentTarget.checked)}
 					/>{' '}
 					🐶 dog
 				</label>
 				<label>
 					<input
 						type="checkbox"
 						checked={catChecked}
-						onChange={e => handleCheck('cat', e.currentTarget.checked)}
+						onChange={(e) => handleCheck('cat', e.currentTarget.checked)}
 					/>{' '}
 					🐱 cat
 				</label>
 				<label>
 					<input
 						type="checkbox"
 						checked={caterpillarChecked}
-						onChange={e => handleCheck('caterpillar', e.currentTarget.checked)}
+						onChange={(e) =>
+							handleCheck('caterpillar', e.currentTarget.checked)
+						}
 					/>{' '}
 					🐛 caterpillar
 				</label>
@@ -126,7 +128,7 @@ function MatchingPosts({ query }: { query: string }) {
 
 	return (
 		<ul className="post-list">
-			{matchingPosts.map(post => (
+			{matchingPosts.map((post) => (
 				<Card key={post.id} post={post} />
 			))}
 		</ul>
@@ -155,7 +157,7 @@ function Card({ post }: { post: BlogPost }) {
 			/>
 			<a
 				href={post.id}
-				onClick={event => {
+				onClick={(event) => {
 					event.preventDefault()
 					alert(`Great! Let's go to ${post.id}!`)
 				}}

diff --git a/exercises/02.state-optimization/README.mdx b/exercises/02.state-optimization/README.mdx
@@ -18,10 +18,10 @@ const [state, setState] = useState({ count: 0 })
 
 // ...
 setState({ count: 0 }) // <-- will trigger a rerender
-setState(previousState => ({
+setState((previousState) => ({
 	count: previousState.count,
 })) // <-- will trigger a rerender
-setState(previousState => previousState) // <-- will not trigger a rerender
+setState((previousState) => previousState) // <-- will not trigger a rerender
 ```
 
 So, with a little forethought, you can optimize your state updates by