Complete plant shopping project

src/CartItem.jsx

@@ -2,34 +2,40 @@ import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { removeItem, updateQuantity } from './CartSlice';
 import './CartItem.css';
+import PropTypes from 'prop-types';
 
 const CartItem = ({ onContinueShopping }) => {
   const cart = useSelector(state => state.cart.items);
   const dispatch = useDispatch();
 
   // Calculate total amount for all products in the cart
   const calculateTotalAmount = () => {
-
+    const totalAmount = cart.reduce((total, item)=> total+ item.quantity * parseFloat(item.cost.substring(1)) , 0)
+    return totalAmount
   };
 
   const handleContinueShopping = (e) => {
-
+    e.preventDefault()
+    onContinueShopping(e)
   };
 
 
 
   const handleIncrement = (item) => {
+    dispatch(updateQuantity({name: item.name, quantity: item.quantity+1}))
   };
 
   const handleDecrement = (item) => {
-
+    dispatch(updateQuantity({name: item.name, quantity: item.quantity-1}))
   };
 
   const handleRemove = (item) => {
+    dispatch(removeItem(item.name))
   };
 
   // Calculate total cost based on quantity for an item
   const calculateTotalCost = (item) => {
+    return item.quantity * parseFloat(item.cost.substring(1))
   };
 
   return (
@@ -57,12 +63,16 @@ const CartItem = ({ onContinueShopping }) => {
       <div className="continue_shopping_btn">
         <button className="get-started-button" onClick={(e) => handleContinueShopping(e)}>Continue Shopping</button>
         <br />
-        <button className="get-started-button1">Checkout</button>
+        <button className="get-started-button1" onClick={()=> alert('Coming soon')}>Checkout</button>
       </div>
     </div>
   );
 };
+CartItem.propTypes = {
+  onContinueShopping: PropTypes.func.isRequired,
+};
 
 export default CartItem;
 
 
+

src/CartSlice.jsx

@@ -7,12 +7,24 @@ export const CartSlice = createSlice({
   },
   reducers: {
     addItem: (state, action) => {
-
+      const {name, image, cost} = action.payload;
+      const exisitingItem = state.items.find((item)=> item.name === action.payload.name);
+      if(exisitingItem) {
+        exisitingItem.quantity++
+      }else {
+        state.items.push({name, image, cost, quantity:1})
+      }
     },
     removeItem: (state, action) => {
+      state.items = state.items.filter(item => item.name !== action.payload);  
     },
     updateQuantity: (state, action) => {
+      const {name, quantity} = action.payload;
 
+      const itemToUpdate = state.items.find(item=> item.name === name);
+      if(itemToUpdate) {
+        itemToUpdate.quantity = quantity
+      }
 
     },
   },

src/ProductList.css

@@ -164,6 +164,19 @@ body {
     color: white;
     display: flex;
 }
+
+.cartQuantity {
+    position: absolute;
+    margin-left: 25px;
+    margin-top: 20px;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+}
+
 .cart_quantity_count{
     margin-top: 16px;
     /* background-color: red; */
@@ -210,6 +223,10 @@ body {
     transition-duration: 0.4s;
     cursor: pointer;
   }
+  .product-button:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
 
   .product-button:hover {
     background-color: #45a049;
@@ -249,4 +266,4 @@ body {
       .ul div {
         text-align: center; /* Align text to the center */
       }
-  }
+  }

src/ProductList.jsx

@@ -1,9 +1,14 @@
 import React, { useState, useEffect } from 'react';
 import './ProductList.css'
 import CartItem from './CartItem';
+import { useDispatch, useSelector } from 'react-redux';
+import { addItem } from './CartSlice';
 function ProductList({ onHomeClick }) {
     const [showCart, setShowCart] = useState(false);
     const [showPlants, setShowPlants] = useState(false); // State to control the visibility of the About Us page
+    const cartItems = useSelector(state=> state.cart.items);
+
+    const dispatch = useDispatch()
 
     const plantsArray = [
         {
@@ -252,6 +257,14 @@ function ProductList({ onHomeClick }) {
         e.preventDefault();
         setShowCart(false);
     };
+
+    const handleAddToCart = (product) => {
+        dispatch(addItem(product))
+    };
+
+
+    const totalQuantity =  cartItems? cartItems.reduce((total, item)=> total+ item.quantity, 0): 0
+
     return (
         <div>
             <div className="navbar" style={styleObj}>
@@ -269,12 +282,28 @@ function ProductList({ onHomeClick }) {
                 </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 className='cartQuantity'>{totalQuantity}</span></h1></a></div>
                 </div>
             </div>
             {!showCart ? (
                 <div className="product-grid">
-
+                {plantsArray.map((category, index)=> (
+                    <div key={index}>
+                        <h1>{category.category}</h1>
+                        <div className="product-list">
+                            {category.plants.map((plant, idx) => (
+                                <div className="product-card" key={idx}>
+                                <img src={plant.image} alt={plant.name} className="product-image" />
+                                   <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" disabled={cartItems.some((item)=> item.name === plant.name)} onClick={()=> handleAddToCart(plant)}>{cartItems.some((item)=> item.name === plant.name)? 'Added to Cart': 'Add to Cart' }</button>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                ))}    
 
                 </div>
             ) : (