Final Project

package.json

@@ -5,9 +5,11 @@
   "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"
+    "preview": "vite build && vite preview --host"
   },
   "dependencies": {
     "@reduxjs/toolkit": "^2.2.3",

src/CartItem.jsx

@@ -3,35 +3,48 @@ import { useSelector, useDispatch } from 'react-redux';
 import { 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 = () => {
-
-  };
+    return cart.reduce((total, item) => {
+      return total + parseFloat(calculateTotalCost(item));
+        }, 0).toFixed(2);
+    };
 
-  const handleContinueShopping = (e) => {
-
+  const handleContinueShopping = () => {
+    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.name));
+      }
+
   };
 
   const handleRemove = (item) => {
+    dispatch(removeItem(item.name));
   };
 
   // Calculate total cost based on quantity for an item
   const calculateTotalCost = (item) => {
+    return (parseFloat(item.cost.replace('$', '')) * item.quantity).toFixed(2);
   };
 
+
+
   return (
     <div className="cart-container">
       <h2 style={{ color: 'black' }}>Total Cart Amount: ${calculateTotalAmount()}</h2>
@@ -55,7 +68,7 @@ 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={handleContinueShopping}>Continue Shopping</button>
         <br />
         <button className="get-started-button1">Checkout</button>
       </div>
@@ -65,4 +78,3 @@ const CartItem = ({ onContinueShopping }) => {
 
 export default CartItem;
 
-

src/CartSlice.jsx

@@ -1,23 +1,44 @@
 import { createSlice } from '@reduxjs/toolkit';
 
+const initialState = {
+    items: [],
+    totalQuantity: 0,
+};
 export const CartSlice = createSlice({
   name: 'cart',
   initialState: {
     items: [], // 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.totalQuantity++;
     },
     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;
+        }
+
+
     },
   },
 });
 
+// Export the action creators
 export const { addItem, removeItem, updateQuantity } = CartSlice.actions;
 
+// Export the reducer as the default export
 export default CartSlice.reducer;

src/ProductList.jsx

@@ -1,9 +1,34 @@
 import React, { useState,useEffect } from 'react';
 import './ProductList.css'
 import CartItem from './CartItem';
+import { addItem } from './CartSlice';
+import { useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux'; // Import useDispatch
+
 function ProductList() {
+    const dispatch = useDispatch();
+    const cartItems = useSelector((state) => state.cart.items);
+
+
     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 totalQuantity = useSelector((state) => state.cart.totalQuantity); // Retrieve the total quantity
+
+    const handleAddToCart = (product) => {
+        // Dispatch the plant information to the Redux slice
+        dispatch(addItem(product));
+
+        // Update the addedToCart state to reflect the plant has been added
+        setAddedToCart((prevState) => ({
+            ...prevState,
+            [product.name]: true,
+        }));
+    }
+
+
+
 
     const plantsArray = [
         {
@@ -225,11 +250,11 @@ function ProductList() {
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    width: '1100px',
+    width: '200px',
    }
    const styleA={
     color: 'white',
-    fontSize: '30px',
+    fontSize: '20px',
     textDecoration: 'none',
    }
    const handleCartClick = (e) => {
@@ -242,8 +267,8 @@ const handlePlantsClick = (e) => {
     setShowCart(false); // Hide the cart when navigating to About Us
 };
 
-   const handleContinueShopping = (e) => {
-    e.preventDefault();
+   const handleContinueShopping = () => {
+
     setShowCart(false);
   };
     return (
@@ -263,12 +288,34 @@ 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> 
+
+
+                </h1></a></div>
+
             </div>
         </div>
         {!showCart? (
         <div className="product-grid">
+            {plantsArray.map((category, categoryIndex) => (
+                <div key={categoryIndex}>
+                    <h1><center>{category.category}</center></h1>
+                    <div className="product-list">
+                        {category.plants.map((plant, plantIndex)=>(
+                            <div key={plantIndex} className ='product-card'>
+                                <img className ="product-image" src={plant.image} alt={plant.name} />
+                                <div className='product-title'> {plant.name} </div>
+                                <p style={{ color: 'red' }}> {plant.cost}</p>
+                                <p>{plant.description}</p>
+                                <button className="product-button" onClick={() => handleAddToCart(plant)}> Add to Cart</button>
 
+                            </div>
+                        ))} 
+
+                    </div>
+
+                </div>
+            ))}
 
         </div>
  ) :  (

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