ibm-developer-skills-network · MartinLapsansky · Oct 10, 2025 · Oct 10, 2025 · Oct 10, 2025 · Oct 10, 2025
diff --git a/src/CartItem.jsx b/src/CartItem.jsx
@@ -3,35 +3,44 @@ import { useSelector, useDispatch } from 'react-redux';
 import { removeItem, updateQuantity } from './CartSlice';
 import './CartItem.css';
 
-const CartItem = ({ onContinueShopping }) => {
+const CartItem = ({ onContinueShopping, onRemoveFromCart }) => {
   const cart = useSelector(state => state.cart.items);
   const dispatch = useDispatch();
 
   // Calculate total amount for all products in the cart
   const calculateTotalAmount = () => {
-
-  };
-
-  const handleContinueShopping = (e) => {
-
+    let total = 0;
+    cart.forEach(item => {
+      total += parseFloat(item.cost.substring(1)) * item.quantity;
+    });
+    return total;
   };
 
 
+  const handleCheckoutShopping = (e) => {
+    alert('Functionality to be added for future reference');
+  };
 
   const handleIncrement = (item) => {
+    dispatch(updateQuantity({ name: item.name, quantity: item.quantity + 1 }));
   };
 
   const handleDecrement = (item) => {
-
+    dispatch(updateQuantity({ name: item.name, quantity: item.quantity - 1 }));
   };
 
   const handleRemove = (item) => {
+    dispatch(removeItem(item.name));
+    onRemoveFromCart(item.name);
   };
 
   // Calculate total cost based on quantity for an item
   const calculateTotalCost = (item) => {
+    return parseFloat(item.cost.substring(1)) * item.quantity;
   };
 
+
+
   return (
     <div className="cart-container">
       <h2 style={{ color: 'black' }}>Total Cart Amount: ${calculateTotalAmount()}</h2>
@@ -55,9 +64,9 @@ const CartItem = ({ onContinueShopping }) => {
       </div>
       <div style={{ marginTop: '20px', color: 'black' }} className='total_cart_amount'></div>
       <div className="continue_shopping_btn">
-        <button className="get-started-button" onClick={(e) => handleContinueShopping(e)}>Continue Shopping</button>
+        <button className="get-started-button" onClick={onContinueShopping}>Continue Shopping</button>
         <br />
-        <button className="get-started-button1">Checkout</button>
+        <button className="get-started-button1" onClick={handleCheckoutShopping}>Checkout</button>
       </div>
     </div>
   );

diff --git a/src/CartSlice.jsx b/src/CartSlice.jsx
@@ -3,17 +3,26 @@ import { createSlice } from '@reduxjs/toolkit';
 export const CartSlice = createSlice({
   name: 'cart',
   initialState: {
-    items: [], // Initialize items as an empty array
+    items: [],
   },
   reducers: {
     addItem: (state, action) => {
-
+      const {name,image,cost} = action.payload;
+      const existingItem = state.items.find(item => item.name === name);
+      if (existingItem) {
+        existingItem.quantity++;
+      } else {
+        state.items.push({name,image,cost,quantity:1});
+      }
     },
     removeItem: (state, action) => {
+      state.items = state.items.filter(item => item.name !== action.payload);
     },
     updateQuantity: (state, action) => {
-
-
+        const itemToUpdate = state.items.find(item => item.name === action.payload.name);
+        if (itemToUpdate) {
+            itemToUpdate.quantity = action.payload.quantity;
+        }
     },
   },
 });

diff --git a/src/ProductList.css b/src/ProductList.css
@@ -47,6 +47,13 @@ body {
     align-items: center;
     justify-content: center;
 }
+
+.name-category{
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+}
+
 .product-list {
     display: flex;
     flex-wrap: wrap;

diff --git a/src/ProductList.jsx b/src/ProductList.jsx
@@ -1,11 +1,18 @@
 import React, { useState, useEffect } from 'react';
 import './ProductList.css'
 import CartItem from './CartItem';
+import { useDispatch, useSelector } from 'react-redux';
+import { addItem,removeItem,updateQuantity } from './CartSlice';
+
+
 function ProductList({ onHomeClick }) {
     const [showCart, setShowCart] = useState(false);
     const [showPlants, setShowPlants] = useState(false); // State to control the visibility of the About Us page
+    const [addedToCart,setAddedToCart] = useState({})
+    const cart = useSelector(state => state.cart.items);
+
 
-    const plantsArray = [
+  const plantsArray = [
         {
             category: "Air Purifying Plants",
             plants: [
@@ -231,6 +238,7 @@ function ProductList({ onHomeClick }) {
         color: 'white',
         fontSize: '30px',
         textDecoration: 'none',
+        marginLeft: '20px',
     }
 
     const handleHomeClick = (e) => {
@@ -250,37 +258,145 @@ function ProductList({ onHomeClick }) {
 
     const handleContinueShopping = (e) => {
         e.preventDefault();
+        setShowPlants(true);
         setShowCart(false);
     };
-    return (
-        <div>
-            <div className="navbar" style={styleObj}>
-                <div className="tag">
-                    <div className="luxury">
-                        <img src="https://cdn.pixabay.com/photo/2020/08/05/13/12/eco-5465432_1280.png" alt="" />
-                        <a href="/" onClick={(e) => handleHomeClick(e)}>
-                            <div>
-                                <h3 style={{ color: 'white' }}>Paradise Nursery</h3>
-                                <i style={{ color: 'white' }}>Where Green Meets Serenity</i>
-                            </div>
-                        </a>
-                    </div>
 
+    const dispatch = useDispatch();
+
+    const handleAddToCart = (plant) => {
+     dispatch(addItem(plant));
+     setAddedToCart((prevState) => ({...prevState, [plant.name]: true}));
+    }
+
+  const totalItemsQuantity = (item) => {
+    let total = 0;
+    cart.forEach(item => {
+      total += item.quantity;
+    });
+    return total;
+  }
+
+  const handleRemoveFromCart = (plantName) => {
+    setAddedToCart((prevState) => ({ ...prevState, [plantName]: false }));
+  };
+
+    return (
+      <div>
+        <div className="navbar" style={styleObj}>
+          <div className="tag">
+            <div className="luxury">
+              <img
+                src="https://cdn.pixabay.com/photo/2020/08/05/13/12/eco-5465432_1280.png"
+                alt=""
+              />
+              <a href="/" onClick={(e) => handleHomeClick(e)}>
+                <div style={{marginLeft: '20px'}}>
+                  <h3 style={{ color: 'white' }}>Paradise Nursery</h3>
+                  <i style={{ color: 'white' }}>Where Green Meets Serenity</i>
                 </div>
-                <div style={styleObjUl}>
-                    <div> <a href="#" onClick={(e) => handlePlantsClick(e)} style={styleA}>Plants</a></div>
-                    <div> <a href="#" onClick={(e) => handleCartClick(e)} style={styleA}><h1 className='cart'><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" id="IconChangeColor" height="68" width="68"><rect width="156" height="156" fill="none"></rect><circle cx="80" cy="216" r="12"></circle><circle cx="184" cy="216" r="12"></circle><path d="M42.3,72H221.7l-26.4,92.4A15.9,15.9,0,0,1,179.9,176H84.1a15.9,15.9,0,0,1-15.4-11.6L32.5,37.8A8,8,0,0,0,24.8,32H8" fill="none" stroke="#faf9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" id="mainIconPathAttribute"></path></svg></h1></a></div>
-                </div>
+              </a>
+            </div>
+          </div>
+          <div style={styleObjUl}>
+            <div>
+              {' '}
+              <a href="#" onClick={(e) => handlePlantsClick(e)} style={styleA}>
+                Plants
+              </a>
             </div>
-            {!showCart ? (
-                <div className="product-grid">
+            <div>
+              {' '}
+              <a href="#" onClick={(e) => handleCartClick(e)} style={styleA}>
+                <h1 className="cart">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 256 256"
+                    id="IconChangeColor"
+                    height="68"
+                    width="68"
+                  >
+                    <rect width="156" height="156" fill="none"></rect>
+                    <circle cx="80" cy="216" r="12"></circle>
+                    <circle cx="184" cy="216" r="12"></circle>
+                    <path
+                      d="M42.3,72H221.7l-26.4,92.4A15.9,15.9,0,0,1,179.9,176H84.1a15.9,15.9,0,0,1-15.4-11.6L32.5,37.8A8,8,0,0,0,24.8,32H8"
+                      fill="none"
+                      stroke="#faf9f9"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      id="mainIconPathAttribute"
+                    ></path>
+                  </svg>
+                  <span
+                    style={{
+                      position: 'absolute',
+                      top: '10px',
+                      right: '10px',
+                      background: 'red',
+                      color: 'white',
+                      borderRadius: '50%',
+                      padding: '4px 8px',
+                      fontSize: '18px',
+                    }}
+                  >
+      {totalItemsQuantity()}
+    </span>
+                </h1>
+              </a>
+            </div>
+          </div>
+        </div>
+        {!showCart ? (
+          <div className="product-grid">
+            {plantsArray.map((category, index) => {
+              return (
+                <div key={index}>
+                  <h1>
+                    <div  className="name-category">
+                      <h3 style={{borderTop: '1px solid black', borderBottom: '1px solid black', padding:'10px'}}>{category.category}</h3>
+                    </div>
+                  </h1>
+                  <div className="product-list">
+                    {category.plants.map((plant, plantIndex) => (
+                      <div className="product-card" key={plantIndex}>
+                        <img
+                          className="product-image"
+                          src={plant.image}
+                          alt={plant.name}
+                        />
+                        <div className="product-title">{plant.name}</div>
 
+                        <div className="product-description">
+                          {plant.description}
+                        </div>
+                        <div className="product-cost">${plant.cost}</div>
+                        <button
+                          className="product-button"
+                          onClick={() => handleAddToCart(plant)}
+                          disabled={!!addedToCart[plant.name]}
+                          style={{
+                            backgroundColor: addedToCart[plant.name] ? 'grey' : 'green',
+                            color: 'white',
+                            cursor: addedToCart[plant.name] ? 'not-allowed' : 'pointer'
+                          }}
+                        >
+                          {addedToCart[plant.name] ? 'Added' : 'Add to Cart'}
+                        </button>
 
+                      </div>
+                    ))}
+                  </div>
                 </div>
-            ) : (
-                <CartItem onContinueShopping={handleContinueShopping} />
-            )}
-        </div>
+              );
+            })
+            }
+          </div>
+        ) : (
+          <CartItem onContinueShopping={handleContinueShopping} onRemoveFromCart={handleRemoveFromCart} />
+        )}
+      </div>
     );
 }
 

diff --git a/vercel.json b/vercel.json
@@ -0,0 +1,9 @@
+{
+  "cleanUrls": true,
+  "rewrites": [
+    {
+      "source": "/((?!assets/|static/|favicon.ico|robots.txt).*)",
+      "destination": "/index.html"
+    }
+  ]
+}
diff --git a/vite.config.js b/vite.config.js
@@ -3,6 +3,6 @@ import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  base: "/shoppingreact",
+  base: "./",
   plugins: [react()],
 })