From 1849ea228a8155d9dc62e7c263dd0c1337e60dc8 Mon Sep 17 00:00:00 2001 From: LokinCLTD Date: Tue, 2 Dec 2025 14:49:45 -0300 Subject: [PATCH 1/2] Add new features and respositivy --- src/CartSlice.jsx | 18 ++++++++++++++---- src/ProductList.jsx | 38 ++++++++++++++++++++++++++++++++++++-- 2 files changed, 50 insertions(+), 6 deletions(-) diff --git a/src/CartSlice.jsx b/src/CartSlice.jsx index 32b8761ed0..b18efa2457 100644 --- a/src/CartSlice.jsx +++ b/src/CartSlice.jsx @@ -7,14 +7,24 @@ export const CartSlice = createSlice({ }, reducers: { addItem: (state, action) => { - + const { name, image, cost } = action.payload; // Destructure product details from action payload + const existingItem = state.items.find((item) => item.name === name); // Check if the item already exists in the cart + if (existingItem) { + existingItem.quantity += 1; // If it exists, increment the quantity + } else { + state.items.push({ name, image, cost, quantity: 1 }); // If not, add the new item with quantity 1 + } }, removeItem: (state, action) => { + state.items = state.items.filter((item) => item.name !== action.payload.name); // Remove item by filtering it out }, updateQuantity: (state, action) => { - - - }, + const { name, quantity } = action.payload; // Destructure name and new quantity from action payload + const itemToUpdate = state.items.find(item => item.name === name); // Find the item to update + if (itemToUpdate) { + itemToUpdate.quantity = quantity; // Update the quantity if the item exists + } + } }, }); diff --git a/src/ProductList.jsx b/src/ProductList.jsx index 7682c04fc4..ea574615c0 100644 --- a/src/ProductList.jsx +++ b/src/ProductList.jsx @@ -4,7 +4,7 @@ import CartItem from './CartItem'; 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 plantsArray = [ { category: "Air Purifying Plants", @@ -247,7 +247,13 @@ function ProductList({ onHomeClick }) { setShowPlants(true); // Set showAboutUs to true when "About Us" link is clicked setShowCart(false); // Hide the cart when navigating to About Us }; - + const handleAddToCart = (product) => { + dispatchEvent(addItem(product)); // Dispatch the addItem action with the selected product + setAddedToCart((prevState) => ({ // Update state to mark the product as added to cart + ...prevState, // Preserve previous state + [product.name]: true, // Mark the current product as added to cart + })); + } const handleContinueShopping = (e) => { e.preventDefault(); setShowCart(false); @@ -274,6 +280,34 @@ function ProductList({ onHomeClick }) { {!showCart ? (
+ {plantsArray.map((category, index) => ( +
+

+
{category.category}
{/* Category Title */} +

+
{/* Container for products in the category */} + {category.plants.map((plant, plantIndex) => ( +
+ {plant.name} +
{plant.name}
+
{plant.description}
+
{plant.cost}
+ +
+ ))} +
+
+ ) + )}
From a75233bb04c739c23d4ebd3fdbf939defa8f5d4a Mon Sep 17 00:00:00 2001 From: LokinCLTD Date: Tue, 2 Dec 2025 21:45:08 -0300 Subject: [PATCH 2/2] Implemented cart item count, add, remove e delete item from the cart --- src/CartItem.jsx | 54 +++++++++++++++++++++++++++++++++++++-------- src/CartSlice.jsx | 6 ++++- src/ProductList.jsx | 28 +++++++++++++++++++---- 3 files changed, 74 insertions(+), 14 deletions(-) diff --git a/src/CartItem.jsx b/src/CartItem.jsx index e06317433f..f8c558504f 100644 --- a/src/CartItem.jsx +++ b/src/CartItem.jsx @@ -1,36 +1,73 @@ +/* eslint-disable no-unused-vars */ import React from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { removeItem, updateQuantity } from './CartSlice'; import './CartItem.css'; +// eslint-disable-next-line react/prop-types const CartItem = ({ onContinueShopping }) => { const cart = useSelector(state => state.cart.items); const dispatch = useDispatch(); // Calculate total amount for all products in the cart const calculateTotalAmount = () => { - + let total = 0; + cart.forEach(item => { + const quantity = item.quantity || 1; // Default to 1 if quantity is undefined + const costString = item.cost || '$0'; // Default to '$0' if cost is undefined + const costNumber = parseFloat(costString.replace(/[^0-9.]/g,'')); // Remove '$' and convert to number + const subtotal = costNumber * quantity; + total += subtotal; + }); + return total.toFixed(2); // Return total amount rounded to 2 decimal places }; - +// Handle continue shopping button click const handleContinueShopping = (e) => { + if (onContinueShopping) { + onContinueShopping(e); + } }; +// Handle checkout button click + const checkoutShopping = (e) => { + alert('Functionality to be added in future updates.'); + }; - - +// Increment item quantity const handleIncrement = (item) => { + dispatch(updateQuantity({ + name: item.name, + quantity: (item.quantity || 1) + 1 + })); }; - +// Decrement item quantity const handleDecrement = (item) => { - + if (item.quantity > 1) { + dispatch(updateQuantity({ + name: item.name, + quantity: (item.quantity || 1) - 1 + })); + } else { + dispatch(removeItem(item.name)); + } }; - +// Remove item from cart const handleRemove = (item) => { + dispatch(removeItem(item.name)); }; // Calculate total cost based on quantity for an item const calculateTotalCost = (item) => { + const quantity = item.quantity || 1; // Default to 1 if quantity is undefined + const costString = item.cost || '$0'; // Default to '$0' if cost is undefined + const costNumber = parseFloat(costString.replace(/[^0-9.]/g,'')); // Remove '$' and convert to number + const totalCost = costNumber * quantity; + return (costNumber * quantity).toFixed(2); // Return total cost rounded to 2 decimal places }; + const calculateTotalQuantity = () => { + // eslint-disable-next-line no-undef + return CartItems ? CartItems.rerduce((total, item) => total + item.quantity, 0) : 0; + } return (
@@ -57,7 +94,7 @@ const CartItem = ({ onContinueShopping }) => {

- +
); @@ -65,4 +102,3 @@ const CartItem = ({ onContinueShopping }) => { export default CartItem; - diff --git a/src/CartSlice.jsx b/src/CartSlice.jsx index b18efa2457..a83344e962 100644 --- a/src/CartSlice.jsx +++ b/src/CartSlice.jsx @@ -16,7 +16,9 @@ export const CartSlice = createSlice({ } }, removeItem: (state, action) => { - state.items = state.items.filter((item) => item.name !== action.payload.name); // Remove item by filtering it out + // eslint-disable-next-line no-unused-vars + const itemName = action.payload; // Get the name of the item to be removed from action payload + state.items = state.items.filter((item) => item.name !== itemName); // Remove item by filtering it out }, updateQuantity: (state, action) => { const { name, quantity } = action.payload; // Destructure name and new quantity from action payload @@ -24,10 +26,12 @@ export const CartSlice = createSlice({ if (itemToUpdate) { itemToUpdate.quantity = quantity; // Update the quantity if the item exists } + } }, }); +// eslint-disable-next-line react-refresh/only-export-components export const { addItem, removeItem, updateQuantity } = CartSlice.actions; export default CartSlice.reducer; diff --git a/src/ProductList.jsx b/src/ProductList.jsx index ea574615c0..2ce159ed14 100644 --- a/src/ProductList.jsx +++ b/src/ProductList.jsx @@ -1,9 +1,25 @@ -import React, { useState, useEffect } from 'react'; +// eslint-disable-next-line no-unused-vars +import React, { useState, useEffect, } from 'react'; +// eslint-disable-next-line no-unused-vars +import { useDispatch } from 'react-redux'; +import { addItem } from './CartSlice'; +import { useSelector } from 'react-redux'; import './ProductList.css' import CartItem from './CartItem'; +// eslint-disable-next-line react/prop-types function ProductList({ onHomeClick }) { + const dispatch = useDispatch(); + // eslint-disable-next-line no-unused-vars + const cart = useSelector(state => state.cart?.items || []); + // eslint-disable-next-line no-unused-vars + const totalItemsCount = cart.reduce((total, item) => { // Calculate total items in cart + return total + (item.quantity || 1); + }, 0); + const [showCart, setShowCart] = useState(false); + // eslint-disable-next-line no-unused-vars const [showPlants, setShowPlants] = useState(false); // State to control the visibility of the About Us page + // eslint-disable-next-line no-unused-vars const [addedToCart, setAddedToCart] = useState({}) const plantsArray = [ { @@ -248,7 +264,7 @@ function ProductList({ onHomeClick }) { setShowCart(false); // Hide the cart when navigating to About Us }; const handleAddToCart = (product) => { - dispatchEvent(addItem(product)); // Dispatch the addItem action with the selected product + dispatch(addItem(product)); // Dispatch the addItem action with the selected product setAddedToCart((prevState) => ({ // Update state to mark the product as added to cart ...prevState, // Preserve previous state [product.name]: true, // Mark the current product as added to cart @@ -275,8 +291,7 @@ function ProductList({ onHomeClick }) {
handlePlantsClick(e)} style={styleA}>Plants
-
handleCartClick(e)} style={styleA}>

-
+
handleCartClick(e)} style={styleA}>

{totalItemsCount> 0 &&( {totalItemsCount} )}
{!showCart ? (
@@ -299,9 +314,14 @@ function ProductList({ onHomeClick }) { + +
))}