From a1d2c1aedd97a6dd020c1cb82203ef20ad960fa8 Mon Sep 17 00:00:00 2001
From: dib6596 <cory.harkins@cerecore.net>
Date: Sat, 19 Oct 2019 22:00:37 -0500
Subject: [PATCH] Add search functionality and styling

---
 src/App.css | 28 ++++++++++++++++++++++++++--
 src/App.js  | 50 ++++++++++++++++++++++++++++++++++++++++++--------
 2 files changed, 68 insertions(+), 10 deletions(-)

diff --git a/src/App.css b/src/App.css
index 8a55933..85fce7f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -34,7 +34,31 @@ body: {
   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;
+  }
 }
diff --git a/src/App.js b/src/App.js
index 2056db1..84a4290 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,10 +1,17 @@
-import React, { useState, useEffect } from 'react';
-import { Container, Card, Header, Icon, Pagination } from 'semantic-ui-react';
-import 'semantic-ui-css/semantic.min.css';
-import parse from 'parse-link-header';
-import './App.css';
-import { PetCard } from './components/PetCard';
-import fetchPets from './services/pets';
+import React, { useState, useEffect } from "react";
+import {
+  Container,
+  Card,
+  Header,
+  Icon,
+  Pagination,
+  Input
+} from "semantic-ui-react";
+import "semantic-ui-css/semantic.min.css";
+import parse from "parse-link-header";
+import "./App.css";
+import { PetCard } from "./components/PetCard";
+import fetchPets from "./services/pets";
 
 function App() {
   const LIMIT = 9;
@@ -12,6 +19,7 @@ function App() {
   const [pets, setPets] = useState([]);
   const [page, setPage] = useState(1);
   const [totalPages, setTotalPages] = useState(1);
+  const [searchText, setSearchText] = useState("");
 
   useEffect(() => {
     async function fetchData() {
@@ -30,6 +38,18 @@ function App() {
     setPage(data.activePage);
   };
 
+  const findPetBy = (pet, _search) =>
+    pet.toLowerCase().includes(_search.toLowerCase());
+
+  const searchPets =
+    pets &&
+    pets.filter(
+      pet =>
+        findPetBy(pet.name, searchText) ||
+        findPetBy(pet.owner, searchText) ||
+        findPetBy(pet.type, searchText)
+    );
+
   return (
     <div className="App">
       <header className="App-header">
@@ -38,9 +58,23 @@ function App() {
           <Header.Content>DeveloPets</Header.Content>
         </Header>
       </header>
+      <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>
+          <Card.Group className="centered" stackable>
+            {searchPets.map(pet => PetCard(pet))}
+          </Card.Group>
         </Container>
       </div>
       <div className="App-pagination">