[AFP-12] Finish work on search item functionality

src/actions/apiRequests.js

@@ -3,16 +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) => {
+export const getFilteredProducts = async (searchTerm, searchBy) => {
     const res = await axios.get(`${Config.inventoryUrl}`);
     return res.data.filter(product => {
-        const productName = product.productName.toLowerCase();
-        console.log("Search Term: " + searchTerm);
-        console.log("Found Product Name: " + productName.includes(searchTerm.toLowerCase()));
-        return productName.includes(searchTerm.toLowerCase());
+        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/Main.jsx

@@ -22,7 +22,6 @@ export default function Main() {
   return (
     <div>
       <Switch>
-      <AuthRoute path="/searchResults" component={SearchResults}/>
         <AuthRoute exact path="/products/new">
           <ProductForm method="POST" />
         </AuthRoute>
@@ -39,6 +38,7 @@ export default function Main() {
         <AuthRoute exact path="/">
           <Redirect to="/products" />
         </AuthRoute>
+        <AuthRoute path="/searchResults" component={SearchResults}/>
         <AuthRoute>404 PAGE</AuthRoute>
       </Switch>
     </div>

src/component/Search.jsx

 import React from 'react';
-import { withRouter, Redirect } from "react-router-dom";
+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: '',
-            results: []
+            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)
+        const data = await getFilteredProducts(this.state.searchTerm, this.state.searchBy)
             .then(res => {
                 this.setState({results: res});
             })
@@ -39,11 +48,19 @@ class Search extends React.Component {
                     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>
-                    <Redirect to={{
+                    <Link to={{
                     pathname: '/searchResults',
                     state: {results: this.state.results}
                 }} />

src/component/SearchResults.jsx

@@ -17,13 +17,17 @@ export default class SearchResults extends React.Component{
               <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) => {
+                  {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>

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