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 (
-
+
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() {
-
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 ? (