Update

package.json

@@ -23,6 +23,6 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
-    "vite": "^5.2.0"
+    "vite": "^6.2.2"
   }
 }

src/App.jsx

@@ -2,15 +2,17 @@
 import React from 'react';
 import ProductList from './Components/ProductList';
 import ShoppingCart from './Components/ShoppingCart';
+import SuperCoin from './Components/SuperCoin';
 import './App.css'
 const App = () => {
   return (
-
-      <div>
-        <h1 className='app-heading'>E-Commerce Application</h1>
-        <ProductList />
-        <ShoppingCart />
-      </div>
+
+    <div>
+      <h1 className='app-heading'>E-Commerce Application</h1>
+      <ProductList />
+      <ShoppingCart />
+      <SuperCoin />
+    </div>
 
   );
 };

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,53 @@
-import React from 'react';
-import './ProductList.css'; 
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { addItemToCart } from './CartSlice';
+import './ProductList.css';
+
 
 const ProductList = () => {
+  const dispatch = useDispatch();
+  const [disabledProducts, setDisabledProducts] = useState([]);
+  const cartItems = useSelector(state => state.cart.cartItems);
+
+  // added this to fix addItemToCart button not working after removing that item from cart once.
+  useEffect(() => {
+    const newDisabledProducts = cartItems.map((item) => item.id);
+    setDisabledProducts(newDisabledProducts);
+  }, [cartItems]);
 
   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) => {
+    if (!disabledProducts.includes(product.id)) {
+      dispatch(addItemToCart(product));
+      setDisabledProducts([...disabledProducts, product.id]);
+    }
+  };
+
   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 arr 
+            >
+              Add to Cart
+            </button>
+          </li>
+        ))}
       </ul>
     </div>
   );
 };
 
+
 export default ProductList;

src/Components/ShoppingCart.jsx

@@ -1,18 +1,50 @@
 import React from 'react';
-import './ShoppingCart.css'; 
+import { useDispatch, useSelector } from 'react-redux';
+import { removeItemFromCart, clearCart, increaseItemQuantity, decreaseItemQuantity } from './CartSlice';
+import './ShoppingCart.css';
+
 
 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 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" onClick={handleClearCart}>Clear Cart</button>
+      </div>
+      <div>{totalAmount ? <div>'The total amount is {totalAmount}</div> : ''}</div>
     </>
   );
 };

src/Components/SuperCoin.jsx

@@ -0,0 +1,55 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+
+const SuperCoin = () => {
+    const [superCoins, setSuperCoins] = useState(0);
+    const cartItems = useSelector(state => state.cart.cartItems);
+    const totalAmount = cartItems.reduce((total, item) => total + item.price * item.quantity, 0);
+
+    /*
+    // max amount capped at 400, webpage breaks 
+    useEffect(() => {
+        if (totalAmount >= 100 && totalAmount < 200) {
+            setSuperCoins(10);
+        } else if (totalAmount >= 200 && total < 300) {
+            setSuperCoins(20);
+        } else if (totalAmount >= 300 && total < 400) {
+            setSuperCoins(30);
+        } else {
+            setSuperCoins(0);
+        }
+    }, [totalAmount]);
+    */
+
+    /*
+    // super coins stop accumulating after 400
+    useEffect(() => {
+        const coinRules = [
+            { min: 100, max: 199.99, coins: 10 },
+            { min: 200, max: 299.99, coins: 20 },
+            { min: 300, max: 399.99, coins: 30 },
+            { min: 400, max: Infinity, coins: 40 }, // Add this line
+        ];
+
+        const earnedCoins = coinRules.find(rule => totalAmount >= rule.min && totalAmount <= rule.max)?.coins || 0;
+        setSuperCoins(earnedCoins);
+    }, [totalAmount]);
+    */
+
+    // super coins accumulating indefinitely according to total amount
+    useEffect(() => {
+        const calculatedCoins = Math.floor(totalAmount / 100) * 10;
+        setSuperCoins(calculatedCoins);
+    }, [totalAmount]);
+
+    return (
+        <div className="super-coins" style={{ textAlign: 'center' }}>
+            <h2 className="super-coins-title">Super Coins</h2>
+            <p className="super-coins-info">
+                You will earn {superCoins} super coins with this purchase.
+            </p>
+        </div>
+    )
+};
+
+export default SuperCoin;

src/main.jsx

@@ -2,8 +2,14 @@ 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,10 @@
+import { configureStore } from '@reduxjs/toolkit';
+import cartReducer from './Components/CartSlice';
+
+const store = configureStore({
+    reducer: {
+        cart: cartReducer,
+    },
+});
+
+export default store;