MyOwn

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
+        }
     },
   },
 });

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} />