Fix cart and deploy

package.json

@@ -1,13 +1,16 @@
 {
-  "name": "shoppingcart",
+  "name": "e-plantshopping",
   "private": true,
   "version": "0.0.0",
+  "homepage": "https://kalana-03.github.io/e-plantShopping",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite build; vite preview --host"
+    "preview": "vite preview",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d dist"
   },
   "dependencies": {
     "@reduxjs/toolkit": "^2.2.3",

src/CartItem.jsx

@@ -9,29 +9,51 @@ const CartItem = ({ onContinueShopping }) => {
 
   // Calculate total amount for all products in the cart
   const calculateTotalAmount = () => {
-
+    let total = 0;
+
+    cart.forEach((item) =>{
+        const itemCost = parseFloat(item.cost.substring(1));
+        total += itemCost * item.quantity;
+    });
+
+    return total;
   };
 
   const handleContinueShopping = (e) => {
-
+    alert('Functionality to be added for future reference');
+    onContinueShopping();
   };
 
 
 
   const handleIncrement = (item) => {
+    dispatch(updateQuantity({ name: item.name, quantity: item.quantity + 1 }));
   };
 
   const handleDecrement = (item) => {
+    if (item.quantity > 1){
+        dispatch(updateQuantity({ name: item.name, quantity: item.quantity - 1 }));
+    } else {
+        dispatch(removeItem(item));
+    }
+
 
   };
 
   const handleRemove = (item) => {
+    dispatch(removeItem(item));
   };
 
   // Calculate total cost based on quantity for an item
   const calculateTotalCost = (item) => {
+    let total = 0;
+    const itemCost = parseFloat(item.cost.substring(1));
+    total = itemCost * item.quantity;
+
+    return total;
   };
 
+
   return (
     <div className="cart-container">
       <h2 style={{ color: 'black' }}>Total Cart Amount: ${calculateTotalAmount()}</h2>

src/CartSlice.jsx

@@ -3,16 +3,38 @@ import { createSlice } from '@reduxjs/toolkit';
 export const CartSlice = createSlice({
   name: 'cart',
   initialState: {
-    items: [], // Initialize items as an empty array
+    items: [],
+    numOfItems: 0// Initialize items as an empty array
   },
   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 });
+        }
+
+        state.numOfItems += 1;
     },
     removeItem: (state, action) => {
+        const {name, quantity} = action.payload;
+        state.items = state.items.filter(item => item.name !== name);
+        state.numOfItems -= quantity;
+
+        if(state.numOfItems < 0){
+            state.numOfItems = 0;
+        }
     },
     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,10 +1,15 @@
 import React, { useState, useEffect } from 'react';
 import './ProductList.css'
 import CartItem from './CartItem';
+import { addItem } from './CartSlice';
+import { useSelector, useDispatch } from 'react-redux';
+
 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 cart = useSelector((state) => state.cart);
+    const dispatch = useDispatch();
     const plantsArray = [
         {
             category: "Air Purifying Plants",
@@ -252,6 +257,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 +289,29 @@ function ProductList({ onHomeClick }) {
             </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.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</button>
+                                </div>
+      ))}
+    </div>
+  </div>
+))}
                 </div>
             ) : (
                 <CartItem onContinueShopping={handleContinueShopping} />

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()],
 })