From 0e293b64c01812d866f427158c27a9a3317e5b5e Mon Sep 17 00:00:00 2001
From: snigdhasankhe <snigdhasankhe@gmail.com>
Date: Sun, 8 May 2022 17:54:50 +0530
Subject: [PATCH 1/6] Adding easy fixes and enhancements.

---
 package-lock.json               | 1 +
 src/Components/Cart.jsx         | 9 ++++++++-
 src/Components/NavBar.jsx       | 4 ++--
 src/Components/ProductTable.jsx | 3 ++-
 src/Pages/Home.jsx              | 2 +-
 5 files changed, 14 insertions(+), 5 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..7812abd 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 }) {
@@ -55,6 +55,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">
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/ProductTable.jsx b/src/Components/ProductTable.jsx
index 148fc73..c222f5e 100644
--- a/src/Components/ProductTable.jsx
+++ b/src/Components/ProductTable.jsx
@@ -38,7 +38,8 @@ export default function ProductTable({ cart, updateCart }) {
     let res = await fetch("http://localhost:3001/products");
     let body = await res.json();
     setProducts(body);
-  });
+    console.log(products);
+  },[]);
 
   return (
     <div className="bg-white">
diff --git a/src/Pages/Home.jsx b/src/Pages/Home.jsx
index 1a5d5d9..a682885 100644
--- a/src/Pages/Home.jsx
+++ b/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>

From 1ac9fecbda405b3ba5070cbf68eb0512783b69d4 Mon Sep 17 00:00:00 2001
From: snigdhasankhe <snigdhasankhe@gmail.com>
Date: Sun, 15 May 2022 16:25:34 +0530
Subject: [PATCH 2/6] Adding medium fixes and enhancements

---
 db.json                           |  2 +-
 src/Components/Cart.jsx           | 20 +++++++++++++++++---
 src/Components/ProductFilters.jsx | 18 +++++++++++++++---
 src/Components/ProductTable.jsx   |  6 +++---
 4 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/db.json b/db.json
index 41f0218..6bacaa2 100644
--- a/db.json
+++ b/db.json
@@ -30,7 +30,7 @@
     {
       "id": 4,
       "name": "Machined Mechanical Pencil",
-      "price": "35",
+      "price": 35,
       "color": "black",
       "releaseDate": "1651350489",
       "imageSrc": "https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-04.jpg",
diff --git a/src/Components/Cart.jsx b/src/Components/Cart.jsx
index 7812abd..94647f0 100644
--- a/src/Components/Cart.jsx
+++ b/src/Components/Cart.jsx
@@ -1,15 +1,29 @@
 import { Dialog, Transition } from "@headlessui/react";
 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">
@@ -112,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">
diff --git a/src/Components/ProductFilters.jsx b/src/Components/ProductFilters.jsx
index 0f3262a..287e45c 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, products, setProducts  }) {
   return (
     <Disclosure
       as="section"
@@ -109,8 +109,20 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
                       {({ active }) => (
                         <button
                           onClick={() => {
-                            // TODO
-                          }}
+                            if (option.name == 'Price') { // sorting based on Price
+                              let sortedProducts = [...products].sort(function (a, b) {
+                                return b.price - a.price;
+                              });
+                              setProducts(sortedProducts);
+                            }
+                            if(option.name == 'Newest'){ // sorting based on releaseDate
+                              let sortedProducts = [...products].sort(function(a, b){
+                                return b.releaseDate - a.releaseDate;
+                              });
+                              setProducts(sortedProducts);
+                            }
+                          }
+                        }
                           className={classNames(
                             option.current ? "font-medium text-gray-900" : "text-gray-500",
                             active ? "bg-gray-100" : "",
diff --git a/src/Components/ProductTable.jsx b/src/Components/ProductTable.jsx
index c222f5e..d29f003 100644
--- a/src/Components/ProductTable.jsx
+++ b/src/Components/ProductTable.jsx
@@ -39,14 +39,14 @@ export default function ProductTable({ cart, updateCart }) {
     let body = await res.json();
     setProducts(body);
     console.log(products);
-  },[]);
+  },[]); //This tells React that your effect doesn’t depend on any values from props or state, so it never needs to re-run
 
   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) => (
             <a key={product.id} className="group">

From e70b37bc9f59d8f7d7daa531650ceb9ae91149b6 Mon Sep 17 00:00:00 2001
From: snigdhasankhe <snigdhasankhe@gmail.com>
Date: Thu, 22 Dec 2022 19:02:39 +0530
Subject: [PATCH 3/6] Adding Filter functionality

---
 src/Components/ProductFilters.jsx | 49 +++++++++++++++++++++++++++----
 src/Components/ProductTable.jsx   | 36 +++++++++++++++++++++--
 2 files changed, 78 insertions(+), 7 deletions(-)

diff --git a/src/Components/ProductFilters.jsx b/src/Components/ProductFilters.jsx
index 287e45c..94d8fae 100644
--- a/src/Components/ProductFilters.jsx
+++ b/src/Components/ProductFilters.jsx
@@ -6,7 +6,12 @@ function classNames(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 
-export default function ProductFilters({ filterOptions, setFilterOptions, sortOptions, setSortOptions, products, setProducts  }) {
+let handleChange = () =>  {
+
+console.log("produucts"+products)
+
+}
+export default function ProductFilters({ filterOptions, setFilterOptions, sortOptions, setSortOptions, products, setProducts, getDefaultFilterOptions, count, setCount }) {
   return (
     <Disclosure
       as="section"
@@ -24,11 +29,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 +56,24 @@ 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)
+                        }
+                        
+                        // handleCount();
+                      } 
+                        
+                      }
                     />
                     <label htmlFor={`price-${optionIdx}`} className="ml-3 min-w-0 flex-1 text-gray-600">
                       {option.label}
@@ -68,7 +93,21 @@ 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)
+                        }
+                        console.log("inside"+products)
+                        // handleCount(optionIdx);
+                      } }
                     />
                     <label htmlFor={`color-${optionIdx}`} className="ml-3 min-w-0 flex-1 text-gray-600">
                       {option.label}
diff --git a/src/Components/ProductTable.jsx b/src/Components/ProductTable.jsx
index d29f003..0881803 100644
--- a/src/Components/ProductTable.jsx
+++ b/src/Components/ProductTable.jsx
@@ -27,25 +27,57 @@ 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);
-    console.log(products);
   },[]); //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 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]);
+
+    let isInBetween = (lower, higher, value) =>  {
+      if(lower.every(item => {console.log(value>=item); return value>=item}) && 
+      higher.every(item2 => 
+        {console.log(value+"---"+item2); console.log(value<=item2);
+        value<=item2}) ){
+        return true
+      }
+      else return false;
+      
+      }
   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, products, setProducts }} />
+        <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) => (

From 3d7688cffa820d926472a073d038aebcc2099411 Mon Sep 17 00:00:00 2001
From: snigdhasankhe <snigdhasankhe@gmail.com>
Date: Thu, 22 Dec 2022 19:35:14 +0530
Subject: [PATCH 4/6] adding Filter functionality(Price + color)

---
 src/Components/ProductFilters.jsx |  9 ---------
 src/Components/ProductTable.jsx   | 10 ----------
 2 files changed, 19 deletions(-)

diff --git a/src/Components/ProductFilters.jsx b/src/Components/ProductFilters.jsx
index 94d8fae..d27aa00 100644
--- a/src/Components/ProductFilters.jsx
+++ b/src/Components/ProductFilters.jsx
@@ -6,11 +6,6 @@ function classNames(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 
-let handleChange = () =>  {
-
-console.log("produucts"+products)
-
-}
 export default function ProductFilters({ filterOptions, setFilterOptions, sortOptions, setSortOptions, products, setProducts, getDefaultFilterOptions, count, setCount }) {
   return (
     <Disclosure
@@ -69,8 +64,6 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
                           let count1 = count>0?count-1:0
                           setCount(count1)
                         }
-                        
-                        // handleCount();
                       } 
                         
                       }
@@ -105,8 +98,6 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
                           let count1 = count>0?count-1:0
                           setCount(count1)
                         }
-                        console.log("inside"+products)
-                        // handleCount(optionIdx);
                       } }
                     />
                     <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 0881803..4ebcc9f 100644
--- a/src/Components/ProductTable.jsx
+++ b/src/Components/ProductTable.jsx
@@ -63,16 +63,6 @@ export default function ProductTable({ cart, updateCart }) {
       setProducts(newProducts)
     },[filterOptions]);
 
-    let isInBetween = (lower, higher, value) =>  {
-      if(lower.every(item => {console.log(value>=item); return value>=item}) && 
-      higher.every(item2 => 
-        {console.log(value+"---"+item2); console.log(value<=item2);
-        value<=item2}) ){
-        return true
-      }
-      else return false;
-      
-      }
   return (
     <div className="bg-white">
       <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8">

From 0d2e85d6589ee97da7c4b64b0ef5383c8265c3a6 Mon Sep 17 00:00:00 2001
From: snigdhasankhe <snigdhasankhe@gmail.com>
Date: Thu, 22 Dec 2022 19:48:49 +0530
Subject: [PATCH 5/6] adding filter functionallity.

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

diff --git a/src/Components/ProductTable.jsx b/src/Components/ProductTable.jsx
index 4ebcc9f..9ab554f 100644
--- a/src/Components/ProductTable.jsx
+++ b/src/Components/ProductTable.jsx
@@ -58,7 +58,7 @@ export default function ProductTable({ cart, updateCart }) {
         // 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})
+        newProducts = newProducts.filter(product => {return  product.price >= lowest && product.price <= highest});
       }
       setProducts(newProducts)
     },[filterOptions]);

From 1686b26c9ffb938b3bccf047b9eda2ce91b17e8b Mon Sep 17 00:00:00 2001
From: snigdhasankhe <snigdhasankhe@gmail.com>
Date: Fri, 23 Dec 2022 02:18:13 +0530
Subject: [PATCH 6/6] Adding Sort Functionality

---
 src/Components/ProductFilters.jsx | 25 ++++++++--------
 src/Components/ProductTable.jsx   | 49 +++++++++++++++++++++----------
 2 files changed, 47 insertions(+), 27 deletions(-)

diff --git a/src/Components/ProductFilters.jsx b/src/Components/ProductFilters.jsx
index d27aa00..bee261c 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, products, setProducts, getDefaultFilterOptions, count, setCount }) {
+export default function ProductFilters({ filterOptions, setFilterOptions, sortOptions, setSortOptions, products, setProducts, getDefaultFilterOptions, count, setCount}) {
   return (
     <Disclosure
       as="section"
@@ -134,23 +134,24 @@ 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={() => {
-                            if (option.name == 'Price') { // sorting based on Price
-                              let sortedProducts = [...products].sort(function (a, b) {
-                                return b.price - a.price;
-                              });
-                              setProducts(sortedProducts);
+                            let newSort = [...sortOptions];
+                            console.log(sortOptions)
+                            if(optionIdx == 0){
+                              newSort[0].current = true;
+                              newSort[1].current = false;
                             }
-                            if(option.name == 'Newest'){ // sorting based on releaseDate
-                              let sortedProducts = [...products].sort(function(a, b){
-                                return b.releaseDate - a.releaseDate;
-                              });
-                              setProducts(sortedProducts);
+                            if(optionIdx == 1){
+                              newSort[1].current = true;
+                              newSort[0].current = false;
                             }
+                            // newSort[optionIdx].current = !newSort[optionIdx].current;
+                            console.log(newSort)
+                            setSortOptions(newSort);
                           }
                         }
                           className={classNames(
diff --git a/src/Components/ProductTable.jsx b/src/Components/ProductTable.jsx
index 9ab554f..f0f9ce6 100644
--- a/src/Components/ProductTable.jsx
+++ b/src/Components/ProductTable.jsx
@@ -44,24 +44,43 @@ export default function ProductTable({ cart, updateCart }) {
     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 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){
+  useEffect(() => {
+    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});
+      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(newProducts)
-    },[filterOptions]);
+    }
+    setProducts(newProducts2)
+  },[sortOptions]);
 
   return (
     <div className="bg-white">