E-plant React Final Project

src/CartItem.jsx

@@ -8,29 +8,53 @@ const CartItem = ({ onContinueShopping }) => {
   const dispatch = useDispatch();
 
   // Calculate total amount for all products in the cart
-  const calculateTotalAmount = () => {
-
-  };
+const calculateTotalAmount = () => {
+  return cart.reduce((total, item) => {
+    // Convert the item cost to a numeric value by removing "$" and parsing it
+    const unitCost = parseFloat(item.cost.replace('$', ''));
+    // Add the total cost for the current item (unitCost * quantity) to the running total
+    return total + unitCost * item.quantity;
+  }, 0).toFixed(2); // Return the final result rounded to 2 decimal places
+};
+
 
-  const handleContinueShopping = (e) => {
-
+
+  const handleCheckoutShopping = (e) => {
+    console.log(" inside handle checkout");
+    alert('Functionality to be added for future reference');
   };
 
 
 
   const handleIncrement = (item) => {
+    const newQuantity = item.quantity + 1;
+    dispatch(updateQuantity({ name: item.name, quantity: newQuantity }));
   };
 
+  // Handle Decrement
   const handleDecrement = (item) => {
-
+    if (item.quantity > 1) {
+      const newQuantity = item.quantity - 1;
+      dispatch(updateQuantity({ name: item.name, quantity: newQuantity }));
+    } else {
+      // If quantity is 1, remove the item
+      dispatch(removeItem({ name: item.name }));
+    }
   };
 
   const handleRemove = (item) => {
+    console.log(" insdie remove item");
+    dispatch(removeItem({ name: item.name }));
   };
-
   // Calculate total cost based on quantity for an item
-  const calculateTotalCost = (item) => {
+// Calculate total cost based on quantity for an item
+const calculateTotalCost = (item) => {
+    console.log(item);
+    // Parse the cost to remove the "$" symbol and convert to a number
+    const unitCost = parseFloat(item.cost.replace('$', ''));
+    return (unitCost * item.quantity).toFixed(2); // Multiply by quantity and fix to 2 decimal places
   };
+
 
   return (
     <div className="cart-container">
@@ -55,9 +79,9 @@ const CartItem = ({ onContinueShopping }) => {
       </div>
       <div style={{ marginTop: '20px', color: 'black' }} className='total_cart_amount'></div>
       <div className="continue_shopping_btn">
-        <button className="get-started-button" onClick={(e) => handleContinueShopping(e)}>Continue Shopping</button>
+        <button className="get-started-button" onClick={onContinueShopping}>Continue Shopping</button>
         <br />
-        <button className="get-started-button1">Checkout</button>
+        <button className="get-started-button1" onClick={handleCheckoutShopping}>Checkout</button>
       </div>
     </div>
   );

src/CartSlice.jsx

@@ -7,14 +7,28 @@ export const CartSlice = createSlice({
   },
   reducers: {
     addItem: (state, action) => {
-
-    },
+        const { name, image, cost } = action.payload;
+        const existingItem = state.items.find(item => item.name === name);
+        if (existingItem) {
+          existingItem.quantity++;
+        } else {
+          state.items.push({ name, image, cost, quantity: 1 });
+        }
+      },
     removeItem: (state, action) => {
+        console.log("inside remove items parent");
+        console.log(action.payload);
+        console.log(state.items);
+state.items = state.items.filter(item => item.name !== action.payload.name);
+        console.log(state.items);
     },
     updateQuantity: (state, action) => {
-
-
-    },
+        const { name, quantity } = action.payload;
+        const itemToUpdate = state.items.find(item => item.name === name);
+        if (itemToUpdate) {
+          itemToUpdate.quantity = quantity;
+        }
+      },
   },
 });
 

src/ProductList.jsx

@@ -1,9 +1,17 @@
 import React, { useState,useEffect } from 'react';
 import './ProductList.css'
 import CartItem from './CartItem';
+import { addItem,removeItem,updateQuantity } from './CartSlice';
+import { useDispatch } from 'react-redux';
+import { useSelector } from 'react-redux';
 function ProductList() {
+    const dispatch = useDispatch(); // Initialize dispatch
     const [showCart, setShowCart] = useState(false); 
     const [showPlants, setShowPlants] = useState(false); // State to control the visibility of the About Us page
+    const [addedToCart, setAddedToCart] = useState({});
+
+    const cartItems = useSelector((state) => state.cart.items); // Assuming `cart.items` contains an array of cart items
+    const cartItemCount = cartItems.reduce((total, item) => total + item.quantity, 0);
 
     const plantsArray = [
         {
@@ -246,7 +254,17 @@ const handlePlantsClick = (e) => {
     e.preventDefault();
     setShowCart(false);
   };
-    return (
+
+  const handleAddToCart = (product) => {
+    console.log("INSIDE HANDLE CARD");
+    dispatch(addItem(product));
+    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>
              <div className="navbar" style={styleObj}>
             <div className="tag">
@@ -263,12 +281,54 @@ const handlePlantsClick = (e) => {
             </div>
             <div style={styleObjUl}>
                 <div> <a href="#" onClick={(e)=>handlePlantsClick(e)} style={styleA}>Plants</a></div>
-                <div> <a href="#" onClick={(e) => handleCartClick(e)} style={styleA}><h1 className='cart'><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" id="IconChangeColor" height="68" width="68"><rect width="156" height="156" fill="none"></rect><circle cx="80" cy="216" r="12"></circle><circle cx="184" cy="216" r="12"></circle><path d="M42.3,72H221.7l-26.4,92.4A15.9,15.9,0,0,1,179.9,176H84.1a15.9,15.9,0,0,1-15.4-11.6L32.5,37.8A8,8,0,0,0,24.8,32H8" fill="none" stroke="#faf9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" id="mainIconPathAttribute"></path></svg></h1></a></div>
+                <div> <a href="#" onClick={(e) => handleCartClick(e)} style={styleA}><h1 className='cart'><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" id="IconChangeColor" height="68" width="68"><rect width="156" height="156" fill="none"></rect><circle cx="80" cy="216" r="12"></circle><circle cx="184" cy="216" r="12"></circle><path d="M42.3,72H221.7l-26.4,92.4A15.9,15.9,0,0,1,179.9,176H84.1a15.9,15.9,0,0,1-15.4-11.6L32.5,37.8A8,8,0,0,0,24.8,32H8" fill="none" stroke="#faf9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" id="mainIconPathAttribute"></path></svg>
+                <span
+                                    style={{
+                                        position: 'absolute',
+                                        top: '10px',
+                                        right: '15px',
+                                        backgroundColor: 'red',
+                                        color: 'white',
+                                        borderRadius: '50%',
+                                        padding: '5px 10px',
+                                        fontSize: '14px',
+                                    }}
+                                >
+                                    {cartItemCount}
+                                </span></h1></a></div>
             </div>
         </div>
         {!showCart? (
         <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.cost}</div>
+                <div className="product-title">{plant.name}</div>
+                {/*Similarly like the above plant.name show other details like description and cost*/}
+                <button
+                                        className="product-button"
+                                        onClick={() => handleAddToCart(plant)}
+                                        disabled={addedToCart[plant.name]}
+                                        style={{
+                                            backgroundColor: addedToCart[plant.name] ? 'grey' : '#4CAF50',
+                                            color: addedToCart[plant.name] ? '#fff' : '#000',
+                                            cursor: addedToCart[plant.name] ? 'not-allowed' : 'pointer',
+                                        }}
+                                    >
+                                        {addedToCart[plant.name]
+                                            ? 'Added to Cart'
+                                            : 'Add to Cart'}
+                                    </button>
+            </div>
+            ))}
+        </div>
+    </div>
+    ))}
 
         </div>
  ) :  (