[AFP-12] Work on Search Component

src/actions/apiRequests.js

@@ -5,4 +5,14 @@ export const getAllProducts = async data => {
     const res = await axios.get(`${Config.inventoryUrl}`);
     // console.log(res.data);
     return res.data;
+}
+
+export const getFilteredProducts = async (searchTerm) => {
+    const res = await axios.get(`${Config.inventoryUrl}`);
+    return res.data.filter(product => {
+        const productName = product.name.toLowerCase();
+        console.log("Search Term: " + searchTerm);
+        console.log("Found Product Name: " + productName.includes(searchTerm));
+        return productName.includes(searchTerm);
+    });
 }
\ No newline at end of file

src/component/Header.jsx

 import React, { useState } from "react";
 import { Link } from "react-router-dom";
+import Search from "./Search";
 
 const Header = () => {
   const [show, setShow] = useState(false);
@@ -38,16 +39,7 @@ const Header = () => {
               </Link>
             </li>
           </ul>
-          <form className="d-flex">
-            <input
-              type="search"
-              className="form-control me-2"
-              placeholder="search"
-            />
-            <button className="btn btn-light" type="submit">
-              GO
-            </button>
-          </form>
+        <Search />
         </div>
       </div>
     </nav>

src/component/Main.jsx

@@ -3,6 +3,7 @@ import { Redirect, Switch } from "react-router";
 import AuthRoute from "./AuthRoute";
 import ProductForm from "./ProductForm";
 import ProductGrid from "./ProductGrid";
+import SearchResults from "./SearchResults";
 import {getAllProducts} from "../actions/apiRequests.js"
 
 export default function Main() {
@@ -20,6 +21,7 @@ export default function Main() {
   return (
     <div>
       <Switch>
+      <AuthRoute path="/searchResults"><SearchResults /></AuthRoute>
         <AuthRoute exact path="/products/new">
           <ProductForm />
         </AuthRoute>

src/component/Search.jsx

+import React from 'react';
+import { Redirect, withRouter } from "react-router-dom";
+import { getFilteredProducts } from '../actions/apiRequests';
+
+class Search extends React.Component {
+    constructor(props){
+        super(props);
+        this.state = {
+            searchTerm: '',
+            results: []
+        };
+
+        this.submit = this.submit.bind(this);
+        this.changeTerm = this.changeTerm.bind(this);
+    }
+
+    changeTerm(event) {
+        this.setState({searchTerm: event.target.value});
+    }
+
+    async submit(event){
+        console.log(this.state.searchTerm);
+        const data = await getFilteredProducts(this.state.searchTerm)
+            .then(res => {
+                this.setState({result: res.data}, () => {
+                    this.props.history.push("/searchResults");
+                });
+            })
+            .catch(err => console.log(err));
+    }
+
+    //Need to search by name or SKU
+    render(){
+        return (
+            <div>
+                <form className="d-flex" onSubmit={this.submit}>
+                    <input
+                    type="search"
+                    className="form-control me-2"
+                    placeholder="Search for item..."
+                    onChange={this.changeTerm}
+                    />
+                    <button className="btn btn-light" type="submit">
+                        GO
+                    </button>
+                </form>
+                {/* {
+                    <Redirect to={{
+                    pathname: '/searchResults',
+                    state: {results: this.state.results}
+                }} />
+                } */}
+            </div>
+          );
+    }
+}
+
+export default withRouter(Search);
\ No newline at end of file

src/component/SearchResults.jsx

+import React from "react";
+import Product from "./Product.jsx";
+import { Col, Container, Row } from "react-bootstrap";
+import "./../styles/ProductGrid.css";
+export default class SearchResults extends React.Component{
+
+    constructor(props){
+        super(props);
+        this.state = {
+            results: []
+        }
+    }
+
+    render(){
+        return (
+            <div>
+              <h1 id="title" className="text-center" >Search Results</h1>
+              <Container id="prod-grid" className="mt-3">
+                <Row xs={1} sm={2} md={3} lg={4}>
+                  {this.state.results.map((product) => {
+                    return (
+                      <Col key={product.sku}>
+                        <Product product={product} />
+                      </Col>
+                    );
+                  })}
+                </Row>
+              </Container>
+            </div>
+          );
+    }
+
+}
\ No newline at end of file