From d7ef59f2a6dd6c9d0716cc40a004e04ed4cf55a6 Mon Sep 17 00:00:00 2001
From: oscar <oscarzhou0727@icloud.com>
Date: Sat, 18 Mar 2023 13:15:41 +1300
Subject: [PATCH] utilize cart context for header cart button

---
 src/components/Layout/HeaderCartButton.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/Layout/HeaderCartButton.js b/src/components/Layout/HeaderCartButton.js
index f67b123..f20888b 100644
--- a/src/components/Layout/HeaderCartButton.js
+++ b/src/components/Layout/HeaderCartButton.js
@@ -1,14 +1,22 @@
 import CartIcon from "../Cart/CartIcon";
 import classes from "./HeaderCartButton.module.css";
+import CartContext from "../../store/cart-context";
+import { useContext } from "react";
 
 const HeaderCartButton = (props) => {
+  const cartCtx = useContext(CartContext);
+
+  const numberOfCartItems = cartCtx.items.reduce((curNumber, item) => {
+    return curNumber + item.amount;
+  }, 0);
+
   return (
     <button className={classes.button} onClick={props.onShowCart}>
       <span className={classes.icon}>
         <CartIcon />
       </span>
       <span>Your Cart</span>
-      <span className={classes.badge}>3</span>
+      <span className={classes.badge}>{numberOfCartItems}</span>
     </button>
   );
 };