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
-
+ {products.map(product => (
+
+ {product.name} - ${product.price}
+ handleAddToCart(product)}
+ disabled={disabledProducts.includes(product.id)} // Disable button if product is in disabledProducts
+ >
+ Add to Cart
+
+
+ ))}
);
};
-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
-
-
Clear Cart
-
-
+
+
Shopping Cart
+
+
Clear 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