From 11eb91e3b6a7691d475b25b83c62f18f35969831 Mon Sep 17 00:00:00 2001
From: Roottoot <syuleiman@gmail.com>
Date: Sun, 21 Sep 2025 23:42:30 +0200
Subject: [PATCH 1/2] shopping cart fix

---
 frontend/src/components/Navbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index 5d0185b..d79801a 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -57,7 +57,7 @@ export function Navbar({user, setUser, discounts, setFilteredDiscounts,shoppingC
                 {user &&
                     <div onClick={navigateToUserPref} onKeyDown={handleKeyDown} role="button" tabIndex={0} className={"navbar-avatar-comp"}>
                         <img src={user.avatarUrl} alt={user.userName} className={"navbar-avatar"}/>
-                        {shoppingCart.length > 0 &&
+                        {shoppingCart!=null && shoppingCart.length > 0  &&
                             <span className={"item-number"}>
                                 {shoppingCart.length}
                             </span>

From 2216ec4e03fd2a1bf7dd1a12cf4579bdca5feb66 Mon Sep 17 00:00:00 2001
From: Roottoot <syuleiman@gmail.com>
Date: Mon, 22 Sep 2025 00:12:20 +0200
Subject: [PATCH 2/2] fix in case shopping cart was never initialized

---
 frontend/src/App.css                     |  7 +++++++
 frontend/src/components/DashbordCard.tsx |  6 +++---
 frontend/src/components/UserPref.tsx     | 11 +++++++----
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 53fe362..f5c554f 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -121,6 +121,13 @@ nav {
     gap: 1.5rem; /* Adjust the space between cards */
     padding: 1.5rem;
     justify-items: center; /* Center cards within their grid cell */
+
+    .no-cards{
+        align-items: center;
+        align-self: center;
+        justify-self: center;
+        text-align: center;
+    }
 }
 
 
diff --git a/frontend/src/components/DashbordCard.tsx b/frontend/src/components/DashbordCard.tsx
index 35c7bf8..4f8b068 100644
--- a/frontend/src/components/DashbordCard.tsx
+++ b/frontend/src/components/DashbordCard.tsx
@@ -17,7 +17,7 @@ export default function DashbordCard(props:Readonly<DashbordCardProps>) {
     // const [cartItems,setCartItems]=useState<string[]>(props.user.shoppingCart);
     function postAddToCart (addedElementForPreRender:string) {
         // adding the element early to render the button faster
-        props.setShoppingCart([... props.shoppingCart,addedElementForPreRender]);
+        props.setShoppingCart([...(props.shoppingCart || []),addedElementForPreRender]);
         // console.table([props.user.id,props.id]);
         axios.post("/api/changeCart",{
             userId: props.user.id,
@@ -30,14 +30,14 @@ export default function DashbordCard(props:Readonly<DashbordCardProps>) {
         }).catch(e => {
             console.error(e);
             // setting the value back in case it fails
-            props.setShoppingCart(props.shoppingCart.filter(id => id !== addedElementForPreRender));
+            props.setShoppingCart((props.shoppingCart || []).filter(id => id !== addedElementForPreRender));
         })
     }
 
     return (
         <div className={"card"}>
             <Card id={props.id} image={props.image} name={props.name} price={props.price} provider={props.provider}/>
-            {props.shoppingCart.includes(props.id)?
+            {props.shoppingCart!=null && props.shoppingCart.includes(props.id)?
                 <button className={"addedToCart"}><FaCheck /> Added to cart</button>
                 :
                 <button onClick={() => postAddToCart(props.id)}><MdAddShoppingCart /> Add to cart</button>
diff --git a/frontend/src/components/UserPref.tsx b/frontend/src/components/UserPref.tsx
index a3d51d4..b5818ec 100644
--- a/frontend/src/components/UserPref.tsx
+++ b/frontend/src/components/UserPref.tsx
@@ -7,13 +7,16 @@ import UserPrefCard from "./UserPrefCard.tsx";
 type UserPrefProps = {
     user: userInfoType,
     discounts: DiscountInfoType[],
-    shoppingCart: string[]
+    shoppingCart: string[],
     setShoppingCart:(shoppingCart:string[])=>void
 }
 
 export default function UserPref({user, discounts, shoppingCart,setShoppingCart}: Readonly<UserPrefProps>) {
     const nav = useNavigate();
-    const userSavedDiscounts = discounts.filter(discount => shoppingCart.includes(discount.id));
+    let userSavedDiscounts;
+    if(shoppingCart){
+        userSavedDiscounts = discounts.filter(discount => shoppingCart.includes(discount.id));
+    }
 
     return (
         <div>
@@ -24,7 +27,7 @@ export default function UserPref({user, discounts, shoppingCart,setShoppingCart}
                 <h2>Your saved discounts:</h2>
             </div>
             <div className={"card-grid"}>
-                {userSavedDiscounts.length > 0 ?
+                {userSavedDiscounts && userSavedDiscounts.length > 0 ?
                     userSavedDiscounts.map(
                         (discount: DiscountInfoType) => (
                             <UserPrefCard key={discount.id}
@@ -35,7 +38,7 @@ export default function UserPref({user, discounts, shoppingCart,setShoppingCart}
                                           provider={discount.provider}
                                           user={user}
                                           shoppingCart={shoppingCart}
-                                          setShoppingCart={setShoppingCart}/>)) : <p>You have no saved discounts yet.</p>
+                                          setShoppingCart={setShoppingCart}/>)) : <p className={"no-cards"}>You have no saved discounts yet.</p>
                 }
             </div>
         </div>