text: // http://localhost:3000/isolated/examples/fetch-approaches/lazy/pokemon-info-fetch-on-render.js
  
  import * as React from 'react'
  import {
    fetchPokemon,
    PokemonInfoFallback,
    PokemonDataView,
  } from '../../../pokemon'
  
  function PokemonInfo({pokemonName}) {
    const [state, setState] = React.useReducer((s, a) => ({...s, ...a}), {
      pokemon: null,
      error: null,
      status: 'pending',
    })
  
    const {pokemon, error, status} = state
  
    React.useEffect(() => {
      let current = true
      setState({status: 'pending'})
      fetchPokemon(pokemonName).then(
        p => {
          if (current) setState({pokemon: p, status: 'success'})
        },
        e => {
          if (current) setState({error: e, status: 'error'})
        },
      )
      return () => (current = false)
    }, [pokemonName])
  
    if (status === 'pending') {
      return <PokemonInfoFallback name={pokemonName} />
    }
  
    if (status === 'error') {
      return (
        <div>
          There was an error.
          <pre style={{whiteSpace: 'normal'}}>{error.message}</pre>
        </div>
      )
    }
  
    if (status === 'success') {
      return (
        <div>
          <div className="pokemon-info__img-wrapper">
            <img src={pokemon.image} alt={pokemon.name} />
          </div>
          <PokemonDataView pokemon={pokemon} />
        </div>
      )
    }
  }
  
  export default PokemonInfo
  