excercising with eCommerce application

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;

src/Components/ProductList.jsx

@@ -1,22 +1,42 @@
 import React from 'react';
 import './ProductList.css'; 
+import { useDispatch, useSelector } from 'react-redux';
+import { addItemToCart } from './CartSlice';// Action to add product to cart
 
 const ProductList = () => {
+    const dispatch = useDispatch();
+    const cartItems = useSelector(state => state.cart.cartItems); // Get cart items globally
 
   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));// Add product to cart
+  };
+
   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 ${cartItems.some(item => item.id === product.id) ? 'disabled' : ''}`}
+                onClick={() => handleAddToCart(product)}
+                disabled={cartItems.some(item => item.id === product.id)} // Disable if already in cart
+              >
+                {cartItems.some(item => item.id === product.id) ? 'Added' : 'Add to Cart'}
+            </button>
+            </li>
+        ))}
+
       </ul>
     </div>
   );
 };
 
-export default ProductList;
+export default ProductList;

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 (
     <>
-    <div className="shopping-cart">
-      <h2 className="shopping-cart-title">Shopping Cart</h2>
-      <ul className="cart-items">
-
-      </ul>
-      <button className="clear-cart-btn">Clear Cart</button>
-    </div>
-
+      <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 onClick={() => handleDecreaseQuantity(item.id)}>-</button>
+                <span> {item.quantity}</span>
+                <button onClick={() => handleIncreaseQuantity(item.id)}>+</button>
+              </div>
+              <button className="remove-item-btn" onClick={() => handleRemoveItem(item.id)}>Remove</button>
+            </li>
+          ))}
+        </ul>
+        <button className="clear-cart-btn" onClick={handleClearCart}>Clear Cart</button>
+      </div>
+      <div>{totalAmount ? <div>'The total amount is {totalAmount}</div> : ''}</div>
     </>
   );
 };
 
-export default ShoppingCart;
+export default ShoppingCart;

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(
   <React.StrictMode>
+ <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;