second requirement

.gitignore

@@ -0,0 +1 @@
+node_modules

src/App.js

@@ -1,6 +1,6 @@
 import "./App.css";
 import Home from "./Home";
-import { Route, NavLink, HashRouter } from "react-router-dom";
+import { Route, HashRouter } from "react-router-dom";
 import PokeDex from "./PokeDex";
 
 function App() {

src/Home.js

@@ -1,29 +1,53 @@
 import "./App.css";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { NavLink } from "react-router-dom";
+import { useHistory } from "react-router-dom";
 
 function Home() {
   const [text, setText] = useState("");
   const [isReady, setIsReady] = useState(false);
+  const history = useHistory();
+
+  const handleChange = (e) => {
+    setText(e.target.value);
+    validate();
+  }
+
+  const validate = () => {
+    const msg = text + '!'
+    if (msg !== "Ready!") {
+      setIsReady(false);
+    } else {
+      setIsReady(true)
+      setText("");
+    }
+  }
+
+  const redirect = () => {
+    history.push('/pokedex');
+  }
 
   return (
     <div className="App">
       <header className="App-header">
-        <img
-          hidden={!isReady}
-          src="https://www.freeiconspng.com/uploads/file-pokeball-png-0.png"
-          className="App-logo"
-          alt="logo"
-          style={{ padding: "10px" }}
-        />
+        <NavLink to="/pokedex">
+          <img
+            hidden={!isReady}
+            src="https://www.freeiconspng.com/uploads/file-pokeball-png-0.png"
+            className="App-logo"
+            alt="logo"
+            style={{ padding: "10px", cursor: "pointer" }}
+            onClick={redirect}
+          />
+        </NavLink>
         <b>
           Requirement: Try to show the hidden image and make it clickable that
           goes to /pokedex when the input below is "Ready!" remember to hide the
           red text away when "Ready!" is in the textbox.
         </b>
         <p>Are you ready to be a pokemon master?</p>
-        <input type="text" name="name" />
-        <span style={{ color: "red" }}>I am not ready yet!</span>
+        <input type="text" name="name" value={text} onChange={handleChange} />
+        {!isReady && <span style={{ color: "red" }}>I am not ready yet!</span>}
       </header>
     </div>
   );

src/PokeDex.js

@@ -3,11 +3,17 @@ import { useState, useEffect } from "react";
 import ReactLoading from "react-loading";
 import axios from "axios";
 import Modal from "react-modal";
+import { NavLink } from "react-router-dom";
 
 function PokeDex() {
   const [pokemons, setPokemons] = useState([]);
   const [pokemonDetail, setPokemonDetail] = useState(null);
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [search, setSearch] = useState('');
+  const [currentPageUrl, setCurrentPageUrl] = useState(`https://pokeapi.co/api/v2/pokemon`);
+  const [nextPageUrl, setNextPageUrl] = useState();
+  const [prevPageUrl, setPrevPageUrl] = useState();
+  const [sortType, setSortType] = useState([]);
 
   const customStyles = {
     content: {
@@ -23,6 +29,39 @@ function PokeDex() {
     overlay: { backgroundColor: "grey" },
   };
 
+  useEffect(() => {
+    axios.get(currentPageUrl)
+      .then(response => {
+
+        if (sortType === 'name') {
+          const sorted = response.data.results.sort((a, b) => a.name.localeCompare(b.name));
+          setPokemons(sorted);
+          setIsLoading(false);
+        } else {
+          setIsLoading(false);
+          setPokemons(response.data.results);
+          setNextPageUrl(response.data.next);
+          setPrevPageUrl(response.data.previous);
+        }
+      })
+      .catch(error => {
+        console.log(error);
+      })
+  }, [currentPageUrl, sortType])
+
+  const handleSearch = (event) => {
+    let { value } = event.target;
+    setSearch(value);
+  }
+
+  function goToNextPage() {
+    setCurrentPageUrl(nextPageUrl);
+  }
+
+  function goToPrevPage() {
+    setCurrentPageUrl(prevPageUrl);
+  }
+
   if (!isLoading && pokemons.length === 0) {
     return (
       <div>
@@ -56,14 +95,44 @@ function PokeDex() {
           <>
             <div className="App">
               <header className="App-header">
-                <b>Implement loader here</b>
+                <b><ReactLoading /></b>
               </header>
             </div>
           </>
         ) : (
           <>
-            <h1>Welcome to pokedex !</h1>
-            <b>Implement Pokedex list here</b>
+            <div className="container">
+              <h1>Welcome to pokedex !</h1>
+              <div className="search_filter">
+                <input
+                  type="text"
+                  value={search}
+                  placeholder="search...."
+                  onChange={handleSearch}
+                  className="search_bar" />
+                <select value={pokemons.name} onChange={(e) => setSortType(e.target.value)}>
+                  <option value="default">default</option>
+                  <option value="name">By Name (A-Z)</option>
+                </select>
+              </div>
+              {pokemons.length > 0 && <div>
+                {
+                  pokemons.filter(item => item.name.toLowerCase().includes(search.toLowerCase()))
+                    .map((item, index) => {
+                      return <div key={index} className="card" onClick={() => setPokemonDetail(item)}>
+                        <NavLink to={`/pokedex/${item.name}`} style={{ textDecoration: "none" }}>
+                          <img src={item.sprites} alt='' width="500" height="300" />
+                          <h6>{item.name}</h6>
+                        </NavLink>
+                      </div>
+                    })
+                }</div>
+              }
+              <div className="pagination_button">
+                <button type="btn" onClick={goToPrevPage}>Previous</button>
+                <button type="btn" onClick={goToNextPage}>next</button>
+              </div>
+            </div>
           </>
         )}
       </header>
@@ -88,6 +157,14 @@ function PokeDex() {
               <li>Create a  buttton to download the information generated in this modal as pdf. (images and chart must be included)</li>
             </ul>
           </div>
+          <div className="pokemon_detail_container">
+            <div>
+              <img src={pokemonDetail} alt='' width="500" height="300"/>
+            </div>
+            <div>
+
+            </div>
+          </div>
         </Modal>
       )}
     </div>

src/index.css

@@ -11,3 +11,73 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+.container {
+  display: block;
+}
+
+.card {
+  margin: 20px;
+  padding: 10px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  box-shadow: 5px 5px 5px #888888;
+  background-color: #fff;
+  display: flex;
+}
+
+.card:hover {
+  background-color: yellow;
+}
+
+.card h6 {
+  color: #000000;
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.search_filter {
+  width: 145%;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.search_filter select{
+  border-radius: 5px;
+  height: 20px;
+  width: 16%;
+  background-color: #ff9999;
+}
+
+.search_bar {
+  width: 50%;
+  padding: 7px;
+  font-size: 1.2rem;
+  color: black;
+  box-sizing: border-box;
+  outline: none;
+  border-radius: 8px;
+  font-weight: 400;
+}
+
+.pagination_button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.pagination_button button {
+  cursor: pointer;
+  background-color: #80c080;
+  border-radius: 8px;
+  height: 20px;
+}
+
+.pagination_button button:hover {
+  background-color: #c6f2e6;
+}
+
+.pokemon_detail_container img {
+  background-color: #fff;
+}