migrate: exercise 06 to kcd-workshop format

Author: chantastic

src/exercise/02.md renamed to exercises/06.use-effect-http-requests/01.problem/02.md

@@ -0,0 +1,10 @@
+# useEffect: HTTP Requests
+
+In this exercise, we'll be doing data fetching directly in a useEffect hook
+callback within our component.
+
+Here we have a form where users can enter the name of a pokemon and fetch data
+about that pokemon. Your job will be to create a component which makes that
+fetch request. When the user submits a pokemon name, our `PokemonInfo` component
+will get re-rendered with the `pokemonName`
+

exercises/06.use-effect-http-requests/01.problem/README.mdx

@@ -0,0 +1 @@
+@import "/pokemon.css"

exercises/06.use-effect-http-requests/01.problem/index.css

@@ -1,12 +1,10 @@
-// useEffect: HTTP requests
-// http://localhost:3000/isolated/exercise/06.tsx
-
 import * as React from 'react'
+import * as ReactDOM from 'react-dom/client'
 // 🐨 you'll want the following additional things from '../pokemon':
 // fetchPokemon: the function we call to get the pokemon info
 // PokemonInfoFallback: the thing we show while we're loading the pokemon info
 // PokemonDataView: the stuff we use to display the pokemon info
-import {PokemonForm} from '../pokemon'
+import {PokemonForm} from '~/shared/pokemon'
 
 function PokemonInfo({pokemonName}: {pokemonName: string}) {
   // 🐨 Have state for the pokemon (null)
@@ -47,4 +45,6 @@ function App() {
   )
 }
 
-export {App}
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+ReactDOM.createRoot(rootEl).render(<App />)

src/exercise/06.tsx renamed to exercises/06.use-effect-http-requests/01.problem/index.tsx

@@ -0,0 +1 @@
+# useEffect: HTTP Requests

exercises/06.use-effect-http-requests/01.solution/README.mdx

@@ -0,0 +1 @@
+@import "/pokemon.css"

exercises/06.use-effect-http-requests/01.solution/index.css

@@ -1,14 +1,12 @@
-// useEffect: HTTP requests
-// http://localhost:3000/isolated/final/06.tsx
-
 import * as React from 'react'
+import * as ReactDOM from 'react-dom/client'
 import {
   fetchPokemon,
   PokemonInfoFallback,
   PokemonForm,
   PokemonDataView,
-} from '../pokemon'
-import type {PokemonData} from '../types'
+} from '~/shared/pokemon'
+import type {PokemonData} from '~/shared/types'
 
 function PokemonInfo({pokemonName}: {pokemonName: string}) {
   const [pokemon, setPokemon] = React.useState<PokemonData | null>(null)
@@ -48,4 +46,6 @@ function App() {
   )
 }
 
-export {App}
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+ReactDOM.createRoot(rootEl).render(<App />)

src/final/06.tsx renamed to exercises/06.use-effect-http-requests/01.solution/index.tsx

@@ -0,0 +1,45 @@
+# Handle Errors
+
+Unfortunately, sometimes things go wrong and we need to handle errors when they
+do so we can show the user useful information. Handle that error and render it
+out like so:
+
+```jsx
+<div role="alert">
+  There was an error: <pre style={{whiteSpace: 'normal'}}>{error.message}</pre>
+</div>
+```
+
+You can make an error happen by typing an incorrect pokemon name into the input.
+
+One common question I get about this extra credit is how to handle promise
+errors. There are two ways to do it in this extra credit:
+
+```javascript
+// option 1: using .catch
+fetchPokemon(pokemonName)
+  .then(pokemon => setPokemon(pokemon))
+  .catch(error => setError(error))
+
+// option 2: using the second argument to .then
+fetchPokemon(pokemonName).then(
+  pokemon => setPokemon(pokemon),
+  error => setError(error),
+)
+```
+
+These are functionally equivalent for our purposes, but they are semantically
+different in general.
+
+Using `.catch` means that you'll handle an error in the `fetchPokemon` promise,
+but you'll _also_ handle an error in the `setPokemon(pokemon)` call as well.
+This is due to the semantics of how promises work.
+
+Using the second argument to `.then` means that you will catch an error that
+happens in `fetchPokemon` only. In this case, I knew that calling `setPokemon`
+would not throw an error (React handles errors and we have an API to catch those
+which we'll use later), so I decided to go with the second argument option.
+
+However, in this situation, it doesn't really make much of a difference. If you
+want to go with the safe option, then opt for `.catch`.
+

exercises/06.use-effect-http-requests/02.problem/README.mdx

@@ -0,0 +1 @@
+@import "/pokemon.css"

exercises/06.use-effect-http-requests/02.problem/index.css

@@ -0,0 +1,51 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom/client'
+import {
+  fetchPokemon,
+  PokemonInfoFallback,
+  PokemonForm,
+  PokemonDataView,
+} from '~/shared/pokemon'
+import type {PokemonData} from '~/shared/types'
+
+function PokemonInfo({pokemonName}: {pokemonName: string}) {
+  const [pokemon, setPokemon] = React.useState<PokemonData | null>(null)
+
+  React.useEffect(() => {
+    if (!pokemonName) {
+      return
+    }
+    setPokemon(null)
+    fetchPokemon(pokemonName).then(pokemon => setPokemon(pokemon))
+  }, [pokemonName])
+
+  if (!pokemonName) {
+    return <span>Submit a pokemon</span>
+  } else if (!pokemon) {
+    return <PokemonInfoFallback name={pokemonName} />
+  } else {
+    return <PokemonDataView pokemon={pokemon} />
+  }
+}
+
+function App() {
+  const [pokemonName, setPokemonName] = React.useState('')
+
+  function handleSubmit(newPokemonName: string) {
+    setPokemonName(newPokemonName)
+  }
+
+  return (
+    <div className="pokemon-info-app">
+      <PokemonForm pokemonName={pokemonName} onSubmit={handleSubmit} />
+      <hr />
+      <div className="pokemon-info">
+        <PokemonInfo pokemonName={pokemonName} />
+      </div>
+    </div>
+  )
+}
+
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+ReactDOM.createRoot(rootEl).render(<App />)

exercises/06.use-effect-http-requests/02.problem/index.tsx

@@ -0,0 +1 @@
+# Handle Errors

exercises/06.use-effect-http-requests/02.solution/README.mdx

@@ -0,0 +1 @@
+@import "/pokemon.css"

exercises/06.use-effect-http-requests/02.solution/index.css

@@ -1,15 +1,12 @@
-// useEffect: HTTP requests
-// 💯 handle errors
-// http://localhost:3000/isolated/final/06.extra-1.tsx
-
 import * as React from 'react'
+import * as ReactDOM from 'react-dom/client'
 import {
   fetchPokemon,
   PokemonInfoFallback,
   PokemonForm,
   PokemonDataView,
-} from '../pokemon'
-import type {PokemonData} from '../types'
+} from '~/shared/pokemon'
+import type {PokemonData} from '~/shared/types'
 
 function PokemonInfo({pokemonName}: {pokemonName: string}) {
   const [pokemon, setPokemon] = React.useState<null | PokemonData>(null)
@@ -61,4 +58,6 @@ function App() {
   )
 }
 
-export {App}
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+ReactDOM.createRoot(rootEl).render(<App />)

src/final/06.extra-1.tsx renamed to exercises/06.use-effect-http-requests/02.solution/index.tsx

@@ -0,0 +1,22 @@
+# Use A Status
+
+Our logic for what to show the user when is kind of convoluted and requires that
+we be really careful about which state we set and when.
+
+We could make things much simpler by having some state to set the explicit
+status of our component. Our component can be in the following "states":
+
+- `idle`: no request made yet
+- `pending`: request started
+- `resolved`: request successful
+- `rejected`: request failed
+
+Try to use a status state by setting it to these string values rather than
+relying on existing state or booleans.
+
+Learn more about this concept here:
+[Stop using isLoading booleans](https://kentcdodds.com/blog/stop-using-isloading-booleans)
+
+💰 Warning: Make sure you call `setPokemon` before calling `setStatus`. We'll
+address that more in the next extra credit.
+

exercises/06.use-effect-http-requests/03.problem/README.mdx

@@ -0,0 +1 @@
+@import "/pokemon.css"

exercises/06.use-effect-http-requests/03.problem/index.css

@@ -0,0 +1,63 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom/client'
+import {
+  fetchPokemon,
+  PokemonInfoFallback,
+  PokemonForm,
+  PokemonDataView,
+} from '~/shared/pokemon'
+import type {PokemonData} from '~/shared/types'
+
+function PokemonInfo({pokemonName}: {pokemonName: string}) {
+  const [pokemon, setPokemon] = React.useState<null | PokemonData>(null)
+  const [error, setError] = React.useState<null | Error>(null)
+
+  React.useEffect(() => {
+    if (!pokemonName) {
+      return
+    }
+    setPokemon(null)
+    setError(null)
+    fetchPokemon(pokemonName).then(
+      pokemon => setPokemon(pokemon),
+      error => setError(error),
+    )
+  }, [pokemonName])
+
+  if (error) {
+    return (
+      <div role="alert">
+        There was an error:{' '}
+        <pre style={{whiteSpace: 'normal'}}>{error.message}</pre>
+      </div>
+    )
+  } else if (!pokemonName) {
+    return <span>Submit a pokemon</span>
+  } else if (!pokemon) {
+    return <PokemonInfoFallback name={pokemonName} />
+  } else {
+    return <PokemonDataView pokemon={pokemon} />
+  }
+}
+
+function App() {
+  const [pokemonName, setPokemonName] = React.useState('')
+
+  function handleSubmit(newPokemonName: string) {
+    setPokemonName(newPokemonName)
+  }
+
+  return (
+    <div className="pokemon-info-app">
+      <PokemonForm pokemonName={pokemonName} onSubmit={handleSubmit} />
+      <hr />
+      <div className="pokemon-info">
+        <PokemonInfo pokemonName={pokemonName} />
+      </div>
+    </div>
+  )
+}
+
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+ReactDOM.createRoot(rootEl).render(<App />)

exercises/06.use-effect-http-requests/03.problem/index.tsx

@@ -0,0 +1 @@
+# Use A Status

exercises/06.use-effect-http-requests/03.solution/README.mdx

@@ -0,0 +1 @@
+@import "/pokemon.css"

exercises/06.use-effect-http-requests/03.solution/index.css

@@ -1,15 +1,12 @@
-// useEffect: HTTP requests
-// 💯 use a status
-// http://localhost:3000/isolated/final/06.extra-2.tsx
-
 import * as React from 'react'
+import * as ReactDOM from 'react-dom/client'
 import {
   fetchPokemon,
   PokemonInfoFallback,
   PokemonForm,
   PokemonDataView,
-} from '../pokemon'
-import type {PokemonData} from '../types'
+} from '~/shared/pokemon'
+import type {PokemonData} from '~/shared/types'
 
 function PokemonInfo({pokemonName}: {pokemonName: string}) {
   const [status, setStatus] = React.useState('idle')
@@ -69,4 +66,6 @@ function App() {
   )
 }
 
-export {App}
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+ReactDOM.createRoot(rootEl).render(<App />)

src/final/06.extra-2.tsx renamed to exercises/06.use-effect-http-requests/03.solution/index.tsx

@@ -0,0 +1,44 @@
+# Store the State in an Object
+
+You'll notice that we're calling a bunch of state updaters in a row. This is
+normally not a problem, but each call to our state updater can result in a
+re-render of our component. React normally batches these calls so you only get a
+single re-render, but it's unable to do this in an asynchronous callback (like
+our promise success and error handlers).
+
+So you might notice that if you do this:
+
+```javascript
+setStatus('resolved')
+setPokemon(pokemon)
+```
+
+You'll get an error indicating that you cannot read `image` of `null`. This is
+because the `setStatus` call results in a re-render that happens before the
+`setPokemon` happens.
+
+> but it's unable to do this in an asynchronous callback
+
+This is no longer the case in React 18 as it supports automatic batching for
+asynchronous callback too.
+
+Learn more about this concept here:
+[New Feature: Automatic Batching](https://react.dev/blog/2022/03/29/react-v18#new-feature-automatic-batching)
+
+Still it is better to maintain closely related states as an object rather than
+maintaining them using individual useState hooks.
+
+Learn more about this concept here:
+[Should I useState or useReducer?](https://kentcdodds.com/blog/should-i-usestate-or-usereducer#conclusion)
+
+In the future, you'll learn about how `useReducer` can solve this problem really
+elegantly, but we can still accomplish this by storing our state as an object
+that has all the properties of state we're managing.
+
+See if you can figure out how to store all of your state in a single object with
+a single `React.useState` call so I can update my state like this:
+
+```javascript
+setState({status: 'resolved', pokemon})
+```
+

exercises/06.use-effect-http-requests/04.problem/README.mdx

@@ -0,0 +1 @@
+@import "/pokemon.css"