new work

package.json

@@ -5,6 +5,8 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d dist",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite build; vite preview --host"
@@ -23,7 +25,7 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
-    "gh-pages": "^6.1.1",
-    "vite": "^5.2.0"
+    "gh-pages": "^6.3.0",
+    "vite": "^7.1.9"
   }
 }

src/CartItem.jsx

@@ -1,35 +1,61 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { removeItem, updateQuantity } from './CartSlice';
+import { addItem, removeItem, updateQuantity } from './CartSlice';
 import './CartItem.css';
 
 const CartItem = ({ onContinueShopping }) => {
   const cart = useSelector(state => state.cart.items);
   const dispatch = useDispatch();
 
   // Calculate total amount for all products in the cart
+
   const calculateTotalAmount = () => {
-
-  };
+
+let total = 0;
+
+  cart.forEach((item) => {
+  const quantity = item.quantity;
+  const cost = parseFloat(item.cost.substring(1)); // removes "$" and converts to number
+  total += quantity * cost;
+});
+   return total.toFixed(2);
+    }
 
   const handleContinueShopping = (e) => {
+    alert('Functionality to be added for future reference');
 
   };
 
-
-
   const handleIncrement = (item) => {
+
+  /*const updatedItem = {...item, quantity: item.quantity + 1, };
+  dispatch(updateQuantity(updatedItem));*/
+  dispatch(addItem(item));
+  dispatch(updateQuantity(item));
+
   };
 
   const handleDecrement = (item) => {
 
-  };
+if (item.quantity > 1) {
+    dispatch(reduceItem(item));
+    dispatch(updateQuantity(item));
+  } else if (item.quantity === 1) {
+    dispatch(removeItem(item));
+      }
+    }
+
 
   const handleRemove = (item) => {
+    dispatch(removeItem(item.name));
   };
 
   // Calculate total cost based on quantity for an item
   const calculateTotalCost = (item) => {
+
+  const quantity = item.quantity;
+  const cost = parseFloat(item.cost.substring(1)); // removes "$" and converts to number
+  return (quantity * cost).toFixed(2); 
   };
 
   return (

src/CartSlice.jsx

@@ -7,16 +7,51 @@ 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 });
+  }
 
     },
+reduceItem: (state, action) => {
+  const { name } = action.payload;
+  const existingItem = state.items.find(item => item.name === name);
+
+  if (existingItem && existingItem.quantity > 1) {
+    existingItem.quantity--;
+  } else if (existingItem && existingItem.quantity === 1) {
+    const index = state.items.findIndex(item => item.name === name);
+    if (index !== -1) {
+      state.items.splice(index, 1); 
+    }
+  }
+}
+,
+
+
     removeItem: (state, action) => {
+      const name = 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
+}
+    }
 
 
     },
-  },
-});
+  );
 
 export const { addItem, removeItem, updateQuantity } = CartSlice.actions;
 

src/ProductList.jsx

@@ -1,10 +1,26 @@
 import React, { useState, useEffect } from 'react';
 import './ProductList.css'
 import CartItem from './CartItem';
+import { useSelector, useDispatch } from "react-redux";
+import { addItem, removeItem } 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 [addedToCart, setAddedToCart] = useState({});
+    const dispatch = useDispatch();
+
+
+    const handleAddToCart = (product) => {
+  dispatch(addItem(product)); // Dispatch the action to add the product to the cart (Redux action)
+
+  setAddedToCart((prevState) => ({ // Update the local state to reflect that the product has been added
+    ...prevState, // Spread the previous state to retain existing entries
+    [product.name]: true, // Set the current product's name as a key with value 'true' to mark it as added
+  }));
+};
 
+
     const plantsArray = [
         {
             category: "Air Purifying Plants",
@@ -212,6 +228,7 @@ function ProductList({ onHomeClick }) {
             ]
         }
     ];
+
     const styleObj = {
         backgroundColor: '#4CAF50',
         color: '#fff!important',
@@ -274,7 +291,31 @@ 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 style={{ textAlign: "center" }}>{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)} disabled={addedToCart[plant.name]}// Handle adding plant to cart
+                        >
+                           {addedToCart[plant.name] ? "Added" : "Add to Cart"}
+                        </button>
+        </div>
+      ))}
+    </div>
+  </div>
+))}
 
                 </div>
             ) : (

src/store.js

@@ -1,8 +1,12 @@
 import { configureStore } from '@reduxjs/toolkit';
 import cartReducer from './CartSlice';
+
+
  const store = configureStore({
     reducer: {
         cart: cartReducer,
+
     },
 });
 export default store
+

vite.config.js

@@ -3,6 +3,6 @@ import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  base: "/shoppingreact",
+  base: "/e-plantShopping",
   plugins: [react()],
 })