import { useEffect } from 'react';
import { getAllPokemon } from './utils/pokemon'

function App() {
  const initialURL = `https://pokeapi.co/api/v2/pokemon/`;

  useEffect(() => {
    const fetchPokemonData = async function() {
      let res = await getAllPokemon(initialURL)
      console.log(res);
    }

    fetchPokemonData();
  }, [])


  return (
    <div className="App">

    </div>
  );
}

export const getAllPokemon = function (url) {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => resolve(data));
  });
};

const [pokemonData, setPokemonData] = useState([])

  useEffect(() => {
    const fetchPokemonData = async function() {
      let res = await getAllPokemon(initialURL)

      loadPokemon(res.results) // added
      setLoading(false)
    }


    fetchPokemonData();
  }, [])

  const loadPokemon = async function(data) {
    let _pokemonData = await Promise.all(data.map((item) => {
      let pokemonRecord = getPokemon(item.url)
      return pokemonRecord;
    }))
    setPokemonData(_pokemonData)
  }