Development

frontend/src/components/Cart/CartItemsList.tsx

@@ -31,11 +31,15 @@ export const CartItemsList = () => {
   return (
     <div className="">
       <Stack direction="horizontal" gap={3} className="gap-3">
-        {itemSummaries.map((item) => (
-          <small style={{ marginLeft: "4px", fontSize: "11px" }} key={item.id}>
-            +{item.name.toLowerCase()} x {item.qty}
-          </small>
-        ))}
+        {itemSummaries.map((item) =>
+          item.qty > 0 ? (
+            <small style={{ marginLeft: "4px", fontSize: "11px" }} key={item.id}>
+              +{item.name.toLowerCase()} x {item.qty}
+            </small>
+          ) : (
+            ""
+          )
+        )}
       </Stack>
     </div>
   );

frontend/src/components/MenuItems/FoodItemList.tsx

@@ -6,9 +6,9 @@ import { storeItemProps } from "./StoreItem";
 type foodItem = storeItemProps & { itemId: string; itemPrice: number };
 
 export const FoodItemList = ({ name, itemId, itemPrice, id, basePrice }: Omit<foodItem, "items">) => {
-  const { addItemToCart, menus } = useShoppingCart();
+  const { addItemToCart, menus, removeItemFromCart } = useShoppingCart();
   let itemQty: number = 0;
-  const handleClick = () => {
+  const handleAddItemToCart = () => {
     return addItemToCart({
       id: itemId,
       name,
@@ -17,6 +17,15 @@ export const FoodItemList = ({ name, itemId, itemPrice, id, basePrice }: Omit<fo
       menuPrice: basePrice,
     });
   };
+  const handleRemoveItemFromCart = () => {
+    return removeItemFromCart({
+      id: itemId,
+      name,
+      price: itemPrice,
+      menuId: id,
+      menuPrice: basePrice,
+    });
+  };
   if (menus && menus.length) {
     const selectedItems = menus.map((menu) => menu.selectedItems || []);
     const flattenedSelectedItems = selectedItems.flat();
@@ -29,11 +38,11 @@ export const FoodItemList = ({ name, itemId, itemPrice, id, basePrice }: Omit<fo
   return (
     <>
       <Stack direction="horizontal" gap={3}>
-        <QtyButton sign={"increment"} onClick={handleClick} />
+        <QtyButton sign={"increment"} onClick={handleAddItemToCart} />
         <div>{name}</div>
         <div className=" ms-auto"> +RM {itemPrice}</div>
         <div>x {itemQty}</div>
-        <QtyButton sign={"decrement"} onClick={handleClick} />
+        <QtyButton sign={"decrement"} onClick={handleRemoveItemFromCart} />
       </Stack>
       <hr></hr>
     </>

frontend/src/contexts/shoppingCartContext.tsx

@@ -15,6 +15,7 @@ export type shoppingCartProps = {
   addToCart(cartItem: CartItem): void;
   removeFromCart(cartItem: CartItem): void;
   addItemToCart(menuItem: selectedItem): void;
+  removeItemFromCart(menuItem: selectedItem): void;
 };
 
 export const ShoppingCartProvider = ({ children }: shoppingCartProviderProps) => {
@@ -68,12 +69,41 @@ export const ShoppingCartProvider = ({ children }: shoppingCartProviderProps) =>
       });
     };
 
+    const removeItemFromCart = (menuItem: selectedItem) => {
+      let { menus } = state;
+      const menuItems: selectedItem[] = [];
+
+      for (const menu of menus) {
+        if (menu.id === menuItem.menuId) {
+          if (menu.selectedItems && menu.selectedItems.length) {
+            menuItems.push(...menu.selectedItems);
+          }
+        }
+      }
+
+      if (menuItems.length) {
+        for (let i = 0; i < menuItems.length; i++) {
+          const item = menuItems[i];
+          if (menuItem.id === item.id) {
+            if (item.quantity && item.quantity > 1) {
+              item.quantity -= 1;
+            } else {
+              item.quantity = 0;
+            }
+          }
+        }
+      }
+      console.log(state);
+      dispatch({
+        type: CartActionsType.REMOVE_ITEM_FROM_CART,
+      });
+    };
+
     const addItemToCart = (menuItem: selectedItem) => {
       let { menus } = state;
       let { price } = menuItem;
       const menu: Partial<CartItem> = selectedItemToMenuMapper(menuItem);
       if (!menus.length) {
-        menuItem.total = price;
         menuItem.quantity = 0;
         state.menus.push(menu);
       }
@@ -88,7 +118,6 @@ export const ShoppingCartProvider = ({ children }: shoppingCartProviderProps) =>
         if (selectedItems?.length) {
           const index = selectedItems.findIndex((item) => item.id === menuItem.id);
           if (index === -1) {
-            menuItem.total = price;
             menuItem.quantity = 0;
             selectedItems.push(menuItem);
           }
@@ -98,7 +127,6 @@ export const ShoppingCartProvider = ({ children }: shoppingCartProviderProps) =>
         for (const item of selectedItemMap.values()) {
           if (item.id === menuItem.id) {
             item.quantity! += 1;
-            item.total = item.total! + item.price;
           }
         }
       }
@@ -108,7 +136,6 @@ export const ShoppingCartProvider = ({ children }: shoppingCartProviderProps) =>
         selectedItems.forEach((item) => {
           totalItemPrice += item.quantity! * item.price;
         });
-        console.log(state);
         state.totalPrice = totalItemPrice + menuItem.menuPrice;
       }
 
@@ -133,6 +160,7 @@ export const ShoppingCartProvider = ({ children }: shoppingCartProviderProps) =>
       addToCart,
       removeFromCart,
       addItemToCart,
+      removeItemFromCart,
     };
     return value;
   }, [state]);

frontend/src/reducers/cartReducer.tsx

@@ -4,7 +4,7 @@ export enum CartActionsType {
   UPDATE_PRICE = "UPDATE_PRICE",
   GET_MENU_QUANTITY = "GET_MENU_QUANTITY",
   ADD_ITEM_TO_CART = "ADD_ITEM_TO_CART",
-  REMOVE_ITEM_TO_CART = "REMOVE_ITEM_TO_CART",
+  REMOVE_ITEM_FROM_CART = "REMOVE_ITEM_FROM_CART",
 }
 
 export type Item = {
@@ -19,7 +19,6 @@ export type selectedItem = {
   menuId: string;
   name: string;
   quantity?: number | 0;
-  total?: number;
   price: number;
   menuPrice: number;
 };
@@ -62,16 +61,14 @@ export const cartReducer = (state = initialCartState, action: CartAction): cartS
       return {
         ...state,
       };
-    // case CartActionsType.GET_MENU_QUANTITY:
-    //   let quantity = state.menus.length ?? state.menus.filter((item) => item.id === menuPayload!.id)?.length;
-    //   return {
-    //     ...state,
-    //     quantity: quantity,
-    //   };
     case CartActionsType.ADD_ITEM_TO_CART:
       return {
         ...state,
       };
+    case CartActionsType.REMOVE_ITEM_FROM_CART:
+      return {
+        ...state,
+      };
     default:
       throw new Error(`No case for type ${type} found in shopReducer.`);
   }