From 17d440408d1fd5ae79f16f27e2bf99dac22d5ce1 Mon Sep 17 00:00:00 2001
From: Jeffrey Ben <54586510+jefficy1234@users.noreply.github.com>
Date: Fri, 27 Mar 2020 12:27:11 -0400
Subject: [PATCH] POKEMON API HOOKS PAIRING

---
 src/Pokedex.js | 32 +++++++++++++++++++++++++++-----
 src/hooks.js   | 18 ++++++++++++++++++
 2 files changed, 45 insertions(+), 5 deletions(-)
 create mode 100644 src/hooks.js

diff --git a/src/Pokedex.js b/src/Pokedex.js
index e278f1d..afccb67 100644
--- a/src/Pokedex.js
+++ b/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>
   );
-}
\ No newline at end of file
+}
diff --git a/src/hooks.js b/src/hooks.js
new file mode 100644
index 0000000..c2d098d
--- /dev/null
+++ b/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];
+}