From 80912f56ee071bb3566e769d2829b214a191f0e7 Mon Sep 17 00:00:00 2001 From: cwilliams85216 Date: Fri, 3 Oct 2025 18:34:01 -0400 Subject: [PATCH 01/15] adding product list and cart function --- src/ProductList.jsx | 40 +++++++++++++++++++++++++++++++++++++++- 1 file changed, 39 insertions(+), 1 deletion(-) diff --git a/src/ProductList.jsx b/src/ProductList.jsx index 7682c04fc4..11c341f4ae 100644 --- a/src/ProductList.jsx +++ b/src/ProductList.jsx @@ -1,9 +1,11 @@ import React, { useState, useEffect } from 'react'; import './ProductList.css' import CartItem from './CartItem'; +import { addItem } 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 plantsArray = [ { @@ -252,6 +254,15 @@ function ProductList({ onHomeClick }) { e.preventDefault(); setShowCart(false); }; + + const handleAddToCart = (product) => { + dispatch(addItem(product)); // Dispatch the action to add the product to the cart (Redux action) + + setAddedToCart((prevState) => ({ // Update the local state to reflect that the product has been added + ...prevState, // Spread the previous state to retain existing entries + [product.name]: true, // Set the current product's name as a key with value 'true' to mark it as added + })); + }; return (
@@ -274,7 +285,34 @@ function ProductList({ onHomeClick }) {
{!showCart ? (
- + {plantsArray.map((category, index) => ( // Loop through each category in plantsArray +
{/* Unique key for each category div */} +

+
{category.category}
{/* Display the category name */} +

+
{/* Container for the list of plant cards */} + {category.plants.map((plant, plantIndex) => ( // Loop through each plant in the current category +
{/* Unique key for each plant card */} + {plant.name} +
{plant.name}
{/* Display plant name */} + {/* Display other plant details like description and cost */} +
{plant.description}
{/* Display plant description */} +
{plant.cost}
{/* Display plant cost */} + +
+ ))} +
+
+ ))}
) : ( From 33bbcd2d37639c766b221d6e5a0e5502957136fd Mon Sep 17 00:00:00 2001 From: cwilliams85216 Date: Sun, 5 Oct 2025 13:02:47 -0400 Subject: [PATCH 02/15] state management for adding, removing, and updating the number of items in the cart --- src/CartSlice.jsx | 27 +++++++++++++++++++++++---- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/src/CartSlice.jsx b/src/CartSlice.jsx index 32b8761ed0..abf5f73462 100644 --- a/src/CartSlice.jsx +++ b/src/CartSlice.jsx @@ -7,15 +7,34 @@ export const CartSlice = createSlice({ }, reducers: { addItem: (state, action) => { - + const { name, image, cost } = action.payload; // Destructure product details from the action payload + // Check if the item already exists in the cart by comparing names + const existingItem = state.items.find(item => item.name === name); + if (existingItem) { + // If item already exists in the cart, increase its quantity + existingItem.quantity++; + } else { + // If item does not exist, add it to the cart with quantity 1 + state.items.push({ name, image, cost, quantity: 1 }); + } }, removeItem: (state, action) => { + const { name } = action.payload; // Destructure product details from the action payload + const existingItem = state.items.find(item => item.name === name); + if (existingItem) { + // If item already exists in the cart, remove from cart + state.items.filter(item => item.name !== existingItem) + } }, updateQuantity: (state, action) => { - - + const{name, quantity} = action.payload; + // Find the item in the cart that matches the given name + const existingItem = state.items.find(item => item.name === name); + if (existingItem) { + existingItem.quantity quantity; + } }, - }, +}, }); export const { addItem, removeItem, updateQuantity } = CartSlice.actions; From 5fd558099ab4d666f27d369fedfcab9b4d406288 Mon Sep 17 00:00:00 2001 From: cwilliams85216 Date: Wed, 8 Oct 2025 20:48:40 -0400 Subject: [PATCH 03/15] initial commit --- src/CartItem.jsx | 29 +++++++++++++++++++++++++---- src/CartSlice.jsx | 2 +- src/ProductList.jsx | 14 +++++++++++++- src/store.js | 2 +- 4 files changed, 40 insertions(+), 7 deletions(-) diff --git a/src/CartItem.jsx b/src/CartItem.jsx index e06317433f..d1b8f90c92 100644 --- a/src/CartItem.jsx +++ b/src/CartItem.jsx @@ -9,23 +9,44 @@ const CartItem = ({ onContinueShopping }) => { // Calculate total amount for all products in the cart const calculateTotalAmount = () => { - + let total; + cart.forEach( item => { + let cost = parseFloat(item.cost.substring(1)); + let quantity = item.quantity; + total =+ (cost * quantity); + }); + return total }; const handleContinueShopping = (e) => { - + onContinueShopping(); }; - + 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) => { - + if(item.quantity > 1){ + dispatch(updateQuantity({ + name: item.name, + quantity: item.quantity - 1 + })); + } + else { + dispatch(removeItem); + } }; const handleRemove = (item) => { + dispatch(removeItem) }; // Calculate total cost based on quantity for an item diff --git a/src/CartSlice.jsx b/src/CartSlice.jsx index abf5f73462..a75cf82383 100644 --- a/src/CartSlice.jsx +++ b/src/CartSlice.jsx @@ -31,7 +31,7 @@ export const CartSlice = createSlice({ // Find the item in the cart that matches the given name const existingItem = state.items.find(item => item.name === name); if (existingItem) { - existingItem.quantity quantity; + existingItem.quantity = quantity; } }, }, diff --git a/src/ProductList.jsx b/src/ProductList.jsx index 11c341f4ae..d65a15f93c 100644 --- a/src/ProductList.jsx +++ b/src/ProductList.jsx @@ -2,10 +2,19 @@ import React, { useState, useEffect } from 'react'; import './ProductList.css' import CartItem from './CartItem'; import { addItem } from './CartSlice'; +import { useDispatch, useSelector } from 'react-redux'; + + + 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 dispatch = useDispatch(); + + // Access the number of items in the cart from Redux store + const cartItems = useSelector((state) => state.cart.items); + const totalItems = cartItems.reduce((total, item) => total + item.quantity, 0); const plantsArray = [ { @@ -280,7 +289,10 @@ function ProductList({ onHomeClick }) {
handlePlantsClick(e)} style={styleA}>Plants
-
handleCartClick(e)} style={styleA}>

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

+ {totalItems}

+ +
{!showCart ? ( diff --git a/src/store.js b/src/store.js index 54d0d6d66e..f566f6dd83 100644 --- a/src/store.js +++ b/src/store.js @@ -5,4 +5,4 @@ import cartReducer from './CartSlice'; cart: cartReducer, }, }); -export default store +export default store; From 05aab3d4e36c19db64820ed1b970d450ee49ebb9 Mon Sep 17 00:00:00 2001 From: cwilliams85216 Date: Sat, 11 Oct 2025 15:56:33 -0400 Subject: [PATCH 04/15] initial commit --- src/CartItem.jsx | 27 ++++++++++++++------------- src/CartSlice.jsx | 7 ++----- src/ProductList.css | 2 +- src/ProductList.jsx | 17 +++++++++++++++-- 4 files changed, 32 insertions(+), 21 deletions(-) diff --git a/src/CartItem.jsx b/src/CartItem.jsx index d1b8f90c92..6a4cd05833 100644 --- a/src/CartItem.jsx +++ b/src/CartItem.jsx @@ -3,23 +3,20 @@ import { useSelector, useDispatch } from 'react-redux'; import { removeItem, updateQuantity } from './CartSlice'; import './CartItem.css'; -const CartItem = ({ onContinueShopping }) => { +const CartItem = ({ onContinueShopping, onItemRemoved }) => { const cart = useSelector(state => state.cart.items); const dispatch = useDispatch(); // Calculate total amount for all products in the cart - const calculateTotalAmount = () => { - let total; - cart.forEach( item => { - let cost = parseFloat(item.cost.substring(1)); - let quantity = item.quantity; - total =+ (cost * quantity); - }); - return total - }; + const calculateTotalAmount = (cartItems) => { + return cart.reduce((total, item) => { + // For each item, add its calculated cost to the `total` + return total + calculateTotalCost(item); + }, 0); +}; const handleContinueShopping = (e) => { - onContinueShopping(); + onContinueShopping(e); }; const handleCheckoutShopping = (e) => { @@ -41,16 +38,20 @@ const CartItem = ({ onContinueShopping }) => { })); } else { - dispatch(removeItem); + dispatch(removeItem({ name: item.name })); + onItemRemoved(item.name); } }; const handleRemove = (item) => { - dispatch(removeItem) + dispatch(removeItem({ name: item.name })); + onItemRemoved(item.name); }; // Calculate total cost based on quantity for an item const calculateTotalCost = (item) => { + let totalCost = parseFloat(item.cost.substring(1)) * item.quantity; + return totalCost; }; return ( diff --git a/src/CartSlice.jsx b/src/CartSlice.jsx index a75cf82383..3a60894ce9 100644 --- a/src/CartSlice.jsx +++ b/src/CartSlice.jsx @@ -20,12 +20,9 @@ export const CartSlice = createSlice({ }, removeItem: (state, action) => { const { name } = action.payload; // Destructure product details from the action payload - const existingItem = state.items.find(item => item.name === name); - if (existingItem) { - // If item already exists in the cart, remove from cart - state.items.filter(item => item.name !== existingItem) - } + state.items = state.items.filter(item => item.name !== name); }, + updateQuantity: (state, action) => { const{name, quantity} = action.payload; // Find the item in the cart that matches the given name diff --git a/src/ProductList.css b/src/ProductList.css index 52f9c7a84f..b43da0ecc7 100644 --- a/src/ProductList.css +++ b/src/ProductList.css @@ -215,7 +215,7 @@ body { background-color: #45a049; } - .product-button.added-to-cart { + .product-button:disabled { background-color: grey; /* Grey when product is added */ } @media (max-width: 1200px) { diff --git a/src/ProductList.jsx b/src/ProductList.jsx index d65a15f93c..04b764d935 100644 --- a/src/ProductList.jsx +++ b/src/ProductList.jsx @@ -10,6 +10,7 @@ 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 dispatch = useDispatch(); // Access the number of items in the cart from Redux store @@ -271,6 +272,15 @@ function ProductList({ onHomeClick }) { ...prevState, // Spread the previous state to retain existing entries [product.name]: true, // Set the current product's name as a key with value 'true' to mark it as added })); + + }; + + const handleItemRemoved = (product) => { + setAddedToCart((prevState) => { + const newState = { ...prevState }; + delete newState[product]; + return newState; + }); }; return (
@@ -317,8 +327,9 @@ function ProductList({ onHomeClick }) {
))} @@ -328,7 +339,9 @@ function ProductList({ onHomeClick }) { ) : ( - + )} ); From 08990c7ede485e274ad89faa2a68ecab3d8c9f6b Mon Sep 17 00:00:00 2001 From: "Chelsey W." <55863583+cwilliams85216@users.noreply.github.com> Date: Sat, 11 Oct 2025 15:19:40 -0500 Subject: [PATCH 05/15] Update package.json --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index b7d4c1d1d4..81f2e73d93 100644 --- a/package.json +++ b/package.json @@ -1,4 +1,5 @@ { + "homepage": "homepage": "https://cwilliams85216.github.io/e-plantShopping/", "name": "shoppingcart", "private": true, "version": "0.0.0", From 446e242dc7ffc3fb1821af701459ca74442006c1 Mon Sep 17 00:00:00 2001 From: "Chelsey W." <55863583+cwilliams85216@users.noreply.github.com> Date: Sat, 11 Oct 2025 15:19:54 -0500 Subject: [PATCH 06/15] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 81f2e73d93..a250be9aac 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "homepage": "homepage": "https://cwilliams85216.github.io/e-plantShopping/", + "homepage": "https://cwilliams85216.github.io/e-plantShopping/", "name": "shoppingcart", "private": true, "version": "0.0.0", From 9a6c4c002776d518ba676ca063f67167ee2752c2 Mon Sep 17 00:00:00 2001 From: "Chelsey W." <55863583+cwilliams85216@users.noreply.github.com> Date: Sat, 11 Oct 2025 15:22:35 -0500 Subject: [PATCH 07/15] Update package.json --- package.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index a250be9aac..0e8f3fb7ed 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,9 @@ "dev": "vite", "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", + "predeploy": "npm run build", + "deploy": "gh-pages -d build" }, "dependencies": { "@reduxjs/toolkit": "^2.2.3", From cb33042faa8bf2ed5f573e41b7fb9f517a8d76ec Mon Sep 17 00:00:00 2001 From: "Chelsey W." <55863583+cwilliams85216@users.noreply.github.com> Date: Sat, 11 Oct 2025 15:30:51 -0500 Subject: [PATCH 08/15] Update package.json --- package.json | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 0e8f3fb7ed..0465f61b15 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "homepage": "https://cwilliams85216.github.io/e-plantShopping/", + "name": "shoppingcart", "private": true, "version": "0.0.0", @@ -9,8 +9,7 @@ "build": "vite build", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "preview": "vite build; vite preview --host", - "predeploy": "npm run build", - "deploy": "gh-pages -d build" + }, "dependencies": { "@reduxjs/toolkit": "^2.2.3", From ebcab475c20870b325fa352f4971edd848b4c7d1 Mon Sep 17 00:00:00 2001 From: "Chelsey W." <55863583+cwilliams85216@users.noreply.github.com> Date: Sat, 11 Oct 2025 15:37:21 -0500 Subject: [PATCH 09/15] Update package.json --- package.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/package.json b/package.json index 0465f61b15..a251ca6a99 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,8 @@ "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", From b6c858912688bb6c1c1463269154980fcedbf623 Mon Sep 17 00:00:00 2001 From: "Chelsey W." <55863583+cwilliams85216@users.noreply.github.com> Date: Sat, 11 Oct 2025 15:37:48 -0500 Subject: [PATCH 10/15] Update vite.config.js --- vite.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vite.config.js b/vite.config.js index 4d190ae430..5ac58a5c64 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: "/e-plantShopping, plugins: [react()], }) From c8bf0addba2f23059a3d85a19df05de2989fadf5 Mon Sep 17 00:00:00 2001 From: "Chelsey W." <55863583+cwilliams85216@users.noreply.github.com> Date: Sat, 11 Oct 2025 15:40:20 -0500 Subject: [PATCH 11/15] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a251ca6a99..3840a2ba6f 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - + "homepage": "https://cwilliams85216.github.io/e-plantShopping/" "name": "shoppingcart", "private": true, "version": "0.0.0", From 300b5059e80e3f5c441ccc17ed4fbf8d0f7309fe Mon Sep 17 00:00:00 2001 From: "Chelsey W." <55863583+cwilliams85216@users.noreply.github.com> Date: Sat, 11 Oct 2025 15:56:58 -0500 Subject: [PATCH 12/15] Update CartItem.jsx added checkout button alert --- src/CartItem.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/CartItem.jsx b/src/CartItem.jsx index 6a4cd05833..1d03121e17 100644 --- a/src/CartItem.jsx +++ b/src/CartItem.jsx @@ -79,7 +79,7 @@ const CartItem = ({ onContinueShopping, onItemRemoved }) => {

- +
); From 708087b33fd7c55de1b9249828b15b447d1535b6 Mon Sep 17 00:00:00 2001 From: "Chelsey W." <55863583+cwilliams85216@users.noreply.github.com> Date: Sat, 11 Oct 2025 16:02:50 -0500 Subject: [PATCH 13/15] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3840a2ba6f..37aaacf9ad 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "homepage": "https://cwilliams85216.github.io/e-plantShopping/" + "homepage": "https://cwilliams85216.github.io/e-plantShopping/", "name": "shoppingcart", "private": true, "version": "0.0.0", From 1ad78617500dd739c5c522d7f1aa0edc5b7c95c7 Mon Sep 17 00:00:00 2001 From: "Chelsey W." <55863583+cwilliams85216@users.noreply.github.com> Date: Sat, 11 Oct 2025 16:07:52 -0500 Subject: [PATCH 14/15] Update vite.config.js --- vite.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vite.config.js b/vite.config.js index 5ac58a5c64..beeaed5cdc 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: "/e-plantShopping, + base: "/e-plantShopping", plugins: [react()], }) From bedae7d6c9f53859c04e5fd8468a174680b49b1d Mon Sep 17 00:00:00 2001 From: "Chelsey W." <55863583+cwilliams85216@users.noreply.github.com> Date: Sat, 11 Oct 2025 16:08:04 -0500 Subject: [PATCH 15/15] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 37aaacf9ad..1a325ba078 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "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": {