diff --git a/src/CartItem.jsx b/src/CartItem.jsx
index e06317433..7671caef4 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 }) => {
-
+
@@ -63,6 +76,4 @@ const CartItem = ({ onContinueShopping }) => {
);
};
-export default CartItem;
-
-
+export default CartItem;
\ No newline at end of file
diff --git a/src/CartSlice.jsx b/src/CartSlice.jsx
index 32b8761ed..d1359340c 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 default CartSlice.reducer;
+// Export the reducer as the default export
+export default CartSlice.reducer;
\ No newline at end of file
diff --git a/src/ProductList.jsx b/src/ProductList.jsx
index 964b15d49..598160b16 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 = [
{
@@ -242,8 +267,7 @@ 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 +287,34 @@ const handlePlantsClick = (e) => {
{!showCart? (
+ {plantsArray.map((category, categoryIndex) => (
+
+
{category.category}
+
+ {category.plants.map((plant, plantIndex)=>(
+
+
+
{plant.name}
+
{plant.cost}
+
{plant.description}
+
+
+
+ ))}
+
+
+
+ ))}