From ca49e13863655deba5db20d838a4277c41c9bc88 Mon Sep 17 00:00:00 2001
From: murtuza syed <murtuzasyed@MacBook-Pro.local>
Date: Wed, 11 Jan 2023 23:48:42 -0600
Subject: [PATCH 1/3] Fix: Infinite loop by passing empty array to useEffect

---
 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 ea76621..2dfa707 100644
--- a/src/Components/ProductTable.jsx
+++ b/src/Components/ProductTable.jsx
@@ -41,7 +41,7 @@ export default function ProductTable({ cart, updateCart }) {
       setProducts(body);
     };
     fetchProducts();
-  });
+  },[]);
 
   return (
     <div className="bg-white">

From c4fa9f2e964cc9ded902c3a601866f888604f7d4 Mon Sep 17 00:00:00 2001
From: murtuza syed <murtuzasyed@MacBook-Pro.local>
Date: Thu, 12 Jan 2023 13:28:54 -0600
Subject: [PATCH 2/3] Show Empty cart icon and message

---
 src/Components/Cart.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/Components/Cart.jsx b/src/Components/Cart.jsx
index 917b7a1..65d1b51 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 }) {
@@ -52,9 +52,10 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
                       </div>
                     </div>
 
+                    {cart.length === 0 && <div className="flex h-full flex-col items-center justify-center"><ShoppingCartIcon className="h-16 w-16"/><span className="pt-2">Your Cart is Empty.</span></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">
                               <div className="h-24 w-24 flex-shrink-0 overflow-hidden rounded-md border border-gray-200">

From 27adf5f3257e02b1e7641a07abe7fbad6792706d Mon Sep 17 00:00:00 2001
From: murtuza syed <murtuzasyed@MacBook-Pro.local>
Date: Thu, 12 Jan 2023 16:25:15 -0600
Subject: [PATCH 3/3] Update: Display cart count

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

diff --git a/src/Components/NavBar.jsx b/src/Components/NavBar.jsx
index b1d0db9..1f83db3 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, itemsInCart = 0 }) {
   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">{itemsInCart}</span>
                           <span className="sr-only">items in cart, view bag</span>
                         </button>
                       </div>
diff --git a/src/Pages/Home.jsx b/src/Pages/Home.jsx
index 1a5d5d9..31b9507 100644
--- a/src/Pages/Home.jsx
+++ b/src/Pages/Home.jsx
@@ -9,7 +9,7 @@ function Home() {
 
   return (
     <main>
-      <NavBar {...{ setOpen }} />
+      <NavBar {...{ itemsInCart: cart.length, setOpen }} />
       <Cart {...{ open, setOpen, cart, updateCart }} />
       <ProductTable {...{ cart, updateCart }} />
     </main>