From c6a8d391e92ae51dfb6d180251cf64aa9d206481 Mon Sep 17 00:00:00 2001
From: Jalena Lee <jalena.lee@shopify.com>
Date: Fri, 27 Mar 2020 12:25:29 -0400
Subject: [PATCH] done

---
 src/Pokedex.js | 39 ++++++++++++++++++++++++++++++++++-----
 src/hook.js    | 18 ++++++++++++++++++
 2 files changed, 52 insertions(+), 5 deletions(-)
 create mode 100644 src/hook.js

diff --git a/src/Pokedex.js b/src/Pokedex.js
index e278f1d..8b77a5f 100644
--- a/src/Pokedex.js
+++ b/src/Pokedex.js
@@ -1,11 +1,40 @@
-import React from 'react';
+import React, { useRef } from "react";
+import { PokemonType } from "./PokemonType.js";
+import { usePokemonAPI } from "./hook.js";
 
 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 && selectedPokemon.species && (
+        <div>
+          <h4>{selectedPokemon.name}</h4>
+          <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>
+      )}
+      <input ref={searchBox} />
+      <button
+        onClick={async () => {
+          getPokemonInfo(searchBox.current.value);
+        }}
+      >
+        Search
+      </button>
+
+      <button onClick={async () => getPokemonInfo("Squirtle")}>Squirtle</button>
+      <button onClick={async () => getPokemonInfo("Charmander")}>
+        Charmander
+      </button>
+      <button onClick={async () => getPokemonInfo("Bulbasaur")}>
+        Bulbasaur
+      </button>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/hook.js b/src/hook.js
new file mode 100644
index 0000000..e65d54a
--- /dev/null
+++ b/src/hook.js
@@ -0,0 +1,18 @@
+import { useState } from "react";
+
+export function usePokemonAPI() {
+  let [selectedPokemon, setSelectedPokemon] = 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();
+    setSelectedPokemon(data);
+  }
+
+  return [selectedPokemon, getPokemonInfo];
+}