Searchbar

src/actions/search.js

@@ -0,0 +1,22 @@
+import { TOGGLE_SEARCHBAR, SEARCH_PRODUCTS, IS_SEARCHING } from './types';
+import axios from 'axios';
+
+export const toggleSearchbar = () => (dispatch) => {
+  dispatch({ type: TOGGLE_SEARCHBAR });
+};
+
+export const searchProducts = (searchInput) => async (dispatch) => {
+  const { data } = await axios.get('http://localhost:5005/data/all');
+
+  const filteredData = data.filter((obj) =>
+    Object.keys(obj).some((key) =>
+      obj[key].toLowerCase().includes(searchInput.toLowerCase())
+    )
+  );
+
+  dispatch({ type: SEARCH_PRODUCTS, payload: filteredData });
+};
+
+export const searchStateToggle = () => (dispatch) => {
+  dispatch({ type: IS_SEARCHING });
+};

src/actions/types.js

@@ -10,3 +10,6 @@ export const AUTH_ERROR = 'AUTH_ERROR';
 export const REGISTER_FAIL = 'REGISTER_FAIL';
 export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
 export const LOGIN_FAIL = 'LOGIN_FAIL';
+export const TOGGLE_SEARCHBAR = 'TOGGLE_SEARCHBAR';
+export const SEARCH_PRODUCTS = 'SEARCH_PRODUCTS';
+export const IS_SEARCHING = 'IS_SEARCHING';

src/components/App.js

@@ -62,6 +62,7 @@ class App extends React.Component {
   render() {
     // Grab counter from redux state
     // const counter = useSelector(state => state.isLogged);
+    const { isSearching, searchResults } = this.props;
     return (
       <React.Fragment>
         {/* <h1>{this.counter}</h1>
@@ -70,18 +71,29 @@ class App extends React.Component {
         <Header />
 
         <div style={testingGridStyle}>
-          {this.state.data.map((info) => (
-            <MerchThumbnail key={info.id} dataMap={info} />
-          ))}
+          {isSearching && searchResults.length === 0 && <p>No matches!</p>}
+
+          {isSearching
+            ? searchResults.map((info) => (
+                <MerchThumbnail key={info.id} dataMap={info} />
+              ))
+            : this.state.data.map((info) => (
+                <MerchThumbnail key={info.id} dataMap={info} />
+              ))}
         </div>
         <Footer />
       </React.Fragment>
     );
   }
 }
 
+const mapStateToProps = (state) => ({
+  isSearching: state.searchProducts.isSearching,
+  searchResults: state.searchProducts.searchResults,
+});
+
 const mapDispatchToProps = {
   loadUser,
 };
 
-export default connect(null, mapDispatchToProps)(App);
+export default connect(mapStateToProps, mapDispatchToProps)(App);

src/components/NavbarUserUtils/navbarUserUtils.component.jsx

@@ -3,43 +3,78 @@ import React from 'react';
 import './navbarUserUtils.styles.css';
 
 //icons
-import searchIcon from '../../assets/search-icon.svg';
 import cartIcon from '../../assets/cart.svg';
 
+//components
 import LoginModal from '../LoginModal/LoginModal';
+import SearchBar from '../SearchBar/searchBar.component';
+
+//redux
 import { connect } from 'react-redux';
 import { toggleModal } from '../../actions/modalDisplay';
 import { signOutUser } from '../../actions/isLogged';
 
-const NavbarUserUtils = ({ toggleModal, authorized, signOutUser }) => {
-  return (
-    <div className="navbar-user-utils">
-      <LoginModal />
-      <img
-        className="navbar-user-utils-icon"
-        src={searchIcon}
-        alt="search icon"
-      />
-      {authorized === false ? (
-        <p className="navbar-user-utils-icon" onClick={toggleModal}>
-          Log In
-        </p>
-      ) : (
-        <p className="navbar-user-utils-icon" onClick={signOutUser}>
-          Log out
-        </p>
-      )}
-      <img className="navbar-user-utils-icon" src={cartIcon} alt="cart icon " />
-    </div>
-  );
-};
+class NavbarUserUtils extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchInput: '',
+    };
+  }
+
+  onChange = (event) => {
+    const { name, value } = event.target;
+    this.setState({ [name]: value });
+  };
+
+  onSubmit = (event) => {
+    event.preventDefault();
+    const { searchInput } = this.state;
+    const { searchProducts, searchStateToggle } = this.props;
+    searchProducts(searchInput);
+    searchStateToggle();
+  };
+
+  initSearch = (event) => {
+    const { toggleSearchbar } = this.props;
+    this.onSubmit(event);
+    toggleSearchbar();
+  };
+
+  render() {
+    const { toggleModal, authorized, signOutUser } = this.props;
+
+    return (
+      <div className="navbar-user-utils">
+        <LoginModal />
+        <SearchBar />
+
+        {authorized === false ? (
+          <p className="navbar-user-utils-icon" onClick={toggleModal}>
+            Log In
+          </p>
+        ) : (
+          <p className="navbar-user-utils-icon" onClick={signOutUser}>
+            Log out
+          </p>
+        )}
+        <img
+          className="navbar-user-utils-icon"
+          src={cartIcon}
+          alt="cart icon "
+        />
+      </div>
+    );
+  }
+}
 
 const mapStateToProps = (state) => {
   return {
     authorized: state.isLogged.authorized,
   };
 };
 
-export default connect(mapStateToProps, { toggleModal, signOutUser })(
-  NavbarUserUtils
-);
+export default connect(mapStateToProps, {
+  toggleModal,
+  signOutUser,
+})(NavbarUserUtils);

src/components/NavbarUserUtils/navbarUserUtils.styles.css

@@ -1,7 +1,7 @@
 .navbar-user-utils-icon {
   margin: 0;
   display: inline;
-  padding: 10px;
+  padding: 20px;
 }
 
 .navbar-user-utils-icon:hover {
@@ -11,5 +11,7 @@
 
 .navbar-user-utils {
   display: flex;
+  flex-direction: row;
   justify-content: flex-end;
+  max-height: 65px;
 }

src/components/SearchBar/searchBar.component.jsx

@@ -0,0 +1,97 @@
+import React, { Fragment } from 'react';
+
+import './searchBar.styles.css';
+
+//icons
+import searchIcon from '../../assets/search-icon.svg';
+
+import { connect } from 'react-redux';
+import {
+  toggleSearchbar,
+  searchProducts,
+  searchStateToggle,
+} from '../../actions/search';
+
+class SearchBar extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchInput: '',
+    };
+  }
+
+  onChange = (event) => {
+    const { name, value } = event.target;
+    this.setState({ [name]: value });
+  };
+
+  onSubmit = (event) => {
+    event.preventDefault();
+    const { searchInput } = this.state;
+    const { searchProducts, searchStateToggle } = this.props;
+    searchProducts(searchInput);
+    searchStateToggle();
+  };
+
+  initSearch = (event) => {
+    const { toggleSearchbar } = this.props;
+    this.onSubmit(event);
+    toggleSearchbar();
+  };
+
+  render() {
+    const { toggleSearchbar, displaySearchbar } = this.props;
+    const { searchInput } = this.state;
+    return (
+      <div className="navbar-user-utils">
+        {displaySearchbar ? (
+          <Fragment>
+            <form className="searchForm" onSubmit={this.onSubmit}>
+              <div className="selectContainer">
+                <select className="searchSelector">
+                  <option value="All">All</option>
+                  <option value="placeholder">placeholder</option>
+                  <option value="placeholder">placeholder</option>
+                </select>
+              </div>
+              <input
+                className="searchInput"
+                name="searchInput"
+                value={searchInput}
+                onChange={this.onChange}
+              />
+              <input type="submit" className="submit" />
+            </form>
+            <div className="graySearch">
+              <img
+                className="navbar-user-utils-icon searchIcon"
+                src={searchIcon}
+                alt="search icon"
+                onClick={this.initSearch}
+              />
+            </div>
+          </Fragment>
+        ) : (
+          <img
+            className="navbar-user-utils-icon"
+            src={searchIcon}
+            alt="search icon"
+            onClick={toggleSearchbar}
+          />
+        )}
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    displaySearchbar: state.searchProducts.displaySearchbar,
+  };
+};
+
+export default connect(mapStateToProps, {
+  toggleSearchbar,
+  searchProducts,
+  searchStateToggle,
+})(SearchBar);

src/components/SearchBar/searchBar.styles.css

@@ -0,0 +1,65 @@
+.navbar-user-utils-icon {
+  margin: 0;
+  display: inline;
+  padding: 20px;
+}
+
+.navbar-user-utils {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  max-height: 65px;
+}
+
+.searchForm {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  max-width: 400px;
+}
+
+.searchSelector {
+  background-color: #b7b7b7;
+  border-radius: 12px 0px 0px 12px;
+  height: 43px;
+  width: auto;
+  font-size: 1rem;
+  text-align: center;
+  color: #707070;
+  border: 0px;
+  padding-right: 5px;
+
+  /* arrow */
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background-image: linear-gradient(45deg, transparent 50%, gray 50%),
+    linear-gradient(135deg, gray 50%, transparent 50%),
+    linear-gradient(to right, #ccc, #ccc);
+  background-position: calc(100% - 20px) calc(1em + 2px),
+    calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
+  background-size: 5px 5px, 5px 5px, 0px 1.5em;
+  background-repeat: no-repeat;
+}
+
+.searchInput {
+  width: 300px;
+  height: 40px;
+  border: 0px;
+}
+
+.graySearch {
+  background-color: #b7b7b7;
+  max-height: 100%;
+  height: 43px;
+  border-radius: 0px 12px 12px 0px;
+  transform: translateY(10px);
+}
+
+.searchIcon {
+  padding: 10px 20px 20px 10px;
+}
+
+.submit {
+  display: none;
+}

src/reducers/index.js

@@ -1,12 +1,14 @@
 import counterReducer from './Counter';
 import loggedReducer from './isLogged';
 import modalReducer from './modalDisplay';
+import productSearchReducer from './searchProducts';
 import { combineReducers } from 'redux';
 
 const allReducers = combineReducers({
   counter: counterReducer,
   isLogged: loggedReducer,
   modalDisplay: modalReducer,
+  searchProducts: productSearchReducer,
 });
 
 export default allReducers;