Merge pull request #255 from JeevaRamanathan/issues/update_items

added Increase or decrease items option in restaurants screen
Anandsg · Oct 18, 2023 · 606acc0 · 606acc0
2 parents 99599c5 + c786221
commit 606acc0
Show file tree

Hide file tree

Showing 3 changed files with 7,572 additions and 7,536 deletions.
diff --git a/src/components/RestaurantMenuAccordionDetails.js b/src/components/RestaurantMenuAccordionDetails.js
@@ -1,19 +1,35 @@
 import React from "react";
-
+import { FaMinus, FaPlus } from "react-icons/fa";
 import { CDN_URL } from "../utils/constants";
-import { useDispatch } from "react-redux";
-import { addItem } from "../utils/cartSlice";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  addItem,
+  increaseQuantity,
+  decreaseQuantity,
+} from "../utils/cartSlice";
 
 const RestaurantMenuAccordionDetails = (props) => {
   const { cardInfo, onClickAddFoodItem } = props;
   console.log(cardInfo.card.card.itemCards);
+  const cartItems = useSelector((store) => store.cart.items);
+
   const dispatch = useDispatch();
   const addItemHandler = (card) => {
     dispatch(addItem(card));
     onClickAddFoodItem();
   };
 
+  const increaseItemHandler = (id) => {
+    dispatch(increaseQuantity(id));
+  };
+  const decreaseItemHandler = (id) => {
+    dispatch(decreaseQuantity(id));
+  };
+
   return cardInfo.card?.card?.itemCards?.map((card) => {
+    const itemInCart = cartItems.find(
+      (item) => item.info.id === card.card.info.id
+    );
     return (
       <div
         className="flex flex-col justify-between border-b pb-6 mx-2 mb-4 gap-6 md:flex-row"
@@ -51,12 +67,26 @@ const RestaurantMenuAccordionDetails = (props) => {
             alt=""
             className="w-32 h-20 rounded self-center object-cover"
           />
-          <button
-            className="absolute bottom-[-8px] bg-white shadow-md border self-center text-[10px] py-1 px-4 font-medium rounded  active:scale-90 hover:bg-orange-200 transition-all duration-300 ease-in-out"
-            onClick={() => addItemHandler(card)}
-          >
-            ADD TO CART
-          </button>
+          {itemInCart ? (
+            <div className="flex space-x-5 absolute bottom-[-8px] bg-white shadow-md text-[10px] py-1 px-4 border self-center  font-medium rounded">
+              <FaMinus
+                onClick={() => decreaseItemHandler(card?.card?.info?.id)}
+                className="hover:scale-110 cursor-pointer transition-all duration-300 ease-in-out align-middle mt-1"
+              />
+              <span> {itemInCart.info.quantity}</span>
+              <FaPlus
+                onClick={() => increaseItemHandler(card?.card?.info?.id)}
+                className="hover:scale-110 cursor-pointer transition-all duration-300 ease-in-out mt-1"
+              />
+            </div>
+          ) : (
+            <button
+              className="absolute bottom-[-8px] bg-white shadow-md border self-center text-[10px] py-1 px-4 font-medium rounded  active:scale-90 hover:bg-orange-200 transition-all duration-300 ease-in-out"
+              onClick={() => addItemHandler(card)}
+            >
+              ADD TO CART
+            </button>
+          )}
         </div>
       </div>
     );

diff --git a/src/utils/cartSlice.js b/src/utils/cartSlice.js
@@ -15,9 +15,9 @@ const cartSlice = createSlice({
       console.log(index, "Index");
       console.log(state.items[index], "Index");
       if (index < 0) {
-        state.items.push({ ...action.payload.card });
-        state.items[state.items.length - 1].info.quantity = 1;
-      } else {
+        let data = { ...action.payload.card, info: { ...action.payload.card.info, quantity: 1 } };
+        state.items.push(data)
+       } else {
         state.items[index].info.quantity++;
       }
 
@@ -35,8 +35,14 @@ const cartSlice = createSlice({
       const index = state.items.findIndex(
         ({ info }) => info.id === action.payload
       );
-      if (index >= 0 && state.items[index].info.quantity > 1) {
+      if (index >= 0 && state.items[index].info.quantity >= 1) {
         state.items[index].info.quantity--;
+
+        if (state.items[index].info.quantity == 0) {
+          // state.items[index].info.quantity--;
+          state.items.splice(index, 1);
+          // removeItem(state,action)
+        }
       }
     },
     removeItem: (state, action) => {