e-plantShopping

src/CartItem.jsx

@@ -7,9 +7,20 @@ const CartItem = ({ onContinueShopping }) => {
   const cart = useSelector(state => state.cart.items);
   const dispatch = useDispatch();
 
+  const [totalQuantity, setTotalQuantity] = useState(0);
+  useEffect(() => {
+    const total = cartItems.reduce((acc, item) => acc + item.quantity, 0);
+    setTotalQuantity(total);
+  }, [cartItems]);  
+
   // Calculate total amount for all products in the cart
-  const calculateTotalAmount = () => {
-
+  const calculateTotalAmount = (cart) => {
+    let totalAmount = 0;
+    for (let item of cart) {
+       totalAmount += item.quantity * item.cost;
+    }
+    return totalAmount;
+
   };
 
   const handleContinueShopping = (e) => {
@@ -19,22 +30,38 @@ const CartItem = ({ onContinueShopping }) => {
 
 
   const handleIncrement = (item) => {
+    dispatch(updateQuantity({ id: item.id, quantity: item.quantity + 1 }));
   };
 
   const handleDecrement = (item) => {
-
+    if (item.quantity === 1) {
+        dispatch(removeItem({ id: item.id }));
+      } else {
+        dispatch(updateQuantity({ id: item.id, quantity: item.quantity - 1 }));
+      }
   };
 
   const handleRemove = (item) => {
+    dispatch(removeItem({ id: item.id }));
   };
 
+  const handleCheckoutShopping = (e) => {
+  alert('Functionality to be added for future reference');
+};
+
   // Calculate total cost based on quantity for an item
   const calculateTotalCost = (item) => {
+    return item.price * item.quantity; 
   };
 
   return (
     <div className="cart-container">
       <h2 style={{ color: 'black' }}>Total Cart Amount: ${calculateTotalAmount()}</h2>
+      <nav>
+        <div className="cart-icon">
+        <span>{totalQuantity}</span>
+        </div>
+      </nav>     
       <div>
         {cart.map(item => (
           <div className="cart-item" key={item.name}>

src/CartSlice.jsx

@@ -7,12 +7,23 @@ export const CartSlice = createSlice({
   },
   reducers: {
     addItem: (state, action) => {
-
+      const { name, image, cost } = action.payload;
+      const existingItem = state.items.find(item => item.name === name);
+      if (existingItem) {
+         existingItem.quantity += 1;
+      } 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 { name, quantity } = action.payload;
+      const itemToUpdate = state.items.find(item => item.name === name);
+      if (itemToUpdate) {
+        itemToUpdate.quantity = quantity;
+}
 
     },
   },

src/ProductList.jsx

@@ -4,7 +4,9 @@ import CartItem from './CartItem';
 function ProductList() {
     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 dispatch = useDispatch();
+    const products = useSelector(state => state.products);
     const plantsArray = [
         {
             category: "Air Purifying Plants",
@@ -246,6 +248,14 @@ const handlePlantsClick = (e) => {
     e.preventDefault();
     setShowCart(false);
   };
+
+  const handleAddToCart = (product) => {
+    dispatch(addItem(product));
+    setAddedToCart((prevState) => ({
+       ...prevState,
+       [product.name]: true, // Set the product name as key and value as true to indicate it's added to cart
+     }));
+  };
     return (
         <div>
              <div className="navbar" style={styleObj}>
@@ -268,7 +278,21 @@ const handlePlantsClick = (e) => {
         </div>
         {!showCart? (
         <div className="product-grid">
-
+            {plantsArray.map((category, index) => (
+            <div key={index}>
+               <h1><div>{category.category}</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>
+                {/*Similarly like the above plant.name show other details like description and cost*/}
+                      <button  className="product-button" onClick={() => handleAddToCart(plant)}>Add to Cart</button>
+                 </div>
+                 ))}
+             </div>
+         </div>
+         ))}  
 
         </div>
  ) :  (

src/store.js

@@ -1,8 +1,10 @@
 import { configureStore } from '@reduxjs/toolkit';
 import cartReducer from './CartSlice';
+import productsReducer from './productsSlice'; 
  const store = configureStore({
     reducer: {
         cart: cartReducer,
+        products: productsReducer,
     },
 });
 export default store