POKEMON API HOOKS PAIRING -JEFFREY, SANAA, SERAN

src/Pokedex.js

@@ -1,11 +1,33 @@
-import React from 'react';
+import React, { useRef } from "react";
+import { PokemonType } from "./PokemonType";
+import { usePokemonAPI } from "./hooks";
 
 export function Pokedex() {
+  const [selectedPokemon, getPokemonInfo] = usePokemonAPI();
+
+  const searchBox = useRef(null);
+
   return (
     <div>
-      <h4>
-        Edit <code>src/Pokedex.js</code> and save to reload.
-      </h4>
+      {selectedPokemon && (
+        <div>
+          {selectedPokemon.name}
+          <PokemonType type={selectedPokemon.types[0].type.name} />
+          {selectedPokemon.types.length > 1 && (
+            <PokemonType type={selectedPokemon.types[1].type.name} />
+          )}
+
+          <img src={selectedPokemon.sprites.front_default} alt="sprite" />
+        </div>
+      )}
+      <p>Select Pokemon:</p>
+      <button onClick={() => getPokemonInfo("Squirtle")}>Squirtle</button>
+      <button onClick={() => getPokemonInfo("Bulbasaur")}>Bulbasaur</button>
+      <button onClick={() => getPokemonInfo("Charmander")}>Charmander</button>
+      <input ref={searchBox} />
+      <button onClick={() => getPokemonInfo(searchBox.current.value)}>
+        Search
+      </button>
     </div>
   );
-}
+}

src/hooks.js

@@ -0,0 +1,18 @@
+import React, { useState } from "react";
+
+export function usePokemonAPI() {
+  const [pokemon, setPokemon] = useState(null);
+
+  async function getPokemonInfo(name) {
+    const url = `https://pokeapi.co/api/v2/pokemon/${name.toLowerCase()}`;
+    const response = await fetch(url);
+    if (!response.ok) {
+      alert("Pokemon does not exist");
+      return;
+    }
+    const data = await response.json();
+    setPokemon(data);
+  }
+
+  return [pokemon, getPokemonInfo];
+}