Finishing search pet feature

src/App.css

@@ -1,69 +1,94 @@
 body {
-  background-color: #e0e9f9;
+    background-color: #e0e9f9;
 }
 
 .App {
-  text-align: center;
+    text-align: center;
 }
 
 .App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+    animation: App-logo-spin infinite 20s linear;
+    height: 80px;
 }
 
 .App-header {
-  display: flex;
-  justify-content: center;
-  height: 160px;
-  padding: 20px;
-  width: 100%;
-  background-color: #1fc8db;
-  background-image: linear-gradient(141deg, #9fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
+    display: flex;
+    justify-content: center;
+    height: 160px;
+    padding: 20px;
+    width: 100%;
+    background-color: #1fc8db;
+    background-image: linear-gradient(141deg, #9fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
 }
 
 .App-header__group {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  width: 20em;
-  color: #fbfafa;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    width: 20em;
+    color: #fbfafa;
 }
 
 .App-header__group-intro {
-  text-align: center;
-  font-size: 1.2em;
+    text-align: center;
+    font-size: 1.2em;
 }
 
 .App-title {
-  font-size: 3em;
-  align-self: center;
-  letter-spacing: 4px;
-  font-weight: 900;
+    font-size: 3em;
+    align-self: center;
+    letter-spacing: 4px;
+    font-weight: 900;
 }
 
 .App__icons {
-  display: block;
-  width: 5em;
-  color: #fbfafa;
+    display: block;
+    width: 5em;
+    color: #fbfafa;
 }
 
 .App__icons--big {
-  padding-left: 1em;
+    padding-left: 1em;
 }
 
 .App-intro {
-  font-size: large;
+    font-size: large;
 }
 
 .App-content {
-  padding: 20px;
+    padding: 20px;
 }
 
 .App-pagination {
-  padding: 10px;
+    padding: 10px;
+}
+
+.App-search {
+    padding: 10px 15px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.App-search > h3 > div:first-child {
+    margin: 5px 15px 0 0;
 }
 
 @keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@media screen and (min-width: 500px) {
+    .App-search {
+        flex-direction: row;
+    }
+
+    .App-search-input {
+        width: 300px;
+    }
 }

src/App.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { usePage } from './hooks/use-page';
-import { Card, Container, Pagination } from 'semantic-ui-react';
+import { Card, Container, Header, Input, Pagination } from 'semantic-ui-react';
 import 'semantic-ui-css/semantic.min.css';
 import parse from 'parse-link-header';
 import './App.css';
@@ -10,33 +10,55 @@ import fetchPets from './services/pets';
 import { cacheRequest } from './_sessionStorage';
 import { PETS } from './constants';
 import { HashLoader } from "react-spinners";
+import "semantic-ui-css/semantic.min.css";
+import "./App.css";
 
 function App() {
   const LIMIT = 9;
 
   const [pets, setPets] = useState([]);
   const [page, setPage] = usePage();
+  const [allPets, setAllPets] = useState([]);
   const [totalPages, setTotalPages] = useState(1);
   const [loading, setLoading] = useState(true);
+  const [searchText, setSearchText] = useState("");
 
   useEffect(() => {
     async function fetchData() {
       const config = {
         params: { _page: page, _limit: LIMIT }
       };
       const result = await cacheRequest(PETS, config.params._page, fetchPets(config));
+      const axiosResponse = await fetchPets();
+      setAllPets(axiosResponse.data);
       const parsedLink = parse(result.headers.link);
       setTotalPages(parsedLink.last._page);
       setPets(result.data);
     }
 
-    fetchData().then(() => setLoading(false));
-  }, [page]);
+    if (searchText.length === 0) {
+      fetchData().then(() => setLoading(false));
+    } else {
+      const searchPets =
+                allPets &&
+                allPets.filter(
+                  pet =>
+                    findPetBy(pet.name, searchText) ||
+                        findPetBy(pet.owner, searchText) ||
+                        findPetBy(pet.type, searchText)
+                );
+      setPets(searchPets);
+    }
+  }, [page, searchText]);
 
   const onPageChange = (event, data) => {
     setPage(data.activePage);
   };
 
+  const findPetBy = (pet, _search) =>
+    pet.toLowerCase().includes(_search.toLowerCase());
+
+
   return (
     <div className="App">
       <PetHeader/>
@@ -51,6 +73,18 @@ function App() {
           size={500}
         /> :
           <div>
+            <div className="App-search">
+              <Header as="h3">
+                <Header.Content>Looking for a specific pet?</Header.Content>
+              </Header>
+              <Input
+                className="App-search-input"
+                icon="search"
+                placeholder="Search by name, owner, or species..."
+                type="text"
+                onChange={e => setSearchText(e.target.value)}
+              />
+            </div>
             <div className="App-content">
               <Container>
                 <Card.Group className="centered" stackable>{pets.map(pet => PetCard(pet))}</Card.Group>