Update ProductList.jsx

src/ProductList.jsx

@@ -1,9 +1,13 @@
 import React, { useState,useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { addItem } from './CartSlice';
 import './ProductList.css'
 import CartItem from './CartItem';
+
 function ProductList() {
     const [showCart, setShowCart] = useState(false); 
     const [showPlants, setShowPlants] = useState(false); // State to control the visibility of the About Us page
+    const [addedToCart, setAddedToCart] = useState([]); // State to track added plants
 
     const plantsArray = [
         {
@@ -212,6 +216,45 @@ function ProductList() {
             ]
         }
     ];
+    useEffect(() => { 
+      // Fetch data from an API and update plantsArray 
+      fetch('/api/plants') 
+        .then(response => response.json()) 
+        .then(data => setPlantsArray(data)); 
+    }, []); // Empty dependency array means this runs once after the initial render
+
+    const handleAddToCart = (product) => {
+        dispatch(addItem(product)); // Use dispatch to add item
+        setAddedToCart((prevState) => ({
+           ...prevState,
+           [product.name]: true, // Set the product name as key and value as true to indicate it's added to cart
+         }));
+      };
+
+    return ( 
+    <div className="product-grid"> 
+        {plantsArray.map((category, index) => ( 
+            <div key={index}> 
+                <h1><div>{category.category}</div></h1> 
+                <div className="product-list"> 
+                    {category.plants.map((plant, plantIndex) => ( 
+                        <div className="product-card" key={plantIndex}> 
+                            <img className="product-image" src={plant.image} alt={plant.name} /> 
+                            <div className="product-title">{plant.name}</div> 
+                            <div className="product-description">{plant.description}</div> 
+                            <div className="product-cost">{plant.cost}</div> 
+                            <button className="product-button" onClick={() => handleAddToCart(plant)}>Add to Cart
+                              {addedToCart[plant.name] ? "Added to Cart" : "Add to Cart"}
+                            </button> 
+                          </div> 
+                        ))} 
+                    </div> 
+                  </div> 
+                ))} 
+                <CartItem /> {/* This is where you might use CartItem */}
+              </div> 
+);
+}    
    const styleObj={
     backgroundColor: '#4CAF50',
     color: '#fff!important',
@@ -268,14 +311,29 @@ const handlePlantsClick = (e) => {
         </div>
         {!showCart? (
         <div className="product-grid">
-
-
-        </div>
- ) :  (
-    <CartItem onContinueShopping={handleContinueShopping}/>
-)}
-    </div>
-    );
-}
+          {plantsArray.map((category, index) => ( 
+            <div key={index}> 
+              <h1><div>{category.category}</div></h1> 
+              <div className="product-list"> 
+                {category.plants.map((plant, plantIndex) => ( 
+                  <div className="product-card" key={plantIndex}> 
+                    <img className="product-image" src={plant.image} alt={plant.name} /> 
+                    <div className="product-title">{plant.name}</div> 
+                    <div className="product-description">{plant.description}</div> 
+                    <div className="product-cost">{plant.cost}</div> 
+                    <button className="product-button" onClick={() => handleAddToCart(plant)}> 
+                      {addedToCart[plant.name] ? "Added to Cart" : "Add to Cart"} 
+                    </button> 
+                  </div> 
+                ))} 
+              </div> 
+            </div> 
+        ))}
+      </div>
+   ) :  (
+     <CartItem onContinueShopping={handleContinueShopping}/>
+   )}
+ </div>
+);
 
 export default ProductList;