From 5fc79566e5cb7ba34be8906e970d05d2d0afe5af Mon Sep 17 00:00:00 2001
From: malkoe <chienthong94@hotmail.com>
Date: Fri, 30 Dec 2022 14:16:04 +0800
Subject: [PATCH 1/2] First fix attempt

---
 package-lock.json                 |  1 +
 src/Components/Cart.jsx           | 10 ++++---
 src/Components/NavBar.jsx         |  4 +--
 src/Components/ProductFilters.jsx | 43 +++++++++++++++++++++++++--
 src/Components/ProductTable.jsx   | 48 +++++++++++++++++++++++++++++--
 src/Pages/Home.jsx                |  3 +-
 6 files changed, 97 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d01ddfa..bbd664e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "react-ecommerce",
       "version": "0.0.1",
       "dependencies": {
         "@headlessui/react": "^1.6.0",
diff --git a/src/Components/Cart.jsx b/src/Components/Cart.jsx
index 917b7a1..3f3e700 100644
--- a/src/Components/Cart.jsx
+++ b/src/Components/Cart.jsx
@@ -1,5 +1,5 @@
 import { Dialog, Transition } from "@headlessui/react";
-import { XIcon } from "@heroicons/react/outline";
+import { ShoppingCartIcon, XIcon } from "@heroicons/react/outline";
 import React, { Fragment } from "react";
 
 export default function Cart({ open, setOpen, cart, updateCart }) {
@@ -9,7 +9,7 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
         as="div"
         className="fixed inset-0 overflow-hidden z-10"
         onClose={() => {
-          setOpen;
+          setOpen(false);
         }}
       >
         <div className="absolute inset-0 overflow-hidden">
@@ -55,7 +55,7 @@ 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.map((product) => (
+                          {cart.length === 0 ? (<div className="flex flex-col items-center content-center flex-auto"><ShoppingCartIcon className="w-12" /><span className="py-2">Your Cart is Empty.</span></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">
                                 <img
@@ -86,6 +86,8 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
                                           return p.quantity > 0;
                                         });
                                         updateCart(newCart);
+                                        const localCart = newCart.map(p => JSON.stringify(p))
+                                        localStorage.setItem('cart', JSON.stringify(localCart))
                                       }}
                                       type="button"
                                       className="font-medium text-gray-500 hover:text-black"
@@ -105,7 +107,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.map(product => product.price).reduce((a, c) => a + c, 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
index b1d0db9..b7ce27c 100644
--- 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
index 0f3262a..041c729 100644
--- a/src/Components/ProductFilters.jsx
+++ b/src/Components/ProductFilters.jsx
@@ -7,6 +7,34 @@ function classNames(...classes) {
 }
 
 export default function ProductFilters({ filterOptions, setFilterOptions, sortOptions, setSortOptions }) {
+  const handleFilter = (e, type, option) => {
+    if (type === "price") {
+      if (e.target.checked) {
+        option.checked = true
+        const nextPrice = [...filterOptions.price]
+        const nextFilter = {...filterOptions, price: nextPrice}
+        setFilterOptions(nextFilter)
+      } else {
+        option.checked = false
+        const nextPrice = [...filterOptions.price]
+        const nextFilter = {...filterOptions, price: nextPrice}
+        setFilterOptions(nextFilter)
+      }
+    } else {
+      if (e.target.checked) {
+        option.checked = true
+        const nextColor = [...filterOptions.color]
+        const nextFilter = {...filterOptions, color: nextColor}
+        setFilterOptions(nextFilter)
+      } else {
+        option.checked = false
+        const nextColor = [...filterOptions.color]
+        const nextFilter = {...filterOptions, color: nextColor}
+        setFilterOptions(nextFilter)
+      }
+    }
+  }
+
   return (
     <Disclosure
       as="section"
@@ -24,7 +52,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.filter(f => f.checked === true).length + filterOptions.color.filter(f => f.checked === true).length} Filters
             </Disclosure.Button>
           </div>
           <div className="pl-6">
@@ -49,6 +77,7 @@ 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 => handleFilter(e, "price", option)}
                     />
                     <label htmlFor={`price-${optionIdx}`} className="ml-3 min-w-0 flex-1 text-gray-600">
                       {option.label}
@@ -69,6 +98,7 @@ 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 => handleFilter(e, "price", option)}
                     />
                     <label htmlFor={`color-${optionIdx}`} className="ml-3 min-w-0 flex-1 text-gray-600">
                       {option.label}
@@ -109,7 +139,16 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
                       {({ active }) => (
                         <button
                           onClick={() => {
-                            // TODO
+                            const ssortOptions = sortOptions.map((o => {
+                              if (o.name === option.name) {
+                                o.current = true
+                                return o
+                              } else {
+                                o.current = false
+                                return o
+                              }
+                            }))
+                            setSortOptions(ssortOptions)
                           }}
                           className={classNames(
                             option.current ? "font-medium text-gray-900" : "text-gray-500",
diff --git a/src/Components/ProductTable.jsx b/src/Components/ProductTable.jsx
index ea76621..6162b75 100644
--- a/src/Components/ProductTable.jsx
+++ b/src/Components/ProductTable.jsx
@@ -33,6 +33,9 @@ export default function ProductTable({ cart, updateCart }) {
   const [filterOptions, setFilterOptions] = useState(getDefaultFilterOptions());
   const [sortOptions, setSortOptions] = useState(getDefaultSortOptions());
 
+  const [pricechecked, setPriceChecked] = useState([])
+  const [colorchecked, setColorChecked] = useState([])
+
   useEffect(() => {
     let fetchProducts = async () => {
       console.info("Fetching Products...");
@@ -40,8 +43,33 @@ export default function ProductTable({ cart, updateCart }) {
       let body = await res.json();
       setProducts(body);
     };
+    if (localStorage.getItem('cart')) {
+      const parsedCart = JSON.parse(localStorage.getItem('cart')).map((product) => JSON.parse(product))
+      updateCart(parsedCart)
+    }
     fetchProducts();
-  });
+  }, []);
+
+  useEffect(() => {
+    const foundSort = sortOptions.find(o => o.current === true)
+    let sorted = []
+    if (!foundSort) {
+      return
+    }
+    if (foundSort.name === "Price") {
+      sorted = [...products].sort((a, b) => b.price - a.price)
+    } else {
+      sorted = [...products].sort((a, b) => b.releaseDate - a.releaseDate)
+    }
+    setProducts(sorted)
+  }, [sortOptions])
+
+  useEffect(() => {
+    const filtered = filterOptions.price.filter(o => o.checked)
+    const filtered2 = filterOptions.color.filter(o => o.checked)
+    setPriceChecked([...filtered])
+    setColorChecked([...filtered2])
+  }, [filterOptions])
 
   return (
     <div className="bg-white">
@@ -50,7 +78,20 @@ export default function ProductTable({ cart, updateCart }) {
         <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) => (
+          {products.filter(p => {
+            return (
+              pricechecked.length > 0 ? (pricechecked.some(c => {
+                return p.price <= c.maxValue && p.price >= c.minValue
+              })) : true)
+          })
+          .filter(p => {
+            return (
+              colorchecked.length > 0 ? (colorchecked.some(c => {
+                return c.value === p.color
+              })) : true
+            )
+          })
+          .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
@@ -74,7 +115,8 @@ export default function ProductTable({ cart, updateCart }) {
                         }
                       });
                     }
-
+                    const localCart = newCart.map(p => JSON.stringify(p))
+                    localStorage.setItem('cart', JSON.stringify(localCart))
                     updateCart(newCart);
                   }}
                 >
diff --git a/src/Pages/Home.jsx b/src/Pages/Home.jsx
index 1a5d5d9..469da82 100644
--- a/src/Pages/Home.jsx
+++ b/src/Pages/Home.jsx
@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+
 import Cart from "../Components/Cart";
 import NavBar from "../Components/NavBar";
 import ProductTable from "../Components/ProductTable";
@@ -9,7 +10,7 @@ function Home() {
 
   return (
     <main>
-      <NavBar {...{ setOpen }} />
+      <NavBar {...{ setOpen, cart }} />
       <Cart {...{ open, setOpen, cart, updateCart }} />
       <ProductTable {...{ cart, updateCart }} />
     </main>

From 06cc9cf2d4ad62e9577d3e8bc5870d5e65cc5d23 Mon Sep 17 00:00:00 2001
From: malkoe <chienthong94@hotmail.com>
Date: Tue, 3 Jan 2023 08:33:45 +0800
Subject: [PATCH 2/2] Fixed clear all filters

---
 src/Components/ProductFilters.jsx | 8 ++++----
 src/Components/ProductTable.jsx   | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/Components/ProductFilters.jsx b/src/Components/ProductFilters.jsx
index 041c729..f0380cf 100644
--- a/src/Components/ProductFilters.jsx
+++ b/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, getDefaultFilterOptions }) {
   const handleFilter = (e, type, option) => {
     if (type === "price") {
       if (e.target.checked) {
@@ -56,7 +56,7 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
             </Disclosure.Button>
           </div>
           <div className="pl-6">
-            <button type="button" className="text-gray-500">
+            <button type="button" onClick={() => setFilterOptions(getDefaultFilterOptions())} className="text-gray-500">
               Clear all
             </button>
           </div>
@@ -76,7 +76,7 @@ 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}
+                      checked={option.checked}
                       onChange={e => handleFilter(e, "price", option)}
                     />
                     <label htmlFor={`price-${optionIdx}`} className="ml-3 min-w-0 flex-1 text-gray-600">
@@ -97,7 +97,7 @@ 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 => handleFilter(e, "price", option)}
                     />
                     <label htmlFor={`color-${optionIdx}`} className="ml-3 min-w-0 flex-1 text-gray-600">
diff --git a/src/Components/ProductTable.jsx b/src/Components/ProductTable.jsx
index 6162b75..dc5e86c 100644
--- a/src/Components/ProductTable.jsx
+++ b/src/Components/ProductTable.jsx
@@ -75,7 +75,7 @@ export default function ProductTable({ cart, updateCart }) {
     <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, getDefaultFilterOptions }} />
 
         <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.filter(p => {