Function Board

react-pokemon-kanban/src/components/Board.tsx:9–102

()

}

export default function Board() {
  const [pokemon, setPokemon] = useState<Array<IPokemon>>([]);

  useEffect(() => {
    const fetch10Pokemon = () => {
      let promises = [];
      for (let i = 1; i <= 5; i++) {
        const pokemonNumber = Math.round(Math.random() * 150 + 1);
        promises.push(
          fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonNumber}`)
        );
      }
      return Promise.all(promises);
    };

    const awaitJson = (responses: Response[]) => {
      return Promise.all(
        responses.map((response) => {
          if (response.ok) return response.json();
          throw new Error(response.statusText);
        })
      );
    };

    fetch10Pokemon()
      .then(awaitJson)
      .then((pokemonData: Array<any>) => {
        const mappedPokemonData = pokemonData.map((pd) => {
          return {
            name: pd.name,
            url: pd.sprites.front_default,
          };
        });
        setPokemon(mappedPokemonData);
      });
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  const updatePokemonOrdering = (result: any) => {
    const { destination, source, draggableId } = result;
    if (!destination) {
      return;
    }

    if (
      destination.droppableId === source.droppableId &&
      destination.index === source.index
    ) {
      return;
    }

    const sourcePokemon: IPokemon = pokemon.find(
      (pokemon) => pokemon.name === draggableId
    ) as IPokemon;
    const updatedPokemon: IPokemon[] = Array.from(pokemon);
    updatedPokemon.splice(source.index, 1);
    updatedPokemon.splice(destination.index, 0, sourcePokemon);
    setPokemon(updatedPokemon);
  };