react-ecommerce: all issues PR

src/Components/Cart.jsx

@@ -1,15 +1,29 @@
 import { Dialog, Transition } from "@headlessui/react";
-import { XIcon } from "@heroicons/react/outline";
+import { XIcon, ShoppingCartIcon } from "@heroicons/react/outline";
 import React, { Fragment } from "react";
+import { useEffect } from "react";
+
+export default function Cart({ open, setOpen, cart, updateCart}) {
+
+  useEffect(() => {
+    let item =  JSON.parse(localStorage.getItem('items'))
+    if(item){
+      updateCart(item)
+    }
+  },[]); // render only once when session refreshed
+
+  useEffect(()=> {
+    let item = [...cart];
+    localStorage.setItem('items', JSON.stringify(item));
+  },[cart]); // localStorage updated on every change on cart array.
 
-export default function Cart({ open, setOpen, cart, updateCart }) {
   return (
     <Transition.Root show={open} as={Fragment}>
       <Dialog
         as="div"
         className="fixed inset-0 overflow-hidden z-10"
         onClose={() => {
-          setOpen;
+          setOpen(false); // closing the cart div on backdropClick
         }}
       >
         <div className="absolute inset-0 overflow-hidden">
@@ -55,6 +69,13 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
                     <div className="mt-8">
                       <div className="flow-root">
                         <ul role="list" className="-my-6 divide-y divide-gray-200">
+                          {cart.length == 0 &&
+                            <div className="flex flex-column justify-center items-center h-[20rem]">
+                              <div className="items-center">
+                                <ShoppingCartIcon className="flex flex-row w-12 mx-10" />
+                                <div className="pt-2">Your Cart is Empty</div>
+                              </div>
+                            </div>}
                           {cart.map((product) => (
                             <li key={product.id} className="flex py-6">
                               <div className="h-24 w-24 flex-shrink-0 overflow-hidden rounded-md border border-gray-200">
@@ -105,7 +126,7 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
                   <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((acc, prod) => {return acc + prod.price*prod.quantity},0)}</p>
                     </div>
                     <p className="mt-0.5 text-sm text-gray-500">Shipping and taxes calculated at checkout.</p>
                     <div className="mt-6">

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>

src/Components/ProductFilters.jsx

@@ -6,7 +6,7 @@ function classNames(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 
-export default function ProductFilters({ filterOptions, setFilterOptions, sortOptions, setSortOptions }) {
+export default function ProductFilters({ filterOptions, setFilterOptions, sortOptions, setSortOptions, products, setProducts, getDefaultFilterOptions, count, setCount}) {
   return (
     <Disclosure
       as="section"
@@ -24,11 +24,14 @@ 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
+              {count} Filters
             </Disclosure.Button>
           </div>
           <div className="pl-6">
-            <button type="button" className="text-gray-500">
+            <button type="button" className="text-gray-500" onClick = {e => {
+              setFilterOptions(getDefaultFilterOptions());
+              setCount(0);
+            }}>
               Clear all
             </button>
           </div>
@@ -48,7 +51,22 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
                       defaultValue={option.minValue}
                       type="checkbox"
                       className="flex-shrink-0 h-4 w-4 border-gray-300 rounded text-black focus:ring-black"
-                      defaultChecked={option.checked}
+                      // defaultChecked={option.checked}
+                      checked={option.checked}
+                      onChange = { (e) => {
+                        let newFilter = {...filterOptions};
+                        newFilter.price[optionIdx].checked  = !(newFilter.price[optionIdx].checked);
+                        setFilterOptions(newFilter);
+                        if(newFilter.price[optionIdx].checked){
+                          setCount(count+1)
+                        }
+                        if(!(newFilter.price[optionIdx].checked)){
+                          let count1 = count>0?count-1:0
+                          setCount(count1)
+                        }
+                      } 
+
+                      }
                     />
                     <label htmlFor={`price-${optionIdx}`} className="ml-3 min-w-0 flex-1 text-gray-600">
                       {option.label}
@@ -68,7 +86,19 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
                       defaultValue={option.value}
                       type="checkbox"
                       className="flex-shrink-0 h-4 w-4 border-gray-300 rounded text-black focus:ring-black"
-                      defaultChecked={option.checked}
+                      checked={option.checked}
+                      onChange = { (e) => {
+                        let newFilter = {...filterOptions};
+                        newFilter.color[optionIdx].checked  = !newFilter.color[optionIdx].checked;
+                        setFilterOptions(newFilter);
+                        if(newFilter.color[optionIdx].checked){
+                          setCount(count+1)
+                        }
+                        if(!(newFilter.color[optionIdx].checked)){
+                          let count1 = count>0?count-1:0
+                          setCount(count1)
+                        }
+                      } }
                     />
                     <label htmlFor={`color-${optionIdx}`} className="ml-3 min-w-0 flex-1 text-gray-600">
                       {option.label}
@@ -104,13 +134,26 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
             >
               <Menu.Items className="origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
                 <div className="py-1">
-                  {sortOptions.map((option) => (
+                  {sortOptions.map((option, optionIdx) => (
                     <Menu.Item key={option.name}>
                       {({ active }) => (
                         <button
                           onClick={() => {
-                            // TODO
-                          }}
+                            let newSort = [...sortOptions];
+                            console.log(sortOptions)
+                            if(optionIdx == 0){
+                              newSort[0].current = true;
+                              newSort[1].current = false;
+                            }
+                            if(optionIdx == 1){
+                              newSort[1].current = true;
+                              newSort[0].current = false;
+                            }
+                            // newSort[optionIdx].current = !newSort[optionIdx].current;
+                            console.log(newSort)
+                            setSortOptions(newSort);
+                          }
+                        }
                           className={classNames(
                             option.current ? "font-medium text-gray-900" : "text-gray-500",
                             active ? "bg-gray-100" : "",

src/Components/ProductTable.jsx

@@ -27,28 +27,67 @@ const getDefaultSortOptions = () => {
   ];
 };
 
+let ogProducts =[];
+
 export default function ProductTable({ cart, updateCart }) {
   let [products, setProducts] = useState([]);
 
   const [filterOptions, setFilterOptions] = useState(getDefaultFilterOptions());
   const [sortOptions, setSortOptions] = useState(getDefaultSortOptions());
+  const [count, setCount] = useState(0);
+
+  useEffect(async () => {
+    console.info("Fetching Products...");
+    let res = await fetch("http://localhost:3001/products");
+    let body = await res.json();
+    ogProducts = body;
+    setProducts(body);
+  },[]); //This tells React that your effect doesn’t depend on any values from props or state, so it never needs to re-run
 
   useEffect(() => {
-    let fetchProducts = async () => {
-      console.info("Fetching Products...");
-      let res = await fetch("http://localhost:3001/products");
-      let body = await res.json();
-      setProducts(body);
-    };
-    fetchProducts();
-  });
+    let newProducts = [...ogProducts];
+    console.log(newProducts)
+    let priceFilterSelected = filterOptions.price.filter((item) => item.checked);
+    let colorFilterSelected = filterOptions.color.filter((item) => item.checked);
+    if (colorFilterSelected.length >= 1){
+      let filterColor = colorFilterSelected.map(item => item.value)
+      newProducts = newProducts.filter(product => {return filterColor.includes(product.color)});
+    }
+    if (priceFilterSelected.length >= 1){
+        // let lowerFilterPrice = priceFilterSelected.map(item => item.minValue)
+        // let upperFilterPrice= priceFilterSelected.map(item => item.maxValue)
+      let lowest = Math.min(...(priceFilterSelected.map(item => item.minValue)));
+      let highest = Math.max(...(priceFilterSelected.map(item => item.maxValue)));
+      newProducts = newProducts.filter(product => {return  product.price >= lowest && product.price <= highest});
+    }
+    setProducts(newProducts)
+  },[filterOptions]);
+
+  useEffect(() => {
+    let newProducts2 = [...products];
+    let sortSelected = sortOptions.filter((option) => option.current);
+      // let NewSortSelected = sortOptions.filter((option) => option.name == "Newest");
+    if (sortSelected.length==1){
+      if (sortSelected[0].name == "Price"){
+        newProducts2 =  [...newProducts2].sort(function (a, b) {
+          return b.price - a.price;
+        });
+      }
+      else {
+        newProducts2 =  [...newProducts2].sort(function (a, b) {
+          return b.releaseDate - a.releaseDate;
+        });
+      }
+    }
+    setProducts(newProducts2)
+  },[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 }} />
-
+        <ProductFilters {...{ filterOptions, setFilterOptions, sortOptions, setSortOptions, products, setProducts, getDefaultFilterOptions, count, setCount}} />
+          
         <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) => (
             <a key={product.id} className="group">

src/Pages/Home.jsx

@@ -9,7 +9,7 @@ function Home() {
 
   return (
     <main>
-      <NavBar {...{ setOpen }} />
+      <NavBar {...{ setOpen, cart}} />
       <Cart {...{ open, setOpen, cart, updateCart }} />
       <ProductTable {...{ cart, updateCart }} />
     </main>