chore: starts epicweb-dev#1.3

src/exercise/1.extra-3.js

@@ -0,0 +1,63 @@
+// Simple Data-fetching
+// http://localhost:3000/isolated/exercise/01.js
+
+import * as React from 'react'
+import {fetchPokemon, PokemonDataView, PokemonErrorBoundary} from '../pokemon'
+
+
+function createResource(promise) {
+  let status = 'pending'
+  let result = promise.then(
+    resolved => {
+      status = 'success'
+      result = resolved
+    },
+    rejected => {
+      status = 'error'
+      result = rejected
+    },
+  )
+
+  return {
+    read() {
+      if (status === 'pending') throw result
+      if (status === 'error') throw result
+      if (status === 'success') return result
+      throw new Error('Unable to fetch pokemon')
+    },
+  }
+}
+
+let pokemonResource = createResource(fetchPokemon('pikachu'))
+
+function PokemonInfo() {
+  const pokemon = pokemonResource.read()
+  return (
+    <div>
+      <div className="pokemon-info__img-wrapper">
+        <img src={pokemon.image} alt={pokemon.name} />
+      </div>
+      <PokemonDataView pokemon={pokemon} />
+    </div>
+  )
+}
+
+function LoadingPokemon() {
+  return <div>loading pokemon...</div>
+}
+
+function App() {
+  return (
+    <div className="pokemon-info-app">
+      <div className="pokemon-info">
+        <PokemonErrorBoundary>
+          <React.Suspense fallback={<LoadingPokemon />}>
+            <PokemonInfo />
+          </React.Suspense>
+        </PokemonErrorBoundary>
+      </div>
+    </div>
+  )
+}
+
+export default App