From 7455ced06e149eac089f8c46987144b956cfc02a Mon Sep 17 00:00:00 2001 From: alvyynm Date: Tue, 29 Oct 2024 13:36:39 +0300 Subject: [PATCH 01/10] fix: only display cartIcon in header at /shop --- src/components/Header.jsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 8338e67c..3956ef1a 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -68,13 +68,15 @@ function Header() { {/* mobile menu */}
- + {pathname === "/shop" && ( + + )}
{showNavlinks ? (
From 1e7132eb3b05d03492bbab7deeee001b9fbb84bb Mon Sep 17 00:00:00 2001 From: alvyynm Date: Tue, 29 Oct 2024 14:27:28 +0300 Subject: [PATCH 03/10] fix: remove space character after item URL in shop carousel --- src/pages/shop/sections/Banner/Carousal.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/shop/sections/Banner/Carousal.jsx b/src/pages/shop/sections/Banner/Carousal.jsx index d010902e..c84663da 100644 --- a/src/pages/shop/sections/Banner/Carousal.jsx +++ b/src/pages/shop/sections/Banner/Carousal.jsx @@ -85,7 +85,7 @@ function Carousel() { From KES {formatPrice(swagList[selectedIndex]?.price)}

Shop Now From 68105405713fb3e7507aaedca751d427b8889179 Mon Sep 17 00:00:00 2001 From: alvyynm Date: Tue, 29 Oct 2024 15:07:52 +0300 Subject: [PATCH 04/10] fix: display item categories in their color codes in the cart drawer --- src/components/shop/CartDrawer.jsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/shop/CartDrawer.jsx b/src/components/shop/CartDrawer.jsx index 319d04e0..7b2d8707 100644 --- a/src/components/shop/CartDrawer.jsx +++ b/src/components/shop/CartDrawer.jsx @@ -8,6 +8,7 @@ import { LazyLoadImage } from "react-lazy-load-image-component"; import { Link, useNavigate } from "react-router-dom"; import { useDeleteSwag } from "../../hooks/Mutations/shop/useCartSwagg"; import formatPrice from "../../utilities/formatPrice"; +import { categoryColors } from "../../utilities/utils"; function CartDrawer({ open, setOpen }) { const navigate = useNavigate(); @@ -148,7 +149,12 @@ function CartDrawer({ open, setOpen }) {
-

+

{cartProduct.category}

From 9e30747510424da7bbaf684dbcd8acab4f556095 Mon Sep 17 00:00:00 2001 From: alvyynm Date: Tue, 29 Oct 2024 15:33:27 +0300 Subject: [PATCH 05/10] feat: display cart items count besides the cart icon --- src/components/shop/CartIcon.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/shop/CartIcon.jsx b/src/components/shop/CartIcon.jsx index 348190c7..086458c2 100644 --- a/src/components/shop/CartIcon.jsx +++ b/src/components/shop/CartIcon.jsx @@ -4,11 +4,14 @@ import SectionWrapper from "./SectionWrapper"; function CartIcon() { return ( -
+
+
+

1

+
From 34a1facc08fa8d1b56c2790a5c7e729677e7df77 Mon Sep 17 00:00:00 2001 From: alvyynm Date: Tue, 29 Oct 2024 15:36:34 +0300 Subject: [PATCH 06/10] refactor: remove redundant style declarations --- src/components/shop/CartIcon.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/shop/CartIcon.jsx b/src/components/shop/CartIcon.jsx index 086458c2..c9b5faf7 100644 --- a/src/components/shop/CartIcon.jsx +++ b/src/components/shop/CartIcon.jsx @@ -9,8 +9,8 @@ function CartIcon() {
-
-

1

+
+

1

From e3e6787d7b98f7b84f7294e5930af477a8db92cf Mon Sep 17 00:00:00 2001 From: alvyynm Date: Tue, 29 Oct 2024 16:17:21 +0300 Subject: [PATCH 07/10] feat: display and keep track of cart items count in the cart icon --- src/components/shop/CartDrawer.jsx | 2 ++ src/components/shop/CartIcon.jsx | 28 +++++++++++++++++++++++++++- src/pages/shop/SingleItemPage.jsx | 2 ++ 3 files changed, 31 insertions(+), 1 deletion(-) diff --git a/src/components/shop/CartDrawer.jsx b/src/components/shop/CartDrawer.jsx index 7b2d8707..f4444008 100644 --- a/src/components/shop/CartDrawer.jsx +++ b/src/components/shop/CartDrawer.jsx @@ -65,6 +65,8 @@ function CartDrawer({ open, setOpen }) { const handleDeleteSwag = (cartItemId) => { removeSwagFromCart(cartItemId); deleteFromLocalStorage(cartItemId); + // dispatch custom event to notify cart change + window.dispatchEvent(new Event("swagListUpdated")); }; const handleCheckout = () => { diff --git a/src/components/shop/CartIcon.jsx b/src/components/shop/CartIcon.jsx index c9b5faf7..439a0027 100644 --- a/src/components/shop/CartIcon.jsx +++ b/src/components/shop/CartIcon.jsx @@ -1,7 +1,33 @@ +import { useEffect, useState } from "react"; import { MdAddShoppingCart } from "react-icons/md"; import SectionWrapper from "./SectionWrapper"; function CartIcon() { + const [cartProducts, setCartProducts] = useState(() => { + // Initialize state with the value from localStorage if it exists + const storedProducts = localStorage.getItem("swagList"); + return storedProducts ? JSON.parse(storedProducts) : []; + }); + + useEffect(() => { + // Event listener for storage changes in other tabs/windows + const handleStorageChange = (e) => { + const storedProducts = localStorage.getItem("swagList"); + setCartProducts(storedProducts ? JSON.parse(storedProducts) : []); + }; + + // Listen for "storage" events, whenever swagList is updated from another tab + window.addEventListener("storage", handleStorageChange); + // Listen for custom swagListUpdated events, fired whenever swagList is updated + window.addEventListener("swagListUpdated", handleStorageChange); + + // Cleanup event listeners on unmount + return () => { + window.removeEventListener("storage", handleStorageChange); + window.removeEventListener("swagListUpdated", handleStorageChange); + }; + }, []); + return (
@@ -10,7 +36,7 @@ function CartIcon() {
-

1

+

{cartProducts?.length}

diff --git a/src/pages/shop/SingleItemPage.jsx b/src/pages/shop/SingleItemPage.jsx index 47eb5f57..e0cf2c7f 100644 --- a/src/pages/shop/SingleItemPage.jsx +++ b/src/pages/shop/SingleItemPage.jsx @@ -128,6 +128,8 @@ export default function SingleItemPage() { }); // Add to local storage addToLocalStorage(); + // dispatch custom event to notify cart change + window.dispatchEvent(new Event("swagListUpdated")); // open cart setOpen(true); From a899901079dd205d403d4fc6a3d3cafde22b2550 Mon Sep 17 00:00:00 2001 From: alvyynm Date: Tue, 29 Oct 2024 16:20:11 +0300 Subject: [PATCH 08/10] feat: display cart count if there's at least one item --- src/components/shop/CartIcon.jsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/shop/CartIcon.jsx b/src/components/shop/CartIcon.jsx index 439a0027..b60c4af2 100644 --- a/src/components/shop/CartIcon.jsx +++ b/src/components/shop/CartIcon.jsx @@ -35,9 +35,11 @@ function CartIcon() {
-
-

{cartProducts?.length}

-
+ {cartProducts.length > 0 && ( +
+

{cartProducts?.length}

+
+ )}
From 26c3f3459d14b1365139ec0993bc8184999815b3 Mon Sep 17 00:00:00 2001 From: alvyynm Date: Tue, 29 Oct 2024 16:21:09 +0300 Subject: [PATCH 09/10] fix: linting issue --- src/components/shop/CartIcon.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/shop/CartIcon.jsx b/src/components/shop/CartIcon.jsx index b60c4af2..9a43d31d 100644 --- a/src/components/shop/CartIcon.jsx +++ b/src/components/shop/CartIcon.jsx @@ -11,7 +11,7 @@ function CartIcon() { useEffect(() => { // Event listener for storage changes in other tabs/windows - const handleStorageChange = (e) => { + const handleStorageChange = () => { const storedProducts = localStorage.getItem("swagList"); setCartProducts(storedProducts ? JSON.parse(storedProducts) : []); }; From 97757b858989567840b96e9190c3c3e824e59446 Mon Sep 17 00:00:00 2001 From: alvyynm Date: Tue, 29 Oct 2024 16:46:23 +0300 Subject: [PATCH 10/10] fix: slice product name in ProductCard if len exceeds 15 --- src/components/shop/ProductCard.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/shop/ProductCard.jsx b/src/components/shop/ProductCard.jsx index 61edd15a..cbd9ac00 100644 --- a/src/components/shop/ProductCard.jsx +++ b/src/components/shop/ProductCard.jsx @@ -35,7 +35,9 @@ function ProductCard({ product }) { className="flex justify-between pr-1" >

- {product.name} + {product.name.length > 15 + ? `${product.name.slice(0, 18)}...` + : product.name}

{totalStock > 0 ? (