developer-job-simulation · ilyuka · May 1, 2024 · May 1, 2024 · May 1, 2024 · May 1, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,17 +10,20 @@
   "dependencies": {
     "@headlessui/react": "^1.6.0",
     "@heroicons/react": "^1.0.6",
+    "@tailwindcss/aspect-ratio": "^0.4.0",
     "@tailwindcss/forms": "^0.5.0",
     "@types/react": "^17.0.13",
     "@types/react-dom": "^17.0.8",
     "@vitejs/plugin-react-refresh": "^1.3.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "vite": "^2.3.8",
-    "@tailwindcss/aspect-ratio": "^0.4.0",
     "autoprefixer": "^10.4.5",
     "json-server": "^0.17.0",
     "postcss": "^8.4.12",
-    "tailwindcss": "^3.0.24"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "tailwindcss": "^3.0.24",
+    "vite": "^2.3.8"
+  },
+  "devDependencies": {
+    "eslint": "^9.1.1"
   }
 }
diff --git a/src/Components/Cart.jsx b/src/Components/Cart.jsx
@@ -1,15 +1,17 @@
 import { Dialog, Transition } from "@headlessui/react";
 import { XIcon } from "@heroicons/react/outline";
 import React, { Fragment } from "react";
+import ShoppingCart from "./svg/ShoppingCart";
 
 export default function Cart({ open, setOpen, cart, updateCart }) {
+  console.log(cart);
   return (
     <Transition.Root show={open} as={Fragment}>
       <Dialog
         as="div"
         className="fixed inset-0 overflow-hidden z-10"
         onClose={() => {
-          setOpen;
+          setOpen(false);
         }}
       >
         <div className="absolute inset-0 overflow-hidden">
@@ -52,7 +54,13 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
                       </div>
                     </div>
 
-                    <div className="mt-8">
+                    {cart.length === 0 && <div className="w-full h-full flex items-center justify-center">
+                      <div className="flex flex-col items-center">
+                        <div><ShoppingCart className={"w-12"}/></div>
+                        <div className="pt-2">Your Cart is Empty.</div>
+                      </div>
+                    </div>}
+                    {cart.length > 0 && <div className="mt-8">
                       <div className="flow-root">
                         <ul role="list" className="-my-6 divide-y divide-gray-200">
                           {cart.map((product) => (
@@ -99,13 +107,15 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
                           ))}
                         </ul>
                       </div>
-                    </div>
+                    </div>}
                   </div>
 
                   <div className="border-t border-gray-200 py-6 px-4 sm:px-6">
                     <div className="flex justify-between text-base font-medium text-gray-900">
                       <p>Subtotal</p>
-                      <p>$262.00</p>
+                      <p>${cart.reduce((prev, curr, index, arr) => {
+                        return prev + curr.price;
+                      }, 0)}</p>
                     </div>
                     <p className="mt-0.5 text-sm text-gray-500">Shipping and taxes calculated at checkout.</p>
                     <div className="mt-6">

diff --git a/src/Components/NavBar.jsx b/src/Components/NavBar.jsx
@@ -1,7 +1,7 @@
 import { ShoppingBagIcon } from "@heroicons/react/outline";
 import React from "react";
 
-export default function NavBar({ setOpen }) {
+export default function NavBar({ setOpen, cart }) {
   return (
     <div className="bg-white">
       <header className="relative">
@@ -41,7 +41,7 @@ export default function NavBar({ setOpen }) {
                             className="flex-shrink-0 h-6 w-6 text-gray-400 group-hover:text-gray-500"
                             aria-hidden="true"
                           />
-                          <span className="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">0</span>
+                          <span className="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">{cart.length}</span>
                           <span className="sr-only">items in cart, view bag</span>
                         </button>
                       </div>

diff --git a/src/Components/ProductFilters.jsx b/src/Components/ProductFilters.jsx
@@ -24,7 +24,7 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
                 className="flex-none w-5 h-5 mr-2 text-gray-400 group-hover:text-gray-500"
                 aria-hidden="true"
               />
-              0 Filters
+              {[...(filterOptions.price.concat(filterOptions.color))].filter(x => x.checked).length} Filters
             </Disclosure.Button>
           </div>
           <div className="pl-6">
@@ -49,6 +49,16 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
                       type="checkbox"
                       className="flex-shrink-0 h-4 w-4 border-gray-300 rounded text-black focus:ring-black"
                       defaultChecked={option.checked}
+
+                      //
+                      onChange={(e) => {
+                        setFilterOptions({color: filterOptions.color, price: [...filterOptions.price].map((opt) => {
+                          if (opt.label === option.label) {
+                            opt.checked = !opt.checked;
+                          }
+                          return opt;
+                        })});
+                      }}
                     />
                     <label htmlFor={`price-${optionIdx}`} className="ml-3 min-w-0 flex-1 text-gray-600">
                       {option.label}
@@ -69,6 +79,16 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
                       type="checkbox"
                       className="flex-shrink-0 h-4 w-4 border-gray-300 rounded text-black focus:ring-black"
                       defaultChecked={option.checked}
+
+                      //
+                      onChange={(e) => {
+                        setFilterOptions({price: filterOptions.price, color: [...filterOptions.color].map((opt) => {
+                          if (opt.label === option.label) {
+                            opt.checked = !opt.checked;
+                          }
+                          return opt;
+                        })});
+                      }}
                     />
                     <label htmlFor={`color-${optionIdx}`} className="ml-3 min-w-0 flex-1 text-gray-600">
                       {option.label}
@@ -110,6 +130,14 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
                         <button
                           onClick={() => {
                             // TODO
+                            setSortOptions([...sortOptions].map((opt) => {
+                              if (opt.name === option.name) {
+                                opt.current = !opt.current;
+                              } else {
+                                opt.current = false;
+                              }
+                              return opt;
+                            }))
                           }}
                           className={classNames(
                             option.current ? "font-medium text-gray-900" : "text-gray-500",

diff --git a/src/Components/ProductTable.jsx b/src/Components/ProductTable.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useCallback, memo } from "react";
 import ProductFilters from "./ProductFilters";
 
 const getDefaultFilterOptions = () => {
@@ -27,7 +27,8 @@ const getDefaultSortOptions = () => {
   ];
 };
 
-export default function ProductTable({ cart, updateCart }) {
+const ProductTable = memo(({ cart, updateCart }) => {
+  console.log('rendering');
   let [products, setProducts] = useState([]);
 
   const [filterOptions, setFilterOptions] = useState(getDefaultFilterOptions());
@@ -41,16 +42,55 @@ export default function ProductTable({ cart, updateCart }) {
       setProducts(body);
     };
     fetchProducts();
-  });
+  }, []);
+
+  const sortedProducts = (products, sortOptions) => {
+    const currentOption = sortOptions.find(opt => opt.current === true);
+    if (!currentOption) {
+      return [...products].sort((a,b) => a.id - b.id);
+    }
+    if (currentOption.name === 'Price') {
+      return [...products].sort((a, b) => a.price - b.price);
+    } else if (currentOption.name === "Newest") {
+      return [...products].sort((a,b) => a.releaseDate - b.releaseDate);
+    } else {
+      return [...products].sort((a,b) => a.id - b.id);
+    }
+  };
+
+  const filteredProducts = (products, filterOptions) => {
+    const checkedPrices = filterOptions.price.filter(price => price.checked);
+    const checkedColors = filterOptions.color.filter(color => color.checked);
+    let newProducts = [...products];
+    if (checkedPrices.length) {
+      newProducts = newProducts.filter((prod, index) => {
+        const matchesOneOfPrices = checkedPrices.some((price) => {
+          return price.minValue <= prod.price && price.maxValue >= prod.price
+        });
+        return matchesOneOfPrices;
+      }); 
+    }
+    if (checkedColors.length) {
+      newProducts = newProducts.filter((prod, index) => {
+        const matchesOneOfColors = checkedColors.some((color) => {
+          return prod.color === color.value;
+        })
+        return matchesOneOfColors;
+      })
+    }
+    return newProducts;
+  };
+
+  let prods = filteredProducts(products, filterOptions);
+  prods = sortedProducts(prods, sortOptions);
 
   return (
     <div className="bg-white">
       <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8">
         <h2 className="sr-only">Products</h2>
         <ProductFilters {...{ filterOptions, setFilterOptions, sortOptions, setSortOptions }} />
-
         <div className="grid grid-cols-1 gap-y-10 sm:grid-cols-2 gap-x-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
-          {products.map((product) => (
+          {prods.map((product) => (
             <a key={product.id} className="group">
               <div className="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
                 <img
@@ -89,4 +129,6 @@ export default function ProductTable({ cart, updateCart }) {
       </div>
     </div>
   );
-}
+});
+
+export default ProductTable;
diff --git a/src/Components/svg/ShoppingCart.tsx b/src/Components/svg/ShoppingCart.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+export default function ShoppingCart({ className }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className={className}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
+      />
+    </svg>
+  );
+}
diff --git a/src/Pages/Home.jsx b/src/Pages/Home.jsx
@@ -2,14 +2,15 @@ import React, { useState } from "react";
 import Cart from "../Components/Cart";
 import NavBar from "../Components/NavBar";
 import ProductTable from "../Components/ProductTable";
+import useLocalStorage from "../hooks/useLocalStorage";
 
 function Home() {
   const [open, setOpen] = useState(false);
-  const [cart, updateCart] = useState([]);
+  const [cart, updateCart] = useLocalStorage('cart', []);
 
   return (
     <main>
-      <NavBar {...{ setOpen }} />
+      <NavBar {...{ setOpen, cart }} />
       <Cart {...{ open, setOpen, cart, updateCart }} />
       <ProductTable {...{ cart, updateCart }} />
     </main>

diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts
@@ -0,0 +1,19 @@
+import { useState, useEffect } from "react";
+
+const useLocalStorage = (key, initialValue) => {
+  const [data, setData] = useState(() => {
+    const storedData = localStorage.getItem(key);
+    return storedData ? JSON.parse(storedData) : initialValue;
+  });
+
+  useEffect(() => {
+    localStorage.setItem(key, JSON.stringify(data));
+  }, [data, key]);
+
+  return [data, setData];
+};
+
+export default useLocalStorage;
+
+// in file hook imported in
+// const [cart, updateCart] = useLocalStorage('cart', []);