From 6290d51d75bfc546fa33232d108e1042cb02a303 Mon Sep 17 00:00:00 2001
From: Anton Gundermann <anton.gundermann@gmx.de>
Date: Tue, 8 Aug 2023 16:49:47 +0200
Subject: [PATCH 1/8] fixed: issue #1

---
 package-lock.json                 |  1 +
 src/Components/NavBar.jsx         | 24 +++++---
 src/Components/ProductFilters.jsx | 68 ++++++++++++++++------
 src/Components/ProductTable.jsx   | 96 +++++++++++++++++++------------
 4 files changed, 128 insertions(+), 61 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/NavBar.jsx b/src/Components/NavBar.jsx
index b1d0db9..3f7cb4f 100644
--- a/src/Components/NavBar.jsx
+++ b/src/Components/NavBar.jsx
@@ -1,5 +1,5 @@
-import { ShoppingBagIcon } from "@heroicons/react/outline";
-import React from "react";
+import { ShoppingBagIcon } from '@heroicons/react/outline'
+import React from 'react'
 
 export default function NavBar({ setOpen }) {
   return (
@@ -23,7 +23,10 @@ export default function NavBar({ setOpen }) {
                   </div>
 
                   {/* Logo (lg-) */}
-                  <a href="#" className="lg:hidden">
+                  <a
+                    href="#"
+                    className="lg:hidden"
+                  >
                     <span className="sr-only">Workflow</span>
                     <img
                       src="https://tailwindui.com/img/logos/workflow-mark.svg?color=black&shade=600"
@@ -36,13 +39,20 @@ export default function NavBar({ setOpen }) {
                     <div className="flex items-center lg:ml-8">
                       {/* Cart Icon */}
                       <div className="ml-4 flow-root lg:ml-8">
-                        <button onClick={() => setOpen(true)} className="group -m-2 p-2 flex items-center">
+                        <button
+                          onClick={() => setOpen(true)}
+                          className="group -m-2 p-2 flex items-center"
+                        >
                           <ShoppingBagIcon
                             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="sr-only">items in cart, view bag</span>
+                          <span className="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">
+                            0
+                          </span>
+                          <span className="sr-only">
+                            items in cart, view bag
+                          </span>
                         </button>
                       </div>
                     </div>
@@ -54,5 +64,5 @@ export default function NavBar({ setOpen }) {
         </nav>
       </header>
     </div>
-  );
+  )
 }
diff --git a/src/Components/ProductFilters.jsx b/src/Components/ProductFilters.jsx
index 0f3262a..806779b 100644
--- a/src/Components/ProductFilters.jsx
+++ b/src/Components/ProductFilters.jsx
@@ -1,19 +1,27 @@
-import { Disclosure, Menu, Transition } from "@headlessui/react";
-import { ChevronDownIcon, FilterIcon } from "@heroicons/react/solid";
-import React, { Fragment } from "react";
+import { Disclosure, Menu, Transition } from '@headlessui/react'
+import { ChevronDownIcon, FilterIcon } from '@heroicons/react/solid'
+import React, { Fragment } from 'react'
 
 function classNames(...classes) {
-  return classes.filter(Boolean).join(" ");
+  return classes.filter(Boolean).join(' ')
 }
 
-export default function ProductFilters({ filterOptions, setFilterOptions, sortOptions, setSortOptions }) {
+export default function ProductFilters({
+  filterOptions,
+  setFilterOptions,
+  sortOptions,
+  setSortOptions,
+}) {
   return (
     <Disclosure
       as="section"
       aria-labelledby="filter-heading"
       className="relative z-10  border-gray-200 grid items-center"
     >
-      <h2 id="filter-heading" className="sr-only">
+      <h2
+        id="filter-heading"
+        className="sr-only"
+      >
         Filters
       </h2>
       <div className="relative col-start-1 row-start-1 py-4">
@@ -28,7 +36,10 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
             </Disclosure.Button>
           </div>
           <div className="pl-6">
-            <button type="button" className="text-gray-500">
+            <button
+              type="button"
+              className="text-gray-500"
+            >
               Clear all
             </button>
           </div>
@@ -41,7 +52,10 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
               <legend className="block font-medium">Price</legend>
               <div className="pt-6 space-y-6 sm:pt-4 sm:space-y-4">
                 {filterOptions.price.map((option, optionIdx) => (
-                  <div key={option.minValue} className="flex items-center text-base sm:text-sm">
+                  <div
+                    key={option.minValue}
+                    className="flex items-center text-base sm:text-sm"
+                  >
                     <input
                       id={`price-${optionIdx}`}
                       name="price[]"
@@ -50,7 +64,10 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
                       className="flex-shrink-0 h-4 w-4 border-gray-300 rounded text-black focus:ring-black"
                       defaultChecked={option.checked}
                     />
-                    <label htmlFor={`price-${optionIdx}`} className="ml-3 min-w-0 flex-1 text-gray-600">
+                    <label
+                      htmlFor={`price-${optionIdx}`}
+                      className="ml-3 min-w-0 flex-1 text-gray-600"
+                    >
                       {option.label}
                     </label>
                   </div>
@@ -61,7 +78,10 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
               <legend className="block font-medium">Color</legend>
               <div className="pt-6 space-y-6 sm:pt-4 sm:space-y-4">
                 {filterOptions.color.map((option, optionIdx) => (
-                  <div key={option.value} className="flex items-center text-base sm:text-sm">
+                  <div
+                    key={option.value}
+                    className="flex items-center text-base sm:text-sm"
+                  >
                     <input
                       id={`color-${optionIdx}`}
                       name="color[]"
@@ -70,7 +90,10 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
                       className="flex-shrink-0 h-4 w-4 border-gray-300 rounded text-black focus:ring-black"
                       defaultChecked={option.checked}
                     />
-                    <label htmlFor={`color-${optionIdx}`} className="ml-3 min-w-0 flex-1 text-gray-600">
+                    <label
+                      htmlFor={`color-${optionIdx}`}
+                      className="ml-3 min-w-0 flex-1 text-gray-600"
+                    >
                       {option.label}
                     </label>
                   </div>
@@ -82,7 +105,10 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
       </Disclosure.Panel>
       <div className="col-start-1 row-start-1 py-4">
         <div className="flex justify-end max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <Menu as="div" className="relative inline-block">
+          <Menu
+            as="div"
+            className="relative inline-block"
+          >
             <div className="flex">
               <Menu.Button className="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900">
                 Sort
@@ -110,11 +136,21 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
                         <button
                           onClick={() => {
                             // TODO
+                            const newOption = {
+                              ...option,
+                              current: !option.current,
+                            }
+                            if (option.name === 'Price')
+                              setSortOptions([newOption, sortOptions[1]])
+                            else if (option.name === 'Newest')
+                              setSortOptions([sortOptions[0], newOption])
                           }}
                           className={classNames(
-                            option.current ? "font-medium text-gray-900" : "text-gray-500",
-                            active ? "bg-gray-100" : "",
-                            "block px-4 py-2 text-sm"
+                            option.current
+                              ? 'font-medium text-gray-900'
+                              : 'text-gray-500',
+                            active ? 'bg-gray-100' : '',
+                            'block px-4 py-2 text-sm'
                           )}
                         >
                           {option.name}
@@ -129,5 +165,5 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
         </div>
       </div>
     </Disclosure>
-  );
+  )
 }
diff --git a/src/Components/ProductTable.jsx b/src/Components/ProductTable.jsx
index ea76621..37f4151 100644
--- a/src/Components/ProductTable.jsx
+++ b/src/Components/ProductTable.jsx
@@ -1,57 +1,75 @@
-import React, { useEffect, useState } from "react";
-import ProductFilters from "./ProductFilters";
+import React, { useEffect, useState } from 'react'
+import ProductFilters from './ProductFilters'
 
 const getDefaultFilterOptions = () => {
   return {
     price: [
-      { minValue: 0, maxValue: 25, label: "$0 - $25", checked: false },
-      { minValue: 25, maxValue: 50, label: "$25 - $50", checked: false },
-      { minValue: 50, maxValue: 75, label: "$50 - $75", checked: false },
-      { minValue: 75, maxValue: Number.MAX_VALUE, label: "$75+", checked: false },
+      { minValue: 0, maxValue: 25, label: '$0 - $25', checked: false },
+      { minValue: 25, maxValue: 50, label: '$25 - $50', checked: false },
+      { minValue: 50, maxValue: 75, label: '$50 - $75', checked: false },
+      {
+        minValue: 75,
+        maxValue: Number.MAX_VALUE,
+        label: '$75+',
+        checked: false,
+      },
     ],
     color: [
-      { value: "beige", label: "Beige", checked: false },
-      { value: "green", label: "Green", checked: false },
-      { value: "white", label: "White", checked: false },
-      { value: "black", label: "Black", checked: false },
-      { value: "gray", label: "Gray", checked: false },
-      { value: "teal", label: "Teal", checked: false },
+      { value: 'beige', label: 'Beige', checked: false },
+      { value: 'green', label: 'Green', checked: false },
+      { value: 'white', label: 'White', checked: false },
+      { value: 'black', label: 'Black', checked: false },
+      { value: 'gray', label: 'Gray', checked: false },
+      { value: 'teal', label: 'Teal', checked: false },
     ],
-  };
-};
+  }
+}
 
 const getDefaultSortOptions = () => {
   return [
-    { name: "Price", current: false },
-    { name: "Newest", current: false },
-  ];
-};
+    { name: 'Price', current: false },
+    { name: 'Newest', current: false },
+  ]
+}
 
 export default function ProductTable({ cart, updateCart }) {
-  let [products, setProducts] = useState([]);
+  let [products, setProducts] = useState([])
 
-  const [filterOptions, setFilterOptions] = useState(getDefaultFilterOptions());
-  const [sortOptions, setSortOptions] = useState(getDefaultSortOptions());
+  const [filterOptions, setFilterOptions] = useState(getDefaultFilterOptions())
+  const [sortOptions, setSortOptions] = useState(getDefaultSortOptions())
 
   useEffect(() => {
     let fetchProducts = async () => {
-      console.info("Fetching Products...");
-      let res = await fetch("http://localhost:3001/products");
-      let body = await res.json();
-      setProducts(body);
-    };
-    fetchProducts();
-  });
+      console.info('Fetching Products...')
+      let res = await fetch('http://localhost:3001/products')
+      let body = await res.json()
+      let sortedProducts = []
+      if (sortOptions[0].current) {
+        sortedProducts = body.sort((a, b) => a.price - b.price)
+      } else if (sortOptions[1].current) {
+        sortedProducts = body.sort((a, b) => a.releaseDate - b.releaseDate)
+      } else {
+        sortedProducts = body
+      }
+      setProducts(sortedProducts)
+    }
+    fetchProducts()
+  }, [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 }}
+        />
 
         <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">
+            <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
                   src={product.imageSrc}
@@ -62,31 +80,33 @@ export default function ProductTable({ cart, updateCart }) {
                   type="button"
                   className="hidden group-hover:block group-hover:opacity-50 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-black"
                   onClick={() => {
-                    let newCart = cart.slice();
+                    let newCart = cart.slice()
 
                     if (!newCart.includes(product)) {
-                      product.quantity = 1;
-                      newCart.push(product);
+                      product.quantity = 1
+                      newCart.push(product)
                     } else {
                       newCart.map((p) => {
                         if (p.id === product.id) {
-                          p.quantity += 1;
+                          p.quantity += 1
                         }
-                      });
+                      })
                     }
 
-                    updateCart(newCart);
+                    updateCart(newCart)
                   }}
                 >
                   Add To Cart
                 </button>
               </div>
               <h3 className="mt-4 text-sm text-gray-700">{product.name}</h3>
-              <p className="mt-1 text-lg font-medium text-gray-900">${product.price}</p>
+              <p className="mt-1 text-lg font-medium text-gray-900">
+                ${product.price}
+              </p>
             </a>
           ))}
         </div>
       </div>
     </div>
-  );
+  )
 }

From 3cc10e9709a97f4ee71162149184baafcde2e15a Mon Sep 17 00:00:00 2001
From: Anton Gundermann <anton.gundermann@gmx.de>
Date: Tue, 8 Aug 2023 18:32:41 +0200
Subject: [PATCH 2/8] fixed: issue #2

---
 src/Components/Cart.jsx | 61 +++++++++++++++++++++++++++++------------
 src/Pages/Home.jsx      | 28 +++++++++++++------
 todo.md                 |  1 +
 3 files changed, 64 insertions(+), 26 deletions(-)

diff --git a/src/Components/Cart.jsx b/src/Components/Cart.jsx
index 917b7a1..9fc9d91 100644
--- a/src/Components/Cart.jsx
+++ b/src/Components/Cart.jsx
@@ -1,15 +1,18 @@
-import { Dialog, Transition } from "@headlessui/react";
-import { XIcon } from "@heroicons/react/outline";
-import React, { Fragment } from "react";
+import { Dialog, Transition } from '@headlessui/react'
+import { XIcon } from '@heroicons/react/outline'
+import React, { Fragment } from 'react'
 
 export default function Cart({ open, setOpen, cart, updateCart }) {
   return (
-    <Transition.Root show={open} as={Fragment}>
+    <Transition.Root
+      show={open}
+      as={Fragment}
+    >
       <Dialog
         as="div"
         className="fixed inset-0 overflow-hidden z-10"
         onClose={() => {
-          setOpen;
+          setOpen
         }}
       >
         <div className="absolute inset-0 overflow-hidden">
@@ -39,7 +42,10 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
                 <div className="flex h-full flex-col overflow-y-scroll bg-white shadow-xl">
                   <div className="flex-1 overflow-y-auto py-6 px-4 sm:px-6">
                     <div className="flex items-start justify-between">
-                      <Dialog.Title className="text-lg font-medium text-gray-900"> Shopping cart </Dialog.Title>
+                      <Dialog.Title className="text-lg font-medium text-gray-900">
+                        {' '}
+                        Shopping cart{' '}
+                      </Dialog.Title>
                       <div className="ml-3 flex h-7 items-center">
                         <button
                           type="button"
@@ -47,16 +53,25 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
                           onClick={() => setOpen(false)}
                         >
                           <span className="sr-only">Close panel</span>
-                          <XIcon className="h-6 w-6" aria-hidden="true" />
+                          <XIcon
+                            className="h-6 w-6"
+                            aria-hidden="true"
+                          />
                         </button>
                       </div>
                     </div>
 
                     <div className="mt-8">
                       <div className="flow-root">
-                        <ul role="list" className="-my-6 divide-y divide-gray-200">
+                        <ul
+                          role="list"
+                          className="-my-6 divide-y divide-gray-200"
+                        >
                           {cart.map((product) => (
-                            <li key={product.id} className="flex py-6">
+                            <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
                                   src={product.imageSrc}
@@ -73,19 +88,26 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
                                   </div>
                                 </div>
                                 <div className="flex flex-1 items-end justify-between text-sm">
-                                  <p className="text-gray-500">Qty {product.quantity}</p>
+                                  <p className="text-gray-500">
+                                    Qty {product.quantity}
+                                  </p>
 
                                   <div className="flex">
                                     <button
                                       onClick={() => {
                                         let newCart = cart.filter((p) => {
                                           if (p.id === product.id) {
-                                            p.quantity -= 1;
+                                            p.quantity -= 1
                                           }
 
-                                          return p.quantity > 0;
-                                        });
-                                        updateCart(newCart);
+                                          return p.quantity > 0
+                                        })
+                                        updateCart(newCart)
+                                        // Issue #2
+                                        localStorage.setItem(
+                                          'cart',
+                                          JSON.stringify(newCart)
+                                        )
                                       }}
                                       type="button"
                                       className="font-medium text-gray-500 hover:text-black"
@@ -107,7 +129,9 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
                       <p>Subtotal</p>
                       <p>$262.00</p>
                     </div>
-                    <p className="mt-0.5 text-sm text-gray-500">Shipping and taxes calculated at checkout.</p>
+                    <p className="mt-0.5 text-sm text-gray-500">
+                      Shipping and taxes calculated at checkout.
+                    </p>
                     <div className="mt-6">
                       <a
                         href="#"
@@ -118,13 +142,14 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
                     </div>
                     <div className="mt-6 flex justify-center text-center text-sm text-gray-500">
                       <p>
-                        or{" "}
+                        or{' '}
                         <button
                           type="button"
                           className="font-medium text-gray-700 hover:text-black"
                           onClick={() => setOpen(false)}
                         >
-                          Continue Shopping<span aria-hidden="true"> &rarr;</span>
+                          Continue Shopping
+                          <span aria-hidden="true"> &rarr;</span>
                         </button>
                       </p>
                     </div>
@@ -136,5 +161,5 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
         </div>
       </Dialog>
     </Transition.Root>
-  );
+  )
 }
diff --git a/src/Pages/Home.jsx b/src/Pages/Home.jsx
index 1a5d5d9..4412d4d 100644
--- a/src/Pages/Home.jsx
+++ b/src/Pages/Home.jsx
@@ -1,11 +1,23 @@
-import React, { useState } from "react";
-import Cart from "../Components/Cart";
-import NavBar from "../Components/NavBar";
-import ProductTable from "../Components/ProductTable";
+import React, { useEffect, useState } from 'react'
+import Cart from '../Components/Cart'
+import NavBar from '../Components/NavBar'
+import ProductTable from '../Components/ProductTable'
 
 function Home() {
-  const [open, setOpen] = useState(false);
-  const [cart, updateCart] = useState([]);
+  const [open, setOpen] = useState(false)
+  const [cart, updateCart] = useState([])
+
+  // Issue #2
+  useEffect(() => {
+    const storedCart = localStorage.getItem('cart')
+    if (storedCart) {
+      updateCart(JSON.parse(storedCart))
+    }
+  }, [])
+
+  useEffect(() => {
+    localStorage.setItem('cart', JSON.stringify(cart))
+  }, [cart])
 
   return (
     <main>
@@ -13,7 +25,7 @@ function Home() {
       <Cart {...{ open, setOpen, cart, updateCart }} />
       <ProductTable {...{ cart, updateCart }} />
     </main>
-  );
+  )
 }
 
-export default Home;
+export default Home
diff --git a/todo.md b/todo.md
index e69de29..c8e4798 100644
--- a/todo.md
+++ b/todo.md
@@ -0,0 +1 @@
+#1 fix that only one option is active

From 3f2f1bbdee48ccb44296b12358fbae4e1f6c6fa2 Mon Sep 17 00:00:00 2001
From: Anton Gundermann <anton.gundermann@gmx.de>
Date: Wed, 9 Aug 2023 10:27:26 +0200
Subject: [PATCH 3/8] fixed: issue #3

---
 src/Components/ProductFilters.jsx | 37 ++++++++++++++++--
 src/Components/ProductTable.jsx   | 65 +++++++++++++++++++++++++------
 2 files changed, 86 insertions(+), 16 deletions(-)

diff --git a/src/Components/ProductFilters.jsx b/src/Components/ProductFilters.jsx
index 806779b..dfa1337 100644
--- a/src/Components/ProductFilters.jsx
+++ b/src/Components/ProductFilters.jsx
@@ -1,6 +1,6 @@
 import { Disclosure, Menu, Transition } from '@headlessui/react'
 import { ChevronDownIcon, FilterIcon } from '@heroicons/react/solid'
-import React, { Fragment } from 'react'
+import React, { Fragment, useEffect, useState } from 'react'
 
 function classNames(...classes) {
   return classes.filter(Boolean).join(' ')
@@ -11,7 +11,32 @@ export default function ProductFilters({
   setFilterOptions,
   sortOptions,
   setSortOptions,
+  handleClear,
 }) {
+  function handleFilterChange(event) {
+    const filter = event.target.value
+
+    if (event.target.name.startsWith('color')) {
+      // Color filter changed
+      const newColorArray = filterOptions.color.map((c) =>
+        c.value === filter ? { ...c, checked: !c.checked } : c
+      )
+      setFilterOptions({ ...filterOptions, color: newColorArray })
+    } else {
+      // Price filter changed
+      const newPriceArray = filterOptions.price.map((p) =>
+        p.minValue === Number(filter) ? { ...p, checked: !p.checked } : p
+      )
+      setFilterOptions({ ...filterOptions, price: newPriceArray })
+    }
+  }
+  function countFilter() {
+    return (
+      filterOptions.price.reduce((s, p) => Number(p.checked) + s, 0) +
+      filterOptions.color.reduce((s, c) => Number(c.checked) + s, 0)
+    )
+  }
+
   return (
     <Disclosure
       as="section"
@@ -32,13 +57,14 @@ export default function ProductFilters({
                 className="flex-none w-5 h-5 mr-2 text-gray-400 group-hover:text-gray-500"
                 aria-hidden="true"
               />
-              0 Filters
+              {countFilter()} Filters
             </Disclosure.Button>
           </div>
           <div className="pl-6">
             <button
               type="button"
               className="text-gray-500"
+              onClick={handleClear}
             >
               Clear all
             </button>
@@ -62,7 +88,8 @@ export default function ProductFilters({
                       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={handleFilterChange}
                     />
                     <label
                       htmlFor={`price-${optionIdx}`}
@@ -88,8 +115,10 @@ export default function ProductFilters({
                       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={handleFilterChange}
                     />
+
                     <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 37f4151..5e9cf71 100644
--- a/src/Components/ProductTable.jsx
+++ b/src/Components/ProductTable.jsx
@@ -43,29 +43,70 @@ export default function ProductTable({ cart, updateCart }) {
       console.info('Fetching Products...')
       let res = await fetch('http://localhost:3001/products')
       let body = await res.json()
-      let sortedProducts = []
-      if (sortOptions[0].current) {
-        sortedProducts = body.sort((a, b) => a.price - b.price)
-      } else if (sortOptions[1].current) {
-        sortedProducts = body.sort((a, b) => a.releaseDate - b.releaseDate)
-      } else {
-        sortedProducts = body
-      }
-      setProducts(sortedProducts)
+
+      setProducts(body)
     }
     fetchProducts()
-  }, [sortOptions])
+  }, [])
+
+  // Filter products
+  const filterProducts = () => {
+    let filteredProducts = products
+    const colorFilter = filterOptions.color
+      .filter((c) => c.checked)
+      .map((c) => c.value)
+    const priceFilter = filterOptions.price
+      .filter((p) => p.checked)
+      .map((p) => {
+        return { minF: p.minValue, maxF: p.maxValue }
+      })
+
+    if (colorFilter.length > 0)
+      filteredProducts = filteredProducts.filter((p) =>
+        colorFilter.includes(p.color)
+      )
+    if (priceFilter.length > 0) {
+      filteredProducts = filteredProducts.filter((p) =>
+        priceFilter.some(({ minF, maxF }) => p.price >= minF && p.price <= maxF)
+      )
+    }
+    return filteredProducts
+  }
+
+  // Sort products
+  const sortProducts = (p) => {
+    if (sortOptions[0].current) {
+      return p.sort((a, b) => a.price - b.price)
+    } else if (sortOptions[1].current) {
+      return p.sort((a, b) => a.releaseDate - b.releaseDate)
+    } else {
+      return p
+    }
+  }
+
+  function handleClear(event) {
+    setFilterOptions(getDefaultFilterOptions())
+  }
+
+  const filteredProducts = filterProducts()
+  const productsToShow = sortProducts(filteredProducts)
 
   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 }}
+          {...{
+            filterOptions,
+            setFilterOptions,
+            sortOptions,
+            setSortOptions,
+            handleClear,
+          }}
         />
 
         <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) => (
+          {productsToShow.map((product) => (
             <a
               key={product.id}
               className="group"

From 20460d4d9192e47660bb55eb4781660821dbc747 Mon Sep 17 00:00:00 2001
From: Anton Gundermann <anton.gundermann@gmx.de>
Date: Thu, 10 Aug 2023 09:47:03 +0200
Subject: [PATCH 4/8] fixed: issue #5

---
 README.md               |   2 +-
 src/Components/Cart.jsx | 122 +++++++++++++++++++++++-----------------
 2 files changed, 70 insertions(+), 54 deletions(-)

diff --git a/README.md b/README.md
index bf5129c..aea9e2f 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@ This is a simple E-Commerce site made with React and TailwindCSS. Your job is to
 1. [Cart Persistence on Refresh](https://github.com/developer-job-simulation/react-ecommerce/issues/2)
 1. [Add Product Filters Functionality](https://github.com/developer-job-simulation/react-ecommerce/issues/3)
 1. [Product Fetch is Causing Infinite Loop](https://github.com/developer-job-simulation/react-ecommerce/issues/4)
-1. [Need to display 'Empty Cart' When Cart is Empty on Cart Page](https://github.com/developer-job-simulation/react-ecommerce/issues/5)
+1. [Need to display 'Empty Cart' When Cart is Empty on Cart Page](https://  github.com/developer-job-simulation/react-ecommerce/issues/5)
 1. [Update Cart in Nav with Cart Size](https://github.com/developer-job-simulation/react-ecommerce/issues/6)
 1. [Cart not closing when User Clicks Gray Region](https://github.com/developer-job-simulation/react-ecommerce/issues/7)
 1. [Subtotal Is not Implemented on Cart Page](https://github.com/developer-job-simulation/react-ecommerce/issues/8)
diff --git a/src/Components/Cart.jsx b/src/Components/Cart.jsx
index 9fc9d91..b7cdf23 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 { XIcon, ShoppingCartIcon } from '@heroicons/react/outline'
 import React, { Fragment } from 'react'
 
 export default function Cart({ open, setOpen, cart, updateCart }) {
@@ -61,65 +61,81 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
                       </div>
                     </div>
 
-                    <div className="mt-8">
+                    <div
+                      className={
+                        cart.length === 0
+                          ? 'mt-8 flex h-full items-center justify-center'
+                          : 'mt-8'
+                      }
+                    >
                       <div className="flow-root">
-                        <ul
-                          role="list"
-                          className="-my-6 divide-y divide-gray-200"
-                        >
-                          {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
-                                  src={product.imageSrc}
-                                  alt={product.imageAlt}
-                                  className="h-full w-full object-cover object-center"
-                                />
-                              </div>
+                        {cart.length === 0 ? (
+                          <div className="flex flex-col items-center">
+                            <ShoppingCartIcon
+                              className="w-12"
+                              aria-hidden="true"
+                            />
+                            <span className="pt-2">Your Cart is empty</span>
+                          </div>
+                        ) : (
+                          <ul
+                            role="list"
+                            className="-my-6 divide-y divide-gray-200"
+                          >
+                            {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
+                                    src={product.imageSrc}
+                                    alt={product.imageAlt}
+                                    className="h-full w-full object-cover object-center"
+                                  />
+                                </div>
 
-                              <div className="ml-4 flex flex-1 flex-col">
-                                <div>
-                                  <div className="flex justify-between text-base font-medium text-gray-900">
-                                    <h3>{product.name}</h3>
-                                    <p className="ml-4">${product.price}</p>
+                                <div className="ml-4 flex flex-1 flex-col">
+                                  <div>
+                                    <div className="flex justify-between text-base font-medium text-gray-900">
+                                      <h3>{product.name}</h3>
+                                      <p className="ml-4">${product.price}</p>
+                                    </div>
                                   </div>
-                                </div>
-                                <div className="flex flex-1 items-end justify-between text-sm">
-                                  <p className="text-gray-500">
-                                    Qty {product.quantity}
-                                  </p>
+                                  <div className="flex flex-1 items-end justify-between text-sm">
+                                    <p className="text-gray-500">
+                                      Qty {product.quantity}
+                                    </p>
 
-                                  <div className="flex">
-                                    <button
-                                      onClick={() => {
-                                        let newCart = cart.filter((p) => {
-                                          if (p.id === product.id) {
-                                            p.quantity -= 1
-                                          }
+                                    <div className="flex">
+                                      <button
+                                        onClick={() => {
+                                          let newCart = cart.filter((p) => {
+                                            if (p.id === product.id) {
+                                              p.quantity -= 1
+                                            }
 
-                                          return p.quantity > 0
-                                        })
-                                        updateCart(newCart)
-                                        // Issue #2
-                                        localStorage.setItem(
-                                          'cart',
-                                          JSON.stringify(newCart)
-                                        )
-                                      }}
-                                      type="button"
-                                      className="font-medium text-gray-500 hover:text-black"
-                                    >
-                                      Remove
-                                    </button>
+                                            return p.quantity > 0
+                                          })
+                                          updateCart(newCart)
+                                          // Issue #2
+                                          localStorage.setItem(
+                                            'cart',
+                                            JSON.stringify(newCart)
+                                          )
+                                        }}
+                                        type="button"
+                                        className="font-medium text-gray-500 hover:text-black"
+                                      >
+                                        Remove
+                                      </button>
+                                    </div>
                                   </div>
                                 </div>
-                              </div>
-                            </li>
-                          ))}
-                        </ul>
+                              </li>
+                            ))}
+                          </ul>
+                        )}
                       </div>
                     </div>
                   </div>

From 3d5abdf9322a4e39fd95fe2138d7329b37287a10 Mon Sep 17 00:00:00 2001
From: Anton Gundermann <anton.gundermann@gmx.de>
Date: Thu, 10 Aug 2023 10:04:37 +0200
Subject: [PATCH 5/8] fixed: issue #6

---
 README.md                 | 2 +-
 src/Components/NavBar.jsx | 4 ++--
 src/Pages/Home.jsx        | 4 +++-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index aea9e2f..bf5129c 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@ This is a simple E-Commerce site made with React and TailwindCSS. Your job is to
 1. [Cart Persistence on Refresh](https://github.com/developer-job-simulation/react-ecommerce/issues/2)
 1. [Add Product Filters Functionality](https://github.com/developer-job-simulation/react-ecommerce/issues/3)
 1. [Product Fetch is Causing Infinite Loop](https://github.com/developer-job-simulation/react-ecommerce/issues/4)
-1. [Need to display 'Empty Cart' When Cart is Empty on Cart Page](https://  github.com/developer-job-simulation/react-ecommerce/issues/5)
+1. [Need to display 'Empty Cart' When Cart is Empty on Cart Page](https://github.com/developer-job-simulation/react-ecommerce/issues/5)
 1. [Update Cart in Nav with Cart Size](https://github.com/developer-job-simulation/react-ecommerce/issues/6)
 1. [Cart not closing when User Clicks Gray Region](https://github.com/developer-job-simulation/react-ecommerce/issues/7)
 1. [Subtotal Is not Implemented on Cart Page](https://github.com/developer-job-simulation/react-ecommerce/issues/8)
diff --git a/src/Components/NavBar.jsx b/src/Components/NavBar.jsx
index 3f7cb4f..56ea32f 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, productsInCart }) {
   return (
     <div className="bg-white">
       <header className="relative">
@@ -48,7 +48,7 @@ export default function NavBar({ setOpen }) {
                             aria-hidden="true"
                           />
                           <span className="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">
-                            0
+                            {productsInCart}
                           </span>
                           <span className="sr-only">
                             items in cart, view bag
diff --git a/src/Pages/Home.jsx b/src/Pages/Home.jsx
index 4412d4d..017c1b4 100644
--- a/src/Pages/Home.jsx
+++ b/src/Pages/Home.jsx
@@ -19,9 +19,11 @@ function Home() {
     localStorage.setItem('cart', JSON.stringify(cart))
   }, [cart])
 
+  const productsInCart = cart.reduce((s, p) => p.quantity + s, 0)
+
   return (
     <main>
-      <NavBar {...{ setOpen }} />
+      <NavBar {...{ setOpen, productsInCart }} />
       <Cart {...{ open, setOpen, cart, updateCart }} />
       <ProductTable {...{ cart, updateCart }} />
     </main>

From e1ff41a752b29caf901c7f2794c55ff4b42f0677 Mon Sep 17 00:00:00 2001
From: Anton Gundermann <anton.gundermann@gmx.de>
Date: Thu, 10 Aug 2023 10:14:52 +0200
Subject: [PATCH 6/8] fixed: issue #7 & #8

---
 src/Components/Cart.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/Components/Cart.jsx b/src/Components/Cart.jsx
index b7cdf23..b75a505 100644
--- a/src/Components/Cart.jsx
+++ b/src/Components/Cart.jsx
@@ -3,6 +3,8 @@ import { XIcon, ShoppingCartIcon } from '@heroicons/react/outline'
 import React, { Fragment } from 'react'
 
 export default function Cart({ open, setOpen, cart, updateCart }) {
+  const subTotal = cart.reduce((s, p) => p.price * p.quantity + s, 0)
+
   return (
     <Transition.Root
       show={open}
@@ -24,6 +26,7 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
             leave="ease-in-out duration-500"
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
+            onClick={() => setOpen(false)}
           >
             <Dialog.Overlay className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
           </Transition.Child>
@@ -143,7 +146,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>${subTotal.toFixed(2)}</p>
                     </div>
                     <p className="mt-0.5 text-sm text-gray-500">
                       Shipping and taxes calculated at checkout.

From 88634271a465c7914b916f78ada6e5778fc2fd55 Mon Sep 17 00:00:00 2001
From: Anton Gundermann <anton.gundermann@gmx.de>
Date: Thu, 10 Aug 2023 10:28:31 +0200
Subject: [PATCH 7/8] fixed: spelling issue #5

---
 src/Components/Cart.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/Cart.jsx b/src/Components/Cart.jsx
index b75a505..425667a 100644
--- a/src/Components/Cart.jsx
+++ b/src/Components/Cart.jsx
@@ -78,7 +78,7 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
                               className="w-12"
                               aria-hidden="true"
                             />
-                            <span className="pt-2">Your Cart is empty</span>
+                            <span className="pt-2">Your Cart is Empty.</span>
                           </div>
                         ) : (
                           <ul

From 23cc18ff15b177eb35841ee9672eb936e404de48 Mon Sep 17 00:00:00 2001
From: Anton Gundermann <anton.gundermann@gmx.de>
Date: Thu, 10 Aug 2023 11:19:29 +0200
Subject: [PATCH 8/8] fixed: ony one option issue #1

---
 src/Components/ProductFilters.jsx | 21 ++++++++++++++-------
 src/Components/ProductTable.jsx   |  7 +++++--
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/Components/ProductFilters.jsx b/src/Components/ProductFilters.jsx
index dfa1337..141b1d1 100644
--- a/src/Components/ProductFilters.jsx
+++ b/src/Components/ProductFilters.jsx
@@ -165,14 +165,21 @@ export default function ProductFilters({
                         <button
                           onClick={() => {
                             // TODO
-                            const newOption = {
-                              ...option,
-                              current: !option.current,
+                            const clikedOption = sortOptions.find(
+                              (o) => o.name === option.name
+                            )
+                            const otherOption = sortOptions.find(
+                              (o) => o.name !== option.name
+                            )
+                            if (!clikedOption.current) {
+                              clikedOption.current = true
+                              if (otherOption.current) {
+                                otherOption.current = false
+                              }
+                            } else {
+                              clikedOption.current = false
                             }
-                            if (option.name === 'Price')
-                              setSortOptions([newOption, sortOptions[1]])
-                            else if (option.name === 'Newest')
-                              setSortOptions([sortOptions[0], newOption])
+                            setSortOptions([clikedOption, otherOption])
                           }}
                           className={classNames(
                             option.current
diff --git a/src/Components/ProductTable.jsx b/src/Components/ProductTable.jsx
index 5e9cf71..aa63e91 100644
--- a/src/Components/ProductTable.jsx
+++ b/src/Components/ProductTable.jsx
@@ -75,9 +75,12 @@ export default function ProductTable({ cart, updateCart }) {
 
   // Sort products
   const sortProducts = (p) => {
-    if (sortOptions[0].current) {
+    const price = sortOptions.find((o) => o.name === 'Price')
+    const newest = sortOptions.find((o) => o.name === 'Newest')
+
+    if (price.current) {
       return p.sort((a, b) => a.price - b.price)
-    } else if (sortOptions[1].current) {
+    } else if (newest.current) {
       return p.sort((a, b) => a.releaseDate - b.releaseDate)
     } else {
       return p