From fe775637414c6da523882d4f96d6613173e5ccb8 Mon Sep 17 00:00:00 2001
From: Alex Tran <alextran8385@gmail.com>
Date: Tue, 29 Nov 2022 00:35:05 +1100
Subject: [PATCH 1/3] fixed subtotal

---
 package-lock.json       | 1 +
 src/Components/Cart.jsx | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

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..18d0c34 100644
--- a/src/Components/Cart.jsx
+++ b/src/Components/Cart.jsx
@@ -3,6 +3,10 @@ import { XIcon } from "@heroicons/react/outline";
 import React, { Fragment } from "react";
 
 export default function Cart({ open, setOpen, cart, updateCart }) {
+    var subtotal = 0;
+    cart.forEach(product => {
+    subtotal += product.price
+    })
   return (
     <Transition.Root show={open} as={Fragment}>
       <Dialog
@@ -105,7 +109,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}</p>
                     </div>
                     <p className="mt-0.5 text-sm text-gray-500">Shipping and taxes calculated at checkout.</p>
                     <div className="mt-6">

From 8cafa29d5442a4830fdaaa4685063979ef477aff Mon Sep 17 00:00:00 2001
From: Alex Tran <alextran8385@gmail.com>
Date: Tue, 29 Nov 2022 00:43:19 +1100
Subject: [PATCH 2/3] fixed infinite loop

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

diff --git a/src/Components/ProductTable.jsx b/src/Components/ProductTable.jsx
index ea76621..08d0dcf 100644
--- a/src/Components/ProductTable.jsx
+++ b/src/Components/ProductTable.jsx
@@ -41,8 +41,9 @@ 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">

From 2892ce81a3d43e60d3d571893fd96dad4282e6fa Mon Sep 17 00:00:00 2001
From: Alex Tran <alextran8385@gmail.com>
Date: Tue, 29 Nov 2022 19:20:01 +1100
Subject: [PATCH 3/3] fixed sort filtering

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

diff --git a/src/Components/ProductFilters.jsx b/src/Components/ProductFilters.jsx
index 0f3262a..0efe601 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, setProducts, products }) {
   return (
     <Disclosure
       as="section"
@@ -109,7 +109,20 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
                       {({ active }) => (
                         <button
                           onClick={() => {
-                            // TODO
+                            if(option.name == "Price"){
+                             setSortOptions(  
+                              [
+                                { name: "Price", current: true },
+                                { name: "Newest", current: false },
+                              ])
+                            }
+                            else{
+                              setSortOptions(  
+                                [
+                                  { name: "Price", current: false },
+                                  { name: "Newest", current: true },
+                                ])
+                            }
                           }}
                           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 08d0dcf..dcb5a03 100644
--- a/src/Components/ProductTable.jsx
+++ b/src/Components/ProductTable.jsx
@@ -28,7 +28,7 @@ const getDefaultSortOptions = () => {
 };
 
 export default function ProductTable({ cart, updateCart }) {
-  let [products, setProducts] = useState([]);
+  var [products, setProducts] = useState([]);
 
   const [filterOptions, setFilterOptions] = useState(getDefaultFilterOptions());
   const [sortOptions, setSortOptions] = useState(getDefaultSortOptions());
@@ -39,16 +39,34 @@ export default function ProductTable({ cart, updateCart }) {
       let res = await fetch("http://localhost:3001/products");
       let body = await res.json();
       setProducts(body);
+
+      for(let i = 0; i < sortOptions.length; i++){
+
+        if(sortOptions[i].name == "Price" && sortOptions[i].current == true){
+         (setProducts(products.sort((a, b) => a.price < b.price ? 1 : -1))) 
+         break;
+        }
+        else if(sortOptions[i].name == "Newest" && sortOptions[i].current == true){
+          (setProducts(products.sort((a, b) => a.releaseDate < b.releaseDate ? 1 : -1))) 
+          break;
+         }
+        }
+     
+
+     
     };
     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, setProducts, products }} />
 
         <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) => (