diff --git a/src/CartItem.jsx b/src/CartItem.jsx index e06317433f..c6b0b75c6e 100644 --- a/src/CartItem.jsx +++ b/src/CartItem.jsx @@ -3,35 +3,44 @@ import { useSelector, useDispatch } from 'react-redux'; import { removeItem, updateQuantity } from './CartSlice'; import './CartItem.css'; -const CartItem = ({ onContinueShopping }) => { +const CartItem = ({ onContinueShopping, onRemoveFromCart }) => { const cart = useSelector(state => state.cart.items); const dispatch = useDispatch(); // Calculate total amount for all products in the cart const calculateTotalAmount = () => { - - }; - - const handleContinueShopping = (e) => { - + let total = 0; + cart.forEach(item => { + total += parseFloat(item.cost.substring(1)) * item.quantity; + }); + return total; }; + const handleCheckoutShopping = (e) => { + alert('Functionality to be added for future reference'); + }; 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)); + onRemoveFromCart(item.name); }; // Calculate total cost based on quantity for an item const calculateTotalCost = (item) => { + return parseFloat(item.cost.substring(1)) * item.quantity; }; + + return (

Total Cart Amount: ${calculateTotalAmount()}

@@ -55,9 +64,9 @@ const CartItem = ({ onContinueShopping }) => {
- +
- +
); diff --git a/src/CartSlice.jsx b/src/CartSlice.jsx index 32b8761ed0..b774e245ab 100644 --- a/src/CartSlice.jsx +++ b/src/CartSlice.jsx @@ -3,17 +3,26 @@ import { createSlice } from '@reduxjs/toolkit'; export const CartSlice = createSlice({ name: 'cart', initialState: { - items: [], // Initialize items as an empty array + items: [], }, 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) => { + state.items = state.items.filter(item => item.name !== action.payload); }, updateQuantity: (state, action) => { - - + const itemToUpdate = state.items.find(item => item.name === action.payload.name); + if (itemToUpdate) { + itemToUpdate.quantity = action.payload.quantity; + } }, }, }); diff --git a/src/ProductList.css b/src/ProductList.css index 52f9c7a84f..0a17ba29a8 100644 --- a/src/ProductList.css +++ b/src/ProductList.css @@ -47,6 +47,13 @@ body { align-items: center; justify-content: center; } + +.name-category{ + display: flex; + justify-content: center; + margin-top: 20px; +} + .product-list { display: flex; flex-wrap: wrap; diff --git a/src/ProductList.jsx b/src/ProductList.jsx index 7682c04fc4..de5969cc1d 100644 --- a/src/ProductList.jsx +++ b/src/ProductList.jsx @@ -1,11 +1,18 @@ import React, { useState, useEffect } from 'react'; import './ProductList.css' import CartItem from './CartItem'; +import { useDispatch, useSelector } from 'react-redux'; +import { addItem,removeItem,updateQuantity } 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 cart = useSelector(state => state.cart.items); + - const plantsArray = [ + const plantsArray = [ { category: "Air Purifying Plants", plants: [ @@ -231,6 +238,7 @@ function ProductList({ onHomeClick }) { color: 'white', fontSize: '30px', textDecoration: 'none', + marginLeft: '20px', } const handleHomeClick = (e) => { @@ -250,37 +258,145 @@ function ProductList({ onHomeClick }) { const handleContinueShopping = (e) => { e.preventDefault(); + setShowPlants(true); setShowCart(false); }; - return ( -
-
-
-
- - handleHomeClick(e)}> -
-

Paradise Nursery

- Where Green Meets Serenity -
- -
+ const dispatch = useDispatch(); + + const handleAddToCart = (plant) => { + dispatch(addItem(plant)); + setAddedToCart((prevState) => ({...prevState, [plant.name]: true})); + } + + const totalItemsQuantity = (item) => { + let total = 0; + cart.forEach(item => { + total += item.quantity; + }); + return total; + } + + const handleRemoveFromCart = (plantName) => { + setAddedToCart((prevState) => ({ ...prevState, [plantName]: false })); + }; + + return ( +
+
+ + + {!showCart ? ( +
+ {plantsArray.map((category, index) => { + return ( +
+

+
+

{category.category}

+
+

+
+ {category.plants.map((plant, plantIndex) => ( +
+ {plant.name} +
{plant.name}
+
+ {plant.description} +
+
${plant.cost}
+ +
+ ))} +
- ) : ( - - )} -
+ ); + }) + } +
+ ) : ( + + )} +
); } diff --git a/vercel.json b/vercel.json new file mode 100644 index 0000000000..b4032a7491 --- /dev/null +++ b/vercel.json @@ -0,0 +1,9 @@ +{ + "cleanUrls": true, + "rewrites": [ + { + "source": "/((?!assets/|static/|favicon.ico|robots.txt).*)", + "destination": "/index.html" + } + ] +} diff --git a/vite.config.js b/vite.config.js index 4d190ae430..5daf8c5c0a 100644 --- a/vite.config.js +++ b/vite.config.js @@ -3,6 +3,6 @@ import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ - base: "/shoppingreact", + base: "./", plugins: [react()], })