diff --git a/src/Components/CartSlice.jsx b/src/Components/CartSlice.jsx index f05ba44..24ac002 100644 --- a/src/Components/CartSlice.jsx +++ b/src/Components/CartSlice.jsx @@ -1,6 +1,46 @@ - -const CartSlice = ({ - -}); +import { createSlice } from '@reduxjs/toolkit'; +const initialState = { + cartItems: [], + }; +const CartSlice = createSlice({ + name: 'cart', + initialState, + reducers: { + addItemToCart(state, action) { + const existingItem = state.cartItems.find(item => item.id === action.payload.id); + if (existingItem) { + existingItem.quantity += 1; + } else { + state.cartItems.push({ ...action.payload, quantity: 1 }); + } + }, + removeItemFromCart(state, action) { + state.cartItems = state.cartItems.filter(item => item.id !== action.payload); + }, + clearCart(state) { + state.cartItems = []; + }, + increaseItemQuantity(state, action) { + const itemToIncrease = state.cartItems.find(item => item.id === action.payload); + if (itemToIncrease) { + itemToIncrease.quantity += 1; + } + }, + decreaseItemQuantity(state, action) { + const itemToDecrease = state.cartItems.find(item => item.id === action.payload); + if (itemToDecrease && itemToDecrease.quantity > 1) { + itemToDecrease.quantity -= 1; + } + }, + } +}); +export const { + addItemToCart, + removeItemFromCart, + clearCart, + increaseItemQuantity, + decreaseItemQuantity, + } = CartSlice.actions; + export default CartSlice.reducer; \ No newline at end of file diff --git a/src/Components/ProductList.jsx b/src/Components/ProductList.jsx index 33b4977..a0f4d07 100644 --- a/src/Components/ProductList.jsx +++ b/src/Components/ProductList.jsx @@ -1,7 +1,11 @@ -import React from 'react'; -import './ProductList.css'; +import React, { useState } from 'react'; +import { useDispatch } from 'react-redux'; +import { addItemToCart } from './CartSlice'; +import './ProductList.css'; // Import CSS file for component-specific styles const ProductList = () => { + const dispatch = useDispatch(); + const [disabledProducts, setDisabledProducts] = useState([]); // State to store disabled products const products = [ { id: 1, name: 'Product A', price: 60 }, @@ -9,14 +13,30 @@ const ProductList = () => { { id: 3, name: 'Product C', price: 30 }, ]; + const handleAddToCart = product => { + dispatch(addItemToCart(product)); + setDisabledProducts([...disabledProducts, product.id]); // Mark the product as disabled + }; + return (

Products

); }; -export default ProductList; +export default ProductList; \ No newline at end of file diff --git a/src/Components/ShoppingCart.jsx b/src/Components/ShoppingCart.jsx index 5344038..a75311c 100644 --- a/src/Components/ShoppingCart.jsx +++ b/src/Components/ShoppingCart.jsx @@ -1,20 +1,51 @@ import React from 'react'; -import './ShoppingCart.css'; +import { useDispatch, useSelector } from 'react-redux'; +import { removeItemFromCart, clearCart, increaseItemQuantity, decreaseItemQuantity } from './CartSlice'; // Assuming you have action creators for increasing and decreasing item quantity +import './ShoppingCart.css'; // Import CSS file for component-specific styles const ShoppingCart = () => { + const dispatch = useDispatch(); + const cartItems = useSelector(state => state.cart.cartItems); + const totalAmount = cartItems.reduce((total, item) => total + item.price * item.quantity, 0); + + const handleRemoveItem = itemId => { + dispatch(removeItemFromCart(itemId)); + }; + + const handleClearCart = () => { + dispatch(clearCart()); + }; + + const handleIncreaseQuantity = itemId => { + dispatch(increaseItemQuantity(itemId)); + }; + + const handleDecreaseQuantity = itemId => { + dispatch(decreaseItemQuantity(itemId)); + }; return ( <> -
-

Shopping Cart

- - -
- +
+

Shopping Cart

+ + +
+
{totalAmount ?
'The total amount is {totalAmount}
: ''}
); }; -export default ShoppingCart; +export default ShoppingCart; \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx index 7bc0fd8..1a56c63 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -2,8 +2,12 @@ import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.jsx' import './index.css' +import { Provider } from 'react-redux' +import store from './store.js' ReactDOM.createRoot(document.getElementById('root')).render( + + , -) +) \ No newline at end of file diff --git a/src/store.js b/src/store.js new file mode 100644 index 0000000..563b337 --- /dev/null +++ b/src/store.js @@ -0,0 +1,9 @@ +import { configureStore } from '@reduxjs/toolkit'; +import cartReducer from './Components/CartSlice'; +const store = configureStore({ + reducer: { + cart: cartReducer, + }, +}); + +export default store; \ No newline at end of file