add search

Author: DEVfancybear

src/actions/index.js

@@ -23,3 +23,14 @@ export const fetchDataToFilter = name => {
     });
   };
 };
+export const search = keyword => {
+  return async dispatch => {
+    const resp = await axios.get(`${URL_API}?q=${keyword}`);
+    console.log(`${URL_API}?q=${keyword}`)
+    const data = await resp.data;
+    dispatch({
+      type: types.SEARCH,
+      payload: data
+    });
+  };
+};

src/components/ShopSideBar.js

@@ -1,8 +1,14 @@
 import React, { Component } from "react";
-import { Form } from "react-bootstrap";
+import { Form, InputGroup, FormControl, Button } from "react-bootstrap";
 import { connect } from "react-redux";
-import { fetchDataToFilter, fetchDataToServer } from "../actions/index";
+import { fetchDataToFilter, fetchDataToServer, search } from "../actions/index";
 class ShopSideBar extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      keyword: ""
+    };
+  }
   filterByName = event => {
     const filter = event.target.value;
     let name = "";
@@ -22,6 +28,15 @@ class ShopSideBar extends Component {
     }
     this.props.fetchDataToFilter(name);
   };
+  onChange = e => {
+    this.setState({
+      keyword: e.target.value
+    });
+  };
+  onSearch = e => {
+    e.preventDefault();
+    this.props.search(this.state.keyword);
+  };
   render() {
     return (
       <div>
@@ -65,123 +80,23 @@ class ShopSideBar extends Component {
             </li>
           </ul>
 
-          <h4 className="m-text14 p-b-32">Filters</h4>
-          <div className="filter-price p-t-22 p-b-50 bo3">
-            <div className="m-text15 p-b-17">Price</div>
-            <div className="wra-filter-bar">
-              <div id="filter-bar" />
-            </div>
-            <div className="flex-sb-m flex-w p-t-16">
-              <div className="w-size11">
-                <button className="flex-c-m size4 bg7 bo-rad-15 hov1 s-text14 trans-0-4">
-                  Filter
-                </button>
-              </div>
-              <div className="s-text3 p-t-10 p-b-10">
-                Range: $<span id="value-lower">610</span> - $
-                <span id="value-upper">980</span>
-              </div>
-            </div>
-          </div>
-          <div className="filter-color p-t-22 p-b-50 bo3">
-            <div className="m-text15 p-b-12">Color</div>
-            <ul className="flex-w">
-              <li className="m-r-10">
-                <input
-                  className="checkbox-color-filter"
-                  id="color-filter1"
-                  type="checkbox"
-                  name="color-filter1"
-                />
-                <label
-                  className="color-filter color-filter1"
-                  htmlFor="color-filter1"
-                />
-              </li>
-              <li className="m-r-10">
-                <input
-                  className="checkbox-color-filter"
-                  id="color-filter2"
-                  type="checkbox"
-                  name="color-filter2"
-                />
-                <label
-                  className="color-filter color-filter2"
-                  htmlFor="color-filter2"
-                />
-              </li>
-              <li className="m-r-10">
-                <input
-                  className="checkbox-color-filter"
-                  id="color-filter3"
-                  type="checkbox"
-                  name="color-filter3"
-                />
-                <label
-                  className="color-filter color-filter3"
-                  htmlFor="color-filter3"
-                />
-              </li>
-              <li className="m-r-10">
-                <input
-                  className="checkbox-color-filter"
-                  id="color-filter4"
-                  type="checkbox"
-                  name="color-filter4"
-                />
-                <label
-                  className="color-filter color-filter4"
-                  htmlFor="color-filter4"
-                />
-              </li>
-              <li className="m-r-10">
-                <input
-                  className="checkbox-color-filter"
-                  id="color-filter5"
-                  type="checkbox"
-                  name="color-filter5"
-                />
-                <label
-                  className="color-filter color-filter5"
-                  htmlFor="color-filter5"
-                />
-              </li>
-              <li className="m-r-10">
-                <input
-                  className="checkbox-color-filter"
-                  id="color-filter6"
-                  type="checkbox"
-                  name="color-filter6"
-                />
-                <label
-                  className="color-filter color-filter6"
-                  htmlFor="color-filter6"
-                />
-              </li>
-              <li className="m-r-10">
-                <input
-                  className="checkbox-color-filter"
-                  id="color-filter7"
-                  type="checkbox"
-                  name="color-filter7"
-                />
-                <label
-                  className="color-filter color-filter7"
-                  htmlFor="color-filter7"
-                />
-              </li>
-            </ul>
-          </div>
-          <div className="search-product pos-relative bo4 of-hidden">
-            <input
-              className="s-text7 size6 p-l-23 p-r-50"
-              type="text"
-              name="search-product"
-              placeholder="Search Products..."
-            />
-            <button className="flex-c-m size5 ab-r-m color2 color0-hov trans-0-4">
-              <i className="fs-12 fa fa-search" aria-hidden="true" />
-            </button>
+          <h4 className="m-text14 p-b-32">Search</h4>
+          <div className="filter-price p-t-22 p-b-50">
+            <InputGroup className="mb-3">
+              <FormControl
+                placeholder="Search"
+                aria-label="Search"
+                aria-describedby="basic-addon2"
+                name="keyword"
+                value={this.state.keyword}
+                onChange={e => this.onChange(e)}
+              />
+              <InputGroup.Append>
+                <Button variant="outline-secondary" onClick={this.onSearch}>
+                  Search
+                </Button>
+              </InputGroup.Append>
+            </InputGroup>
           </div>
         </div>
       </div>
@@ -195,6 +110,9 @@ const mapDispatchToProps = (dispatch, props) => {
     },
     fetchDataToServer: () => {
       dispatch(fetchDataToServer());
+    },
+    search: keyword => {
+      dispatch(search(keyword));
     }
   };
 };

src/constants/ActionTypes.js

@@ -2,3 +2,5 @@
 export const FETCH_DATA_TO_SERVER = "FETCH_DATA_TO_SERVER";
 //get data and filter
 export const FETCH_DATA_IN_FILTER = "FETCH_DATA_IN_FILTER";
+// get data and search
+export const SEARCH = "SEARCH";

src/reducers/rootReducer.js

@@ -16,6 +16,12 @@ export default (state = initialState, action) => {
         products: action.payload
       };
     }
+    case types.SEARCH: {
+      return {
+        ...state,
+        products: action.payload
+      };
+    }
     default:
       return state;
   }