From f4598460e06d23f9c3befd8b930a1944164a9e7f Mon Sep 17 00:00:00 2001 From: ParthVibhandik Date: Wed, 30 Oct 2024 19:32:20 +0530 Subject: [PATCH 1/3] Final Project React IBM --- src/CartItem.jsx | 34 +++++++++++++++++------------ src/CartSlice.jsx | 48 +++++++++++++++++++++++++++++------------ src/ProductList.jsx | 52 ++++++++++++++++++++++++++++++++++----------- 3 files changed, 95 insertions(+), 39 deletions(-) diff --git a/src/CartItem.jsx b/src/CartItem.jsx index e06317433..983f0bfd6 100644 --- a/src/CartItem.jsx +++ b/src/CartItem.jsx @@ -2,34 +2,42 @@ import React from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { removeItem, updateQuantity } from './CartSlice'; import './CartItem.css'; +import ProductList from './ProductList'; 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) => { + const itemCost = parseFloat(item.cost.replace('$', '')); // Remove '$' and convert to number + return total + (itemCost * item.quantity); + }, 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({ name: item.name })); // Remove item if quantity reaches 0 + } }; const handleRemove = (item) => { + dispatch(removeItem({ name: item.name })); // Dispatch the remove action with item name }; - // Calculate total cost based on quantity for an item const calculateTotalCost = (item) => { + const itemCost = parseFloat(item.cost.replace('$', '')); + return (itemCost * item.quantity).toFixed(2); }; return ( @@ -41,7 +49,7 @@ const CartItem = ({ onContinueShopping }) => { {item.name}
{item.name}
-
{item.cost}
+
${parseFloat(item.cost.replace('$', '')).toFixed(2)}
{item.quantity} @@ -55,14 +63,12 @@ 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..73cfc691e 100644 --- a/src/CartSlice.jsx +++ b/src/CartSlice.jsx @@ -1,23 +1,45 @@ +import { configureStore } from '@reduxjs/toolkit'; import { createSlice } from '@reduxjs/toolkit'; -export const CartSlice = createSlice({ +// CartSlice.js +const initialState = { + items: [], + totalQuantity: 0, +}; + +const cartSlice = createSlice({ name: 'cart', - initialState: { - items: [], // Initialize items as an empty array - }, + initialState, reducers: { - addItem: (state, action) => { - + addItem(state, action) { + const existingItem = state.items.find(item => item.name === action.payload.name); + if (existingItem) { + existingItem.quantity++; + } else { + state.items.push({ ...action.payload, quantity: 1 }); + } + state.totalQuantity++; // Update the total quantity }, - removeItem: (state, action) => { + removeItem(state, action) { + const existingItem = state.items.find(item => item.name === action.payload.name); + if (existingItem) { + state.totalQuantity -= existingItem.quantity; // Deduct the quantity + state.items = state.items.filter(item => item.name !== action.payload.name); + } }, - updateQuantity: (state, action) => { - - + updateQuantity(state, action) { + const existingItem = state.items.find(item => item.name === action.payload.name); + if (existingItem) { + state.totalQuantity += action.payload.quantity - existingItem.quantity; // Adjust total quantity + existingItem.quantity = action.payload.quantity; + if (existingItem.quantity <= 0) { + state.items = state.items.filter(item => item.name !== action.payload.name); + } + } }, }, }); -export const { addItem, removeItem, updateQuantity } = CartSlice.actions; - -export default CartSlice.reducer; +export const { addItem, removeItem, updateQuantity } = cartSlice.actions; +export const selectTotalQuantity = (state) => state.cart.totalQuantity; +export default cartSlice.reducer; diff --git a/src/ProductList.jsx b/src/ProductList.jsx index 964b15d49..46cdbd37d 100644 --- a/src/ProductList.jsx +++ b/src/ProductList.jsx @@ -1,10 +1,19 @@ import React, { useState,useEffect } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import { addItem, removeItem, updateQuantity } from './CartSlice'; import './ProductList.css' import CartItem from './CartItem'; +import { selectTotalQuantity } from './CartSlice'; + function ProductList() { 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(); + const totalQuantity = useSelector(selectTotalQuantity); + const plantsArray = [ { category: "Air Purifying Plants", @@ -246,6 +255,16 @@ const handlePlantsClick = (e) => { e.preventDefault(); setShowCart(false); }; + + const handleAddToCart = (plant) => { + console.log("Adding to cart:", plant); + dispatch(addItem(plant)); + setAddedToCart((prevState) => ({ + ...prevState, + [plant.name]: true // Set the plant name as key and value as true + })); + }; + return (
@@ -263,19 +282,28 @@ const handlePlantsClick = (e) => {
handlePlantsClick(e)} style={styleA}>Plants
-
handleCartClick(e)} style={styleA}>

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

+ + + + + + +

+ + {totalQuantity} +
{!showCart? (
- - -
- ) : ( - -)} - - ); -} - -export default ProductList; + {plantsArray.map((category, index) => ( +
+

{category.category}

+
+ {category.plants.map((plant, plantIndex) => ( +
+ {plant.name} + \ No newline at end of file From 88d44a7a77557f7227f78147e863dbf6e60241cb Mon Sep 17 00:00:00 2001 From: ParthVibhandik Date: Wed, 30 Oct 2024 19:33:45 +0530 Subject: [PATCH 2/3] Final Project React IBM --- src/CartItem.jsx | 20 +------------------- src/CartSlice.jsx | 28 +--------------------------- src/ProductList.jsx | 19 ++++++++++++++++++- 3 files changed, 20 insertions(+), 47 deletions(-) diff --git a/src/CartItem.jsx b/src/CartItem.jsx index 983f0bfd6..a8d1f8f1b 100644 --- a/src/CartItem.jsx +++ b/src/CartItem.jsx @@ -53,22 +53,4 @@ const CartItem = ({ onContinueShopping }) => {
{item.quantity} - -
-
Total: ${calculateTotalCost(item)}
- -
-
- ))} -
-
-
- -
- -
- - ); -}; - -export default CartItem; \ No newline at end of file + + + ))} + + + ))} + + + ) : ( + +)} + + ); +} + +export default ProductList; From 3e241592a30eb38f31d279641fbe09e53150e172 Mon Sep 17 00:00:00 2001 From: ParthVibhandik Date: Wed, 30 Oct 2024 19:48:56 +0530 Subject: [PATCH 3/3] Deployment changes --- package.json | 6 ++++-- vite.config.js | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index b7d4c1d1d..5dc2a5566 100644 --- a/package.json +++ b/package.json @@ -5,12 +5,14 @@ "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", + "@reduxjs/toolkit": "^2.3.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-redux": "^9.1.1" @@ -23,7 +25,7 @@ "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.6", - "gh-pages": "^6.1.1", + "gh-pages": "^6.2.0", "vite": "^5.2.0" } } diff --git a/vite.config.js b/vite.config.js index 4d190ae43..beeaed5cd 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()], })