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 />)