Fix issues in E-commerce App

.gitignore

@@ -3,3 +3,7 @@ node_modules
 dist
 dist-ssr
 *.local
+.idea/modules.xml
+.idea/react-ecommerce.iml
+.idea/vcs.xml
+package-lock.json

package.json

@@ -20,7 +20,7 @@
     "@tailwindcss/aspect-ratio": "^0.4.0",
     "autoprefixer": "^10.4.5",
     "json-server": "^0.17.0",
-    "postcss": "^8.4.12",
+    "postcss": "8.4.31",
     "tailwindcss": "^3.0.24"
   }
 }

src/Components/ProductFilters.jsx

@@ -6,7 +6,43 @@ 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 }) {
+
+  const getActiveOption = (optionName) => {
+    const activeOption = [...sortOptions].map((option) => {
+      if (option.name === optionName) {
+        return {...option, current: true}
+      } else {
+        return {...option, current: false}
+      }
+
+    });
+
+    setSortOptions(activeOption);
+  }
+
+  const sortByOptions = (option) => {
+    const productKeys = {
+      "Price": "price",
+      "Newest": "releaseDate",
+    }
+
+    const sortOption = productKeys[option]
+    const orderedProducts = [...products].sort((product1, product2) => {
+        if (product1[sortOption] < product2[sortOption]) {
+          return -1
+        }
+        return 1
+      })
+
+    setProducts(orderedProducts)
+  }
+
+  const handleOnClick = (optionName) => {
+    sortByOptions(optionName)
+    getActiveOption(optionName)
+  }
+
   return (
     <Disclosure
       as="section"
@@ -108,9 +144,7 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
                     <Menu.Item key={option.name}>
                       {({ active }) => (
                         <button
-                          onClick={() => {
-                            // TODO
-                          }}
+                          onClick={() => handleOnClick(option.name)}
                           className={classNames(
                             option.current ? "font-medium text-gray-900" : "text-gray-500",
                             active ? "bg-gray-100" : "",

src/Components/ProductTable.jsx

@@ -41,13 +41,14 @@ export default function ProductTable({ cart, updateCart }) {
       setProducts(body);
     };
     fetchProducts();
-  });
+  }, []);
+
 
   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}} />
 
         <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) => (

src/Pages/Home.jsx

@@ -1,11 +1,15 @@
-import React, { useState } from "react";
+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 [cart, updateCart] = useState(JSON.parse(localStorage.getItem("cartContent")) || []);
+
+  useEffect(() => {
+      localStorage.setItem("cartContent", JSON.stringify(cart));
+  },[cart])
 
   return (
     <main>