diff --git a/package.json b/package.json
index b7d4c1d1d..8f1ca5b94 100644
--- a/package.json
+++ b/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",
diff --git a/src/CartItem.jsx b/src/CartItem.jsx
index e06317433..f55bea84d 100644
--- a/src/CartItem.jsx
+++ b/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 (
Total Cart Amount: ${calculateTotalAmount()}
@@ -55,7 +68,7 @@ const CartItem = ({ onContinueShopping }) => {
-
+
@@ -65,4 +78,3 @@ const CartItem = ({ onContinueShopping }) => {
export default CartItem;
-
diff --git a/src/CartSlice.jsx b/src/CartSlice.jsx
index 32b8761ed..5fcbac57a 100644
--- a/src/CartSlice.jsx
+++ b/src/CartSlice.jsx
@@ -1,5 +1,9 @@
import { createSlice } from '@reduxjs/toolkit';
+const initialState = {
+ items: [],
+ totalQuantity: 0,
+};
export const CartSlice = createSlice({
name: 'cart',
initialState: {
@@ -7,17 +11,34 @@ export const CartSlice = createSlice({
},
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;
diff --git a/src/ProductList.jsx b/src/ProductList.jsx
index 964b15d49..25e517203 100644
--- a/src/ProductList.jsx
+++ b/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) => {
{!showCart? (
+ {plantsArray.map((category, categoryIndex) => (
+
+
{category.category}
+
+ {category.plants.map((plant, plantIndex)=>(
+
+
+
{plant.name}
+
{plant.cost}
+
{plant.description}
+
+
+ ))}
+
+
+
+
+ ))}