A "Pokedex" hook for using the PokeAPI to show a list of pokemons with pagination.

usePokedex.ts

import {EffectCallback, MouseEventHandler, useEffect, useState} from "react";

export interface Pokemon {
  name: string,
  url: string,
  id: string,
  img: string
}

export interface Pokedex {
  nextPageHandler: MouseEventHandler,
  content: Pokemon[],
  prevPageHandler: MouseEventHandler
}

const noop = () => {};

const initialPokedex = {
  nextPageHandler: noop,
  content: [] as Pokemon[],
  prevPageHandler: noop
} as Pokedex;

export function usePokedex(url = "https://pokeapi.co/api/v2/pokemon"): Pokedex {
  const [pokedex, setPokedex] = useState(initialPokedex);

  useEffect(updatePageGenerator(url, setPokedex) as EffectCallback, []);

  return pokedex
}

const updatePageGenerator = (url: string | null, cb: Function): MouseEventHandler | null => {
  if (!!url) {
    return () => {
      fetch(url)
        .then(r => r.json())
        .then(r => {
          cb({
            nextPageHandler: updatePageGenerator(r.next, cb),
            content: r.results.map(parsePokemons),
            prevPageHandler: updatePageGenerator(r.previous, cb)
          });
        }).catch(e => {
        console.error('Error getting page', e.toString());
      })
    };
  } else {
    return null;
  }
};

const parsePokemons = ({name, url}: { name: string, url: string }) => {
  const [, id] = url.split('/').reverse();
  return {
    name: capitalize(name),
    url,
    id,
    img: `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png`
  }
};

const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.substring(1).toLowerCase();