From 4cd41aa0ca30309f7fd7ae9ee01e2934fcefd5b2 Mon Sep 17 00:00:00 2001
From: Saurabh Shukla <saurabhshukla689@gmail.com>
Date: Wed, 2 Oct 2024 18:32:17 +0530
Subject: [PATCH] display the cart size in header

---
 frontend/src/components/Header.js | 10 ++++++++--
 frontend/src/localStorage.js      |  3 +++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
index 779fe1c..04f8c5b 100644
--- a/frontend/src/components/Header.js
+++ b/frontend/src/components/Header.js
@@ -1,10 +1,12 @@
-import { getUserInfo } from '../localStorage';
+import { getCartItems, getUserInfo } from '../localStorage';
 import { parseRequestUrl } from '../utils';
 
 const Header = {
   render: () => {
     const { name, isAdmin } = getUserInfo();
     const { value } = parseRequestUrl();
+    const totalCartItems = JSON.parse(localStorage.cartItems)[0]===undefined?'':JSON.parse(localStorage.cartItems)[0].qty
+    const textAppendedAfterCart = totalCartItems>0?`(${totalCartItems})`:'';
     return ` 
   <div class="brand">
     <button id="aside-open-button">
@@ -24,11 +26,15 @@ const Header = {
       ? `<a href="/#/profile">${name}</a>`
       : `<a href="/#/signin">Sign-In</a>`
   }    
-    <a href="/#/cart">Cart</a>
+    <a href="/#/cart">Cart${textAppendedAfterCart}</a>
     ${isAdmin ? `<a href="/#/dashboard">Dashboard</a>` : ''}
   </div>`;
   },
   after_render: () => {
+    window.addEventListener('cartUpdated', () => {
+      // Re-render the header when the cart is updated
+      document.getElementById('header-container').innerHTML = Header.render();
+    });
     document
       .getElementById('search-form')
       .addEventListener('submit', async (e) => {
diff --git a/frontend/src/localStorage.js b/frontend/src/localStorage.js
index d24dc55..96b33c5 100644
--- a/frontend/src/localStorage.js
+++ b/frontend/src/localStorage.js
@@ -6,6 +6,9 @@ export const getCartItems = () => {
 };
 export const setCartItems = (cartItems) => {
   localStorage.setItem('cartItems', JSON.stringify(cartItems));
+  console.log("cart is set");
+  window.dispatchEvent(new CustomEvent('cartUpdated'));
+
 };
 export const setUserInfo = ({
   _id = '',