fetch with filters

src/App.js

@@ -12,15 +12,16 @@ import WithAdminAuth from "./hoc/withAdmin";
 // layouts
 import MainLayout from "./layouts/MainLayout";
 import HomepageLayout from "./layouts/HomepageLayout";
-import AdminLayout from './layouts/AdminLayout'
-import DashboardLayout from './layouts/DashboardLayout'
+import AdminLayout from "./layouts/AdminLayout";
+import DashboardLayout from "./layouts/DashboardLayout";
 // pages
 import Homepage from "./pages/Homepage";
 import Registration from "./pages/Registration";
 import Login from "./pages/Login";
 import Recovery from "./pages/Recovery";
 import Dashboard from "./pages/Dashboard";
 import Admin from "./pages/Admin";
+import Search from "./pages/Search";
 
 const App = () => {
   const dispatch = useDispatch();
@@ -41,6 +42,23 @@ const App = () => {
             </HomepageLayout>
           )}
         />
+        <Route
+          exact
+          path="/search"
+          render={() => (
+            <MainLayout>
+              <Search />
+            </MainLayout>
+          )}
+        />
+        <Route
+          path="/search/:filterType"
+          render={() => (
+            <MainLayout>
+              <Search />
+            </MainLayout>
+          )}
+        />
         <Route
           path="/registration"
           render={() => (
@@ -70,9 +88,7 @@ const App = () => {
           render={() => (
             <WithAuth>
               <DashboardLayout>
-              <MainLayout>
                 <Dashboard />
-              </MainLayout>
               </DashboardLayout>
             </WithAuth>
           )}
@@ -82,9 +98,7 @@ const App = () => {
           render={() => (
             <WithAdminAuth>
               <AdminLayout>
-              <MainLayout>
                 <Admin />
-              </MainLayout>
               </AdminLayout>
             </WithAdminAuth>
           )}

src/components/Header/index.js

@@ -19,6 +19,16 @@ const Header = () => {
             <img src={Logo} alt="random Logo" />
           </Link>
         </div>
+        <nav>
+          <ul>
+            <li>
+              <Link to="/">Home</Link>
+            </li>
+            <li>
+              <Link to="/search">Search</Link>
+            </li>
+          </ul>
+        </nav>
         <div className="callToActions">
           {currentUser && (
             <ul>

src/components/Header/styles.scss

@@ -23,6 +23,40 @@
         margin: 0;
       }
     }
+    nav {
+      display: block;
+      width: 100%;
+      height: 100%;
+      padding: 0;
+      margin: 0;
+
+      ul,
+      ul li {
+        padding: 0;
+        margin: 0;
+        height: 100%;
+      }
+
+      ul {
+        text-align: center;
+
+        li {
+          display: inline-block;
+          margin: 0 1rem;
+          list-style-type: none;
+
+          a {
+            font-size: 1.8rem;
+            line-height: 6.5rem;
+            vertical-align: middle;
+            color: black;
+            text-decoration: none;
+            text-transform: uppercase;
+            cursor: pointer;
+          }
+        }
+      }
+    }
     .callToActions {
       position: absolute;
       top: 50%;

src/components/ProductsResults/Product/index.js

@@ -0,0 +1,34 @@
+import React from "react";
+import Button from "../../forms/Button";
+
+const Product = ({ productThumbnail, productName, productPrice }) => {
+  if (!productThumbnail || !productName || typeof productPrice === "undefined")
+    return null;
+  const configAddToCartBtn = {
+    type: "button",
+  };
+  return (
+    <div className="product">
+      <div className="thumb">
+        <img src={productThumbnail} alt="Product Thumbnail" />
+      </div>
+      <div className="details">
+        <ul>
+          <li>
+            <span className="name">{productName}</span>
+          </li>
+          <li>
+            <span className="price">${productPrice}</span>
+          </li>
+          <li>
+            <div className="addToCart">
+              <Button {...configAddToCartBtn}>Add To Cart</Button>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default Product;

src/components/ProductsResults/index.js

@@ -0,0 +1,72 @@
+import React, { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useHistory, useParams } from "react-router-dom";
+import { fetchProductsStart } from "../../redux/Product/products.action";
+import FormSelect from "../forms/FormSelect";
+import Product from "./Product";
+import "./styles.scss";
+
+const ProductsResults = ({}) => {
+  const dispatch = useDispatch();
+  const history = useHistory();
+  const { filterType } = useParams();
+  const products = useSelector((state) => state.productsData.products);
+
+  useEffect(() => {
+    dispatch(fetchProductsStart({ filterType }));
+  }, [filterType]);
+
+  const handleFilters = (e) => {
+    const pickedFilter = e.target.value;
+    history.push(`/search/${pickedFilter}`);
+  };
+
+  if (!Array.isArray(products)) return null;
+
+  if (products.length < 1) {
+    return (
+      <div className="products">
+        <p>No search results.</p>
+      </div>
+    );
+  }
+  const configFilters = {
+    defaultValue: filterType,
+    options: [
+      {
+        name: "Show all",
+        value: "",
+      },
+      {
+        name: "Mens",
+        value: "mens",
+      },
+      {
+        name: "Womens",
+        value: "womens",
+      },
+    ],
+    handleChange: handleFilters,
+  };
+  return (
+    <div className="products">
+      <h1>Browse Products</h1>
+      <FormSelect {...configFilters} />
+      <div className="productResults">
+        {products.map((product, index) => {
+          const { productThumbnail, productName, productPrice } = product;
+          if (
+            !productThumbnail ||
+            !productName ||
+            typeof productPrice === "undefined"
+          )
+            return null;
+          const configProduct = { productThumbnail, productName, productPrice };
+          return <Product key={index} {...configProduct} />;
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default ProductsResults;

src/components/ProductsResults/styles.scss

@@ -0,0 +1,68 @@
+.products {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin: 2rem 0;
+
+  .productResults {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 3rem -10px 0;
+  }
+}
+
+.product {
+  width: 33.333333333333333%;
+  margin: 0 auto 2rem;
+  padding: 0 10px;
+
+  .thumb {
+    display: block;
+    width: 100%;
+
+    img {
+      display: block;
+      width: 100%;
+      margin: 0;
+    }
+  }
+
+  .details {
+    display: block;
+    width: 100%;
+    padding: 1rem 0;
+    margin: 0 auto;
+
+    ul,
+    ul li {
+      padding: 0;
+      margin: 0;
+    }
+
+    ul {
+      li {
+        display: block;
+        width: 100%;
+        list-style-type: none;
+        text-align: left;
+        margin: 0 0 0.5rem;
+
+        .name {
+          font-size: 2.2rem;
+          line-height: 1.2;
+          font-weight: 400;
+        }
+
+        .price {
+          font-size: 1.6rem;
+          line-height: 1;
+          font-weight: 400;
+        }
+
+        .addToCart {
+          margin: 2rem 0 0 0;
+        }
+      }
+    }
+  }
+}

src/components/UserProfile/styles.scss

@@ -1,31 +1,40 @@
 .userProfile {
-    display: block;
-    width: 100%;
-    margin: 3rem auto 1rem;
+  display: block;
+  width: 100%;
+  margin: 3rem auto 1rem;
 
-    ul, li {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-    }
-    ul {
-        li{
-            display: block;
-            width: 100%;
-            .img{
-                display: block;
-                width: 5.0rem;
-                margin: 0 auto;
-            }
-        }
-        .displayName {
-            display: block;
-            width: 100%;
-            text-align: center;
-            margin: 1rem auto;
-            font-size: 1.8rem;
-            line-height: 1;
-            text-transform: uppercase;
+  ul,
+  li {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+
+  ul {
+    li {
+      display: block;
+      width: 100%;
+
+      .img {
+        display: block;
+        width: 5rem;
+        margin: 0 auto;
+
+        img {
+          display: block;
+          width: 100%;
         }
+      }
+
+      .displayName {
+        display: block;
+        width: 100%;
+        text-align: center;
+        margin: 1rem auto;
+        font-size: 1.8rem;
+        line-height: 1;
+        text-transform: uppercase;
+      }
     }
-}
+  }
+}