Merge branch 'AFP-12' into 'dev'

AFP-12: User can search for an item by name or sku

See merge request !11

src/actions/apiRequests.js

@@ -3,6 +3,20 @@ import axios from 'axios';
 
 export const getAllProducts = async data => {
     const res = await axios.get(`${Config.inventoryUrl}`);
-    // console.log(res.data);
     return res.data;
+}
+
+export const getFilteredProducts = async (searchTerm, searchBy) => {
+    const res = await axios.get(`${Config.inventoryUrl}`);
+    return res.data.filter(product => {
+        let productFiltered;
+
+        if(searchBy === "name"){
+            productFiltered = product.productName.toLowerCase();
+        }else if(searchBy === "sku"){
+            productFiltered = product.sku.toLowerCase();
+        }
+
+        return productFiltered.includes(searchTerm.toLowerCase());
+    });
 }
\ 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,7 +3,8 @@ import { Redirect, Switch } from "react-router";
 import AuthRoute from "./AuthRoute";
 import ProductForm from "./ProductForm";
 import ProductGrid from "./ProductGrid";
-import { getAllProducts } from "../actions/apiRequests.js";
+import SearchResults from "./SearchResults";
+import {getAllProducts} from "../actions/apiRequests.js"
 import PromotionNewFormComponent from "./promotionforms/PromotionNewFormComponent";
 
 export default function Main() {
@@ -37,6 +38,7 @@ export default function Main() {
         <AuthRoute exact path="/">
           <Redirect to="/products" />
         </AuthRoute>
+        <AuthRoute path="/searchResults" component={SearchResults}/>
         <AuthRoute>
           <h1>404 Page Not Found</h1>
         </AuthRoute>

src/component/ProductGrid.jsx

@@ -19,7 +19,7 @@ export default function ProductGrid({ productData }) {
   useEffect(() => fetchProducts(), []);
 
   return (
-    <div class="container flex-column d-flex justify-content-center">
+    <div className="container flex-column d-flex justify-content-center">
       <div className="container mt-3 d-flex justify-content-between align-items-center">
         <h1 id="title" className="text-center">
           Inventory

src/component/Search.jsx

+import React from 'react';
+import { withRouter, Link } from "react-router-dom";
+import { getFilteredProducts } from '../actions/apiRequests';
+import "./../styles/Search.css";
+
+class Search extends React.Component {
+    constructor(props){
+        super(props);
+        this.state = {
+            searchTerm: '',
+            searchBy: 'name',
+            results: [],
+        };
+
+        this.submit = this.submit.bind(this);
+        this.changeTerm = this.changeTerm.bind(this);
+        this.handleRadioButton = this.handleRadioButton.bind(this);
+    }
+
+    changeTerm(event) {
+        this.setState({searchTerm: event.target.value});
+    }
+
+    handleRadioButton(value) {
+        this.setState({
+            searchBy: value
+        });
+      }
+
+    async submit(event){
+        event.preventDefault();
+        const data = await getFilteredProducts(this.state.searchTerm, this.state.searchBy)
+            .then(res => {
+                this.setState({results: res});
+            })
+            .catch(err => console.log(err));
+
+        if(this.props.location.pathname === "/searchResults"){
+            this.props.history.push("/products", this.state);
+        }
+        
+        this.props.history.push("/searchResults", this.state);
+    }
+
+    //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={event => this.changeTerm(event)}
+                    />
+                    <div className="form-check form-check-inline">
+                        <input className="form-check-input" type="radio" name="inlineRadioOptions" checked={this.state.searchBy === "name"} onChange={() => this.handleRadioButton("name")} id="searchByName" value="name" />
+                        <label className="form-check-label" htmlFor="searchByName">Name</label>
+                    </div>
+                    <div className="form-check form-check-inline">
+                        <input className="form-check-input" type="radio" name="inlineRadioOptions" checked={this.state.searchBy === "sku"} onChange={() => this.handleRadioButton("sku")} id="searchBySku" value="sku" />
+                        <label className="form-check-label" htmlFor="searchBySKU">Sku</label>
+                    </div>
+                    <button className="btn btn-light" type="submit">
+                        GO
+                    </button>
+                </form>
+                    <Link 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: this.props.history.location.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.length > 0 ? this.state.results.map((product) => {
+                    return (
+                      <Col key={product.sku}>
+                        <Product product={product} />
+                      </Col>
+                    );
+                  }) :
+                  <Col>
+                    <p>Unable to find any matching products.</p>
+                  </Col>
+                }
+                </Row>
+              </Container>
+            </div>
+          );
+    }
+
+}
\ No newline at end of file

src/styles/Search.css

+.form-check-label{
+    color: rgba(255, 255, 255, 0.55)
+}
+
+.form-check.form-check-inline{
+    margin-top: 0.35rem;
+}
\ No newline at end of file