changes

src/Components/CartSlice.jsx

@@ -1,6 +1,54 @@
+import { createSlice } from '@reduxjs/toolkit';
 
-const CartSlice = ({
-
+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 itemToIncrease = state.cartItems.find(item => item.id === action.payload);
+      if (itemToIncrease) {
+        itemToIncrease.quantity -= 1;
+      }
+    },
+
+  } 
 });
 
+export const {
+  addItemToCart,
+  removeItemFromCart,
+  clearCart,
+  increaseItemQuantity,
+  decreaseItemQuantity,
+} = CartSlice.actions;
+export default CartSlice.reducer;
+
 

src/Components/ProductList.jsx

@@ -1,18 +1,41 @@
 import React from 'react';
 import './ProductList.css'; 
+import { useDispatch } from 'react-redux';
+import { useState } from 'react';
+import { addItemToCart } from './CartSlice';
 
 const ProductList = () => {
 
+  const dispatch = useDispatch();
+  const [disabledProducts, setDisabledProducts] = useState([]); // State to store disabled products
+
   const products = [
     { id: 1, name: 'Product A', price: 60 },
     { id: 2, name: 'Product B', price: 75 },
     { id: 3, name: 'Product C', price: 30 },
   ];
 
+  const handleAddToCart = product => {
+    dispatch(addItemToCart(product));
+    setDisabledProducts([...disabledProducts, product.id]); // Mark the product as disabled
+  };
+
   return (
     <div className="product-list">
       <h2 className="product-list-title">Products</h2>
       <ul className="product-list-items">
+        {products.map(product=>(
+          <li key={product.id} className="product-list-item">
+          <span>{product.name} - ${product.price}</span>
+          <button
+          className={`add-to-cart-btn ${disabledProducts.includes(product.id) ? 'disabled' : ''}`}
+          onClick={() => handleAddToCart(product)}
+          disabled={disabledProducts.includes(product.id)} // Disable button if product is in disabledProducts
+          >
+            Add to Cart
+          </button>
+          </li>
+        ))}
 
       </ul>
     </div>

src/Components/ShoppingCart.jsx

@@ -1,18 +1,54 @@
 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
 
 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 => {
+    const item = cartItems.find(item => item.id === itemId);
+    if (item.quantity === 1) {
+      dispatch(removeItemFromCart(itemId));
+    } else {
+      dispatch(decreaseItemQuantity(itemId));
+    }
+  };
 
   return (
     <>
     <div className="shopping-cart">
       <h2 className="shopping-cart-title">Shopping Cart</h2>
       <ul className="cart-items">
-
+        {cartItems.map(item => (
+            <li key={item.id} className="cart-item">
+              <span>{item.name} - ${item.price}</span>
+              <div className="quantity-controls">
+                <button className="quantity-control-btn" onClick={() => handleDecreaseQuantity(item.id)}>-</button>
+                <span> {item.quantity}</span>
+                <button className="quantity-control-btn" onClick={() => handleIncreaseQuantity(item.id)}>+</button>
+              </div>
+              <button className="remove-item-btn" onClick={() => handleRemoveItem(item.id)}>Remove</button>
+            </li>
+          ))}
       </ul>
-      <button className="clear-cart-btn">Clear Cart</button>
+      <button className="clear-cart-btn" onClick={handleClearCart}>Clear Cart</button>
     </div>
-
+    <div>{totalAmount ? <div>'The total amount is {totalAmount}</div> : ''}</div>      
     </>
   );
 };

src/main.jsx

@@ -2,8 +2,13 @@ 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(
   <React.StrictMode>
-    <App />
+    <Provider store={store}>
+      <App />
+    </Provider>
   </React.StrictMode>,
 )

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;