diff --git a/package.json b/package.json index b7d4c1d1d4..1a325ba078 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,17 @@ { + "homepage": "https://cwilliams85216.github.io/e-plantShopping/", "name": "shoppingcart", "private": true, "version": "0.0.0", "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" + }, "dependencies": { "@reduxjs/toolkit": "^2.2.3", diff --git a/src/CartItem.jsx b/src/CartItem.jsx index e06317433f..1d03121e17 100644 --- a/src/CartItem.jsx +++ b/src/CartItem.jsx @@ -3,33 +3,55 @@ 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 = () => { - - }; + 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(e); }; - + 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({ name: item.name })); + onItemRemoved(item.name); + } }; const handleRemove = (item) => { + 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 ( @@ -57,7 +79,7 @@ const CartItem = ({ onContinueShopping }) => {

- +
); diff --git a/src/CartSlice.jsx b/src/CartSlice.jsx index 32b8761ed0..3a60894ce9 100644 --- a/src/CartSlice.jsx +++ b/src/CartSlice.jsx @@ -7,15 +7,31 @@ 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 + state.items = state.items.filter(item => item.name !== name); }, - updateQuantity: (state, action) => { - + 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; 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 7682c04fc4..04b764d935 100644 --- a/src/ProductList.jsx +++ b/src/ProductList.jsx @@ -1,9 +1,21 @@ 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 = [ { @@ -252,6 +264,24 @@ 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 + })); + + }; + + const handleItemRemoved = (product) => { + setAddedToCart((prevState) => { + const newState = { ...prevState }; + delete newState[product]; + return newState; + }); + }; return (
@@ -269,16 +299,49 @@ function ProductList({ onHomeClick }) {
handlePlantsClick(e)} style={styleA}>Plants
-
handleCartClick(e)} style={styleA}>

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

+ {totalItems}

+ +
{!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 */} + +
+ ))} +
+
+ ))}
) : ( - + )} ); 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; diff --git a/vite.config.js b/vite.config.js index 4d190ae430..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: "/shoppingreact", + base: "/e-plantShopping", plugins: [react()], })