From c7560ca3737c3290e7b015fdc70f94d603a97975 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CIdika?=
 <“idika.ndukwe@mtn.comgit config --global user.email “Idika Ndukwe>
Date: Tue, 30 Sep 2025 15:55:46 -0400
Subject: [PATCH 1/2] Initial commit, for Product list changes

---
 src/ProductList.jsx | 41 +++++++++++++++++++++++++++++++++++++++--
 1 file changed, 39 insertions(+), 2 deletions(-)

diff --git a/src/ProductList.jsx b/src/ProductList.jsx
index 7682c04fc4..5014b03e59 100644
--- a/src/ProductList.jsx
+++ b/src/ProductList.jsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import addItem from './CartSlice';
 import './ProductList.css'
 import CartItem from './CartItem';
 function ProductList({ onHomeClick }) {
@@ -252,6 +253,16 @@ function ProductList({ onHomeClick }) {
         e.preventDefault();
         setShowCart(false);
     };
+
+    const handleAddToCart = (product) => {
+        dispatch(addItem(product)); 
+      
+        setAddedToCart((prevState) => ({ 
+          ...prevState, 
+          [product.name]: true, 
+        }));
+    };
+
     return (
         <div>
             <div className="navbar" style={styleObj}>
@@ -274,8 +285,34 @@ function ProductList({ onHomeClick }) {
             </div>
             {!showCart ? (
                 <div className="product-grid">
-
-
+                    {plantsArray.map((category, index) => ( // Loop through each category in plantsArray
+                    <div key={index}> {/* Unique key for each category div */}
+                        <h1>
+                        <div>{category.category}</div> {/* Display the category name */}
+                        </h1>
+                        <div className="product-list"> {/* Container for the list of plant cards */}
+                        {category.plants.map((plant, plantIndex) => ( // Loop through each plant in the current category
+                            <div className="product-card" key={plantIndex}> {/* Unique key for each plant card */}
+                            <img 
+                                className="product-image" 
+                                src={plant.image} // Display the plant image
+                                alt={plant.name} // Alt text for accessibility
+                            />
+                            <div className="product-title">{plant.name}</div> {/* Display plant name */}
+                            {/* Display other plant details like description and cost */}
+                            <div className="product-description">{plant.description}</div> {/* Display plant description */}
+                            <div className="product-cost">${plant.cost}</div> {/* Display plant cost */}
+                            <button
+                                className="product-button"
+                                onClick={() => handleAddToCart(plant)} // Handle adding plant to cart
+                            >
+                                Add to Cart
+                            </button>
+                            </div>
+                        ))}
+                        </div>
+                    </div>
+                    ))}
                 </div>
             ) : (
                 <CartItem onContinueShopping={handleContinueShopping} />

From 6b617113319b060991effd53354befdd73f7da06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CIdika?=
 <“idika.ndukwe@mtn.comgit config --global user.email “Idika Ndukwe>
Date: Tue, 30 Sep 2025 16:06:22 -0400
Subject: [PATCH 2/2] Second commit, for CartSlice.jsx changes

---
 src/CartSlice.jsx | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/CartSlice.jsx b/src/CartSlice.jsx
index 32b8761ed0..9ae4624223 100644
--- a/src/CartSlice.jsx
+++ b/src/CartSlice.jsx
@@ -7,13 +7,29 @@ export const CartSlice = createSlice({
   },
   reducers: {
     addItem: (state, action) => {
-    
+        const { name, image, cost } = action.payload; // Destructure product details from the action payload
+        // Check if the item already exists in the cart by comparing names
+        const existingItem = state.items.find(item => item.name === name);
+        if (existingItem) {
+            // If item already exists in the cart, increase its quantity
+            existingItem.quantity++;
+        } else {
+            // If item does not exist, add it to the cart with quantity 1
+            state.items.push({ name, image, cost, quantity: 1 });
+        }
     },
     removeItem: (state, action) => {
+        const { name, image, cost } = action.payload;
+        
+        state.items = state.items.filter(item => item.name !== action.payload);
     },
     updateQuantity: (state, action) => {
-
-    
+        const { name, quantity } = action.payload; // Destructure the product name and new quantity from the action payload
+        // Find the item in the cart that matches the given name
+        const itemToUpdate = state.items.find(item => item.name === name);
+        if (itemToUpdate) {
+        itemToUpdate.quantity = quantity; // If the item is found, update its quantity to the new value
+        }
     },
   },
 });