Release (#268)

* Development (#235) * update github workflow yaml file * rename the frontend folder * Development (#237) * update github workflow yaml file * rename the frontend folder * create the checkout button * Development (#239) * update github workflow yaml file * rename the frontend folder * create the checkout button * create dynamic route * update the routing definition and getmenubyId API call * Merge branch 'development' of github.com:olasunkanmi-SE/restaurant into development * remove the styling for menu name * Development (#241) * update github workflow yaml file * rename the frontend folder * create the checkout button * create dynamic route * update the routing definition and getmenubyId API call * Merge branch 'development' of github.com:olasunkanmi-SE/restaurant into development * remove the styling for menu name * optimize the components * conditionally render the checkout component * remove code smell * Development (#242) * update github workflow yaml file * rename the frontend folder * create the checkout button * create dynamic route * update the routing definition and getmenubyId API call * Merge branch 'development' of github.com:olasunkanmi-SE/restaurant into development * remove the styling for menu name * optimize the components * conditionally render the checkout component * remove code smell * Merge branch 'release' into development * Development (#244) * update github workflow yaml file * rename the frontend folder * create the checkout button * create dynamic route * update the routing definition and getmenubyId API call * Merge branch 'development' of github.com:olasunkanmi-SE/restaurant into development * remove the styling for menu name * optimize the components * conditionally render the checkout component * remove code smell * Merge branch 'release' into development * update the menu item page and clean up the navigation * Development (#246) * update github workflow yaml file * rename the frontend folder * create the checkout button * create dynamic route * update the routing definition and getmenubyId API call * Merge branch 'development' of github.com:olasunkanmi-SE/restaurant into development * remove the styling for menu name * optimize the components * conditionally render the checkout component * remove code smell * Merge branch 'release' into development * update the menu item page and clean up the navigation * create the delete menu repo method, service and controller * create the delete menu API * Development (#248) * update github workflow yaml file * rename the frontend folder * create the checkout button * create dynamic route * update the routing definition and getmenubyId API call * Merge branch 'development' of github.com:olasunkanmi-SE/restaurant into development * remove the styling for menu name * optimize the components * conditionally render the checkout component * remove code smell * Merge branch 'release' into development * update the menu item page and clean up the navigation * create the delete menu repo method, service and controller * create the delete menu API * update food menu component to include item id * update food menu component to include item id * add the add menu item to cart functionality * implement add menu items to cart * fix build errors * fix code smell * Development (#250) * update github workflow yaml file * rename the frontend folder * create the checkout button * create dynamic route * update the routing definition and getmenubyId API call * Merge branch 'development' of github.com:olasunkanmi-SE/restaurant into development * remove the styling for menu name * optimize the components * conditionally render the checkout component * remove code smell * Merge branch 'release' into development * update the menu item page and clean up the navigation * create the delete menu repo method, service and controller * create the delete menu API * update food menu component to include item id * update food menu component to include item id * add the add menu item to cart functionality * implement add menu items to cart * fix build errors * fix code smell * create the item quantity button component * Development (#252) * update github workflow yaml file * rename the frontend folder * create the checkout button * create dynamic route * update the routing definition and getmenubyId API call * Merge branch 'development' of github.com:olasunkanmi-SE/restaurant into development * remove the styling for menu name * optimize the components * conditionally render the checkout component * remove code smell * Merge branch 'release' into development * update the menu item page and clean up the navigation * create the delete menu repo method, service and controller * create the delete menu API * update food menu component to include item id * update food menu component to include item id * add the add menu item to cart functionality * implement add menu items to cart * fix build errors * fix code smell * create the item quantity button component * update the menu list ui * Development (#254) * update github workflow yaml file * rename the frontend folder * create the checkout button * create dynamic route * update the routing definition and getmenubyId API call * Merge branch 'development' of github.com:olasunkanmi-SE/restaurant into development * remove the styling for menu name * optimize the components * conditionally render the checkout component * remove code smell * Merge branch 'release' into development * update the menu item page and clean up the navigation * create the delete menu repo method, service and controller * create the delete menu API * update food menu component to include item id * update food menu component to include item id * add the add menu item to cart functionality * implement add menu items to cart * fix build errors * fix code smell * create the item quantity button component * update the menu list ui * implement the add items to cart functionality * fix code smell * Development (#256) * update github workflow yaml file * rename the frontend folder * create the checkout button * create dynamic route * update the routing definition and getmenubyId API call * Merge branch 'development' of github.com:olasunkanmi-SE/restaurant into development * remove the styling for menu name * optimize the components * conditionally render the checkout component * remove code smell * Merge branch 'release' into development * update the menu item page and clean up the navigation * create the delete menu repo method, service and controller * create the delete menu API * update food menu component to include item id * update food menu component to include item id * add the add menu item to cart functionality * implement add menu items to cart * fix build errors * fix code smell * create the item quantity button component * update the menu list ui * implement the add items to cart functionality * fix code smell * create the selected items summary * update cart reducer * Development (#257) * update github workflow yaml file * rename the frontend folder * create the checkout button * create dynamic route * update the routing definition and getmenubyId API call * Merge branch 'development' of github.com:olasunkanmi-SE/restaurant into development * remove the styling for menu name * optimize the components * conditionally render the checkout component * remove code smell * Merge branch 'release' into development * update the menu item page and clean up the navigation * create the delete menu repo method, service and controller * create the delete menu API * update food menu component to include item id * update food menu component to include item id * add the add menu item to cart functionality * implement add menu items to cart * fix build errors * fix code smell * create the item quantity button component * update the menu list ui * implement the add items to cart functionality * fix code smell * create the selected items summary * update cart reducer * update the add item to cart implementation * Development (#259) * update github workflow yaml file * rename the frontend folder * create the checkout button * create dynamic route * update the routing definition and getmenubyId API call * Merge branch 'development' of github.com:olasunkanmi-SE/restaurant into development * remove the styling for menu name * optimize the components * conditionally render the checkout component * remove code smell * Merge branch 'release' into development * update the menu item page and clean up the navigation * create the delete menu repo method, service and controller * create the delete menu API * update food menu component to include item id * update food menu component to include item id * add the add menu item to cart functionality * implement add menu items to cart * fix build errors * fix code smell * create the item quantity button component * update the menu list ui * implement the add items to cart functionality * fix code smell * create the selected items summary * update cart reducer * update the add item to cart implementation * create folder structure for componsnts * Development (#261) * update github workflow yaml file * rename the frontend folder * create the checkout button * create dynamic route * update the routing definition and getmenubyId API call * Merge branch 'development' of github.com:olasunkanmi-SE/restaurant into development * remove the styling for menu name * optimize the components * conditionally render the checkout component * remove code smell * Merge branch 'release' into development * update the menu item page and clean up the navigation * create the delete menu repo method, service and controller * create the delete menu API * update food menu component to include item id * update food menu component to include item id * add the add menu item to cart functionality * implement add menu items to cart * fix build errors * fix code smell * create the item quantity button component * update the menu list ui * implement the add items to cart functionality * fix code smell * create the selected items summary * update cart reducer * update the add item to cart implementation * create folder structure for componsnts * implement the remove from cart functionality * Development (#262) * update github workflow yaml file * rename the frontend folder * create the checkout button * create dynamic route * update the routing definition and getmenubyId API call * Merge branch 'development' of github.com:olasunkanmi-SE/restaurant into development * remove the styling for menu name * optimize the components * conditionally render the checkout component * remove code smell * Merge branch 'release' into development * update the menu item page and clean up the navigation * create the delete menu repo method, service and controller * create the delete menu API * update food menu component to include item id * update food menu component to include item id * add the add menu item to cart functionality * implement add menu items to cart * fix build errors * fix code smell * create the item quantity button component * update the menu list ui * implement the add items to cart functionality * fix code smell * create the selected items summary * update cart reducer * update the add item to cart implementation * create folder structure for componsnts * implement the remove from cart functionality * implement the add to cart functionality * Development (#264) * update github workflow yaml file * rename the frontend folder * create the checkout button * create dynamic route * update the routing definition and getmenubyId API call * Merge branch 'development' of github.com:olasunkanmi-SE/restaurant into development * remove the styling for menu name * optimize the components * conditionally render the checkout component * remove code smell * Merge branch 'release' into development * update the menu item page and clean up the navigation * create the delete menu repo method, service and controller * create the delete menu API * update food menu component to include item id * update food menu component to include item id * add the add menu item to cart functionality * implement add menu items to cart * fix build errors * fix code smell * create the item quantity button component * update the menu list ui * implement the add items to cart functionality * fix code smell * create the selected items summary * update cart reducer * update the add item to cart implementation * create folder structure for componsnts * implement the remove from cart functionality * implement the add to cart functionality * rename add and remove from cart to add and remove menu from cart * remove the menuid from foodmenu component * create the shopping component * Development (#266) * update github workflow yaml file * rename the frontend folder * create the checkout button * create dynamic route * update the routing definition and getmenubyId API call * Merge branch 'development' of github.com:olasunkanmi-SE/restaurant into development * remove the styling for menu name * optimize the components * conditionally render the checkout component * remove code smell * Merge branch 'release' into development * update the menu item page and clean up the navigation * create the delete menu repo method, service and controller * create the delete menu API * update food menu component to include item id * update food menu component to include item id * add the add menu item to cart functionality * implement add menu items to cart * fix build errors * fix code smell * create the item quantity button component * update the menu list ui * implement the add items to cart functionality * fix code smell * create the selected items summary * update cart reducer * update the add item to cart implementation * create folder structure for componsnts * implement the remove from cart functionality * implement the add to cart functionality * rename add and remove from cart to add and remove menu from cart * remove the menuid from foodmenu component * create the shopping component * implement display menu quantity, also display only menu items ata a time * prevent increase in total price if the menu quantity is 1 * fix issues with totalprice calculations * fix issues with menu items reduction * merge conflicts * Development (#267) * update github workflow yaml file * rename the frontend folder * create the checkout button * create dynamic route * update the routing definition and getmenubyId API call * Merge branch 'development' of github.com:olasunkanmi-SE/restaurant into development * remove the styling for menu name * optimize the components * conditionally render the checkout component * remove code smell * Merge branch 'release' into development * update the menu item page and clean up the navigation * create the delete menu repo method, service and controller * create the delete menu API * update food menu component to include item id * update food menu component to include item id * add the add menu item to cart functionality * implement add menu items to cart * fix build errors * fix code smell * create the item quantity button component * update the menu list ui * implement the add items to cart functionality * fix code smell * create the selected items summary * update cart reducer * update the add item to cart implementation * create folder structure for componsnts * implement the remove from cart functionality * implement the add to cart functionality * rename add and remove from cart to add and remove menu from cart * remove the menuid from foodmenu component * create the shopping component * implement display menu quantity, also display only menu items ata a time * prevent increase in total price if the menu quantity is 1 * fix issues with totalprice calculations * fix issues with menu items reduction * fix the bug in shopping cart provider
olasunkanmi-SE · Apr 17, 2023 · 56cdbe2 · 56cdbe2
1 parent fe4b659
commit 56cdbe2
Show file tree

Hide file tree

Showing 5 changed files with 138 additions and 57 deletions.
diff --git a/frontend/src/application/mappers/MenuItem.mapper.ts b/frontend/src/application/mappers/MenuItem.mapper.ts
@@ -5,6 +5,7 @@ export const selectedItemToMenuMapper = (selectedItem: selectedItem): Partial<Ca
   const { menuId } = selectedItem;
   return {
     id: menuId,
+    menuPrice: selectedItem.menuPrice,
     selectedItems: [selectedItem],
   };
 };

diff --git a/frontend/src/components/Cart/AddMenuToCart.tsx b/frontend/src/components/Cart/AddMenuToCart.tsx
@@ -1,5 +1,6 @@
 import { CSSProperties } from "react";
 import { Button, Stack } from "react-bootstrap";
+import { useShoppingCart } from "../../hooks/UseShoppingCart";
 import { QtyButton } from "../MenuItems/addItemButton";
 
 const addToCartStyle: CSSProperties = {
@@ -8,26 +9,37 @@ const addToCartStyle: CSSProperties = {
 };
 
 type addItemToCart = {
+  basePrice: number;
+  id: string;
   amount: number;
   quantity: number;
   onAddMenuToCart: (event: React.MouseEvent<HTMLElement>) => void;
   onRemoveMenuFromCart: (event: React.MouseEvent<HTMLElement>) => void;
+  handleInCreaseQty: (event: React.MouseEvent<HTMLElement>) => void;
 };
 
-export const AddMenuToCartButton = ({ amount, quantity, onAddMenuToCart, onRemoveMenuFromCart }: addItemToCart) => {
+export const AddMenuToCartButton = ({
+  id,
+  quantity,
+  onAddMenuToCart,
+  onRemoveMenuFromCart,
+  basePrice,
+  handleInCreaseQty,
+}: addItemToCart) => {
+  const { itemPrice } = useShoppingCart();
   return (
     <Stack direction="horizontal" gap={3}>
       <div>
-        <QtyButton sign={"increment"} onClick={onAddMenuToCart} />
+        <QtyButton sign={"increment"} onClick={handleInCreaseQty} />
       </div>
-      <div>{quantity}</div>
+      <div>{quantity === 0 ? 1 : quantity}</div>
       <div>
         <QtyButton sign={"decrement"} onClick={onRemoveMenuFromCart} />
       </div>
       <div className="ms-auto">
         <div style={addToCartStyle}>
           <Button onClick={onAddMenuToCart} className="w-100 btn btn-success" variant="primary" type="submit">
-            ADD TO CART RM {amount}
+            ADD TO CART RM {itemPrice() === 0 ? basePrice : itemPrice()}
           </Button>
         </div>
       </div>

diff --git a/frontend/src/contexts/shoppingCartContext.tsx b/frontend/src/contexts/shoppingCartContext.tsx
@@ -15,11 +15,14 @@ export type shoppingCartProps = {
   quantity: number;
   openCart(): void;
   closeCart(): void;
-  addMenuToCart(payload: CartItem): void;
-  removeMenuFromCart(cartItem: CartItem): void;
+  addMenuToCart(payload: Partial<CartItem>): void;
+  removeMenuFromCart(cartItem: Partial<CartItem>): void;
   addItemToCart(menuItem: selectedItem): void;
   removeItemFromCart(menuItem: selectedItem): void;
   getMenuQuantity(id: string): number;
+  calculateMenuPriceFromMenuItems(id: string): number | undefined;
+  itemPrice(): number;
+  AddMoreMenu(id: string): number | undefined;
 };
 
 export const ShoppingCartProvider = ({ children }: shoppingCartProviderProps) => {
@@ -34,6 +37,15 @@ export const ShoppingCartProvider = ({ children }: shoppingCartProviderProps) =>
       setIsOpen(false);
     };
 
+    const AddMoreMenu = (id: string): number | undefined => {
+      const menu = state.menus.find((menu) => menu.id === id);
+      if (menu && menu.selectedItems) {
+        const menuPrice = calculateMenuPriceFromMenuItems(id)! * menu.quantity!;
+        state.menuPrice = menuPrice;
+      }
+      return state.menuPrice;
+    };
+
     const addMenuToCart = (payload: CartItem) => {
       let menus: Partial<CartItem>[] = state.menus;
 
@@ -51,8 +63,8 @@ export const ShoppingCartProvider = ({ children }: shoppingCartProviderProps) =>
           payload.quantity = 1;
         } else {
           if (!found.quantity) {
-            state.quantity += 1;
-            found.quantity = 1;
+            state.quantity = state.quantity === 0 ? state.quantity + 2 : (state.quantity += 1);
+            found.quantity = 2;
             state.totalPrice += payload.basePrice;
           } else {
             state.quantity += 1;
@@ -61,6 +73,7 @@ export const ShoppingCartProvider = ({ children }: shoppingCartProviderProps) =>
           }
         }
       }
+      AddMoreMenu(payload.id);
       dispatch({
         type: CartActionsType.ADD_MENU_TO_CART,
       });
@@ -98,32 +111,55 @@ export const ShoppingCartProvider = ({ children }: shoppingCartProviderProps) =>
     };
 
     const removeItemFromCart = (menuItem: selectedItem) => {
-      let { menus } = state;
-      const menuItems: selectedItem[] = [];
+      if (state.menuPrice) {
+        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);
+        for (const menu of menus) {
+          if (menu.id === menuItem.menuId) {
+            if (menu.selectedItems && menu.selectedItems.length) {
+              menuItems.push(...menu.selectedItems);
+            }
           }
         }
-      }
 
-      if (menuItems.length) {
-        for (const item of menuItems) {
-          if (menuItem.id === item.id) {
-            if (item.quantity && item.quantity >= 1) {
-              item.quantity -= 1;
-              state.totalPrice -= item.price;
-            } else {
-              item.quantity = 0;
+        if (menuItems.length) {
+          for (const item of menuItems) {
+            if (menuItem.id === item.id) {
+              if (item.quantity && item.quantity >= 1) {
+                item.quantity -= 1;
+                state.menuPrice -= item.price;
+              } else {
+                item.quantity = 0;
+              }
             }
           }
         }
+        calculateMenuPriceFromMenuItems(menuItem.menuId);
+        dispatch({
+          type: CartActionsType.REMOVE_ITEM_FROM_CART,
+        });
       }
-      dispatch({
-        type: CartActionsType.REMOVE_ITEM_FROM_CART,
-      });
+    };
+
+    const calculateMenuPriceFromMenuItems = (id: string): number | undefined => {
+      const menu: Partial<CartItem> | undefined = state.menus.find((menu) => menu.id === id);
+      let totalPrice: number = 0;
+      if (menu) {
+        const selectedItems: selectedItem[] = menu.selectedItems || [];
+        let orderPrice: number = 0;
+        if (selectedItems?.length) {
+          selectedItems.forEach((item) => {
+            orderPrice += item.price * (item.quantity ?? 1);
+          });
+          totalPrice = menu.menuPrice! + orderPrice;
+        }
+        return (state.menuPrice = totalPrice);
+      }
+    };
+
+    const itemPrice = (): number => {
+      return state.menuPrice;
     };
 
     const addItemToCart = (menuItem: selectedItem) => {
@@ -133,55 +169,73 @@ export const ShoppingCartProvider = ({ children }: shoppingCartProviderProps) =>
         menuItem.quantity = 0;
         state.menus.push(menu);
       }
-      if (menus.length) {
+      const itemMenu = menus.find((menu) => menu.id === menuItem.menuId);
+      if (menus.length && itemMenu && !itemMenu.quantity) {
         const index = menus.findIndex((menu) => menu.id === menuItem.menuId);
         if (index === -1) {
           menuItem.quantity = 0;
           state.menus.push(menu);
         }
-      }
-      let selectedItems: selectedItem[] | undefined = [];
-      const selectedItemMap = new Map<string, selectedItem>();
+        let selectedItems: selectedItem[] | undefined = [];
+        const selectedItemMap = new Map<string, selectedItem>();
 
-      if (state.menus.length) {
-        state.menus.forEach((menu) => {
-          if (menuItem.menuId === menu.id) {
-            selectedItems = menu.selectedItems || [];
-            if (!selectedItems?.length) {
+        if (state.menus.length) {
+          state.menus.forEach((menu) => {
+            if (menuItem.menuId === menu.id) {
+              selectedItems = menu.selectedItems || [];
+              if (!selectedItems?.length) {
+                menuItem.quantity = 0;
+                selectedItems.push(menuItem);
+              }
+            }
+          });
+
+          if (selectedItems?.length) {
+            const index = selectedItems.findIndex((item) => item.id === menuItem.id);
+            if (index === -1) {
               menuItem.quantity = 0;
               selectedItems.push(menuItem);
             }
           }
-        });
 
-        if (selectedItems?.length) {
-          const index = selectedItems.findIndex((item) => item.id === menuItem.id);
-          if (index === -1) {
-            menuItem.quantity = 0;
-            selectedItems.push(menuItem);
+          selectedItems?.forEach((item) => selectedItemMap.set(item.id, item));
+          for (const item of selectedItemMap.values()) {
+            if (item.id === menuItem.id) {
+              item.quantity! += 1;
+            }
           }
         }
 
-        selectedItems?.forEach((item) => selectedItemMap.set(item.id, item));
-        for (const item of selectedItemMap.values()) {
-          if (item.id === menuItem.id) {
-            item.quantity! += 1;
+        if (selectedItems && selectedItems.length) {
+          let totalItemPrice: number = 0;
+          if (state.quantity > 0) {
+            state.totalPrice += menuItem.price;
+          } else {
+            selectedItems.forEach((item) => {
+              totalItemPrice += item.quantity! * item.price;
+              state.totalPrice = totalItemPrice + menuItem.menuPrice;
+            });
           }
         }
-      }
-
-      if (selectedItems && selectedItems.length) {
-        let totalItemPrice: number = 0;
-        if (state.quantity > 0) {
-          state.totalPrice += menuItem.price;
-        } else {
-          selectedItems.forEach((item) => {
-            totalItemPrice += item.quantity! * item.price;
-            state.totalPrice = totalItemPrice + menuItem.menuPrice;
-          });
+        calculateMenuPriceFromMenuItems(menuItem.menuId);
+      } else {
+        if (itemMenu) {
+          const selectedItems: selectedItem[] | undefined = itemMenu.selectedItems;
+          if (selectedItems) {
+            const selectedItem = selectedItems.find((i) => i.id === menuItem.id);
+            if (selectedItem) {
+              selectedItem.quantity! += 1;
+              state.menuPrice = state.menuPrice + selectedItem.price * itemMenu.quantity!;
+            }
+            if (!selectedItem && selectedItems.length) {
+              menuItem.quantity = 1;
+              let itemTotal = 0;
+              selectedItems.push(menuItem);
+              state.menuPrice = state.menuPrice + menuItem.price * itemMenu.quantity!;
+            }
+          }
         }
       }
-
       dispatch({
         type: CartActionsType.ADD_ITEM_TO_CART,
       });
@@ -209,6 +263,9 @@ export const ShoppingCartProvider = ({ children }: shoppingCartProviderProps) =>
       getMenuQuantity,
       openCart,
       closeCart,
+      calculateMenuPriceFromMenuItems,
+      itemPrice,
+      AddMoreMenu,
     };
     return value;
   }, [state]);

diff --git a/frontend/src/pages/FoodMenu.tsx b/frontend/src/pages/FoodMenu.tsx
@@ -50,7 +50,10 @@ export const FoodMenu = () => {
                 <CartItemsList id={id} />
               </div>
               <AddMenuToCartButton
+                basePrice={basePrice}
+                id={id}
                 quantity={getMenuQuantity(id)}
+                handleInCreaseQty={() => addMenuToCart({ id, name, basePrice, quantity, items })}
                 onAddMenuToCart={() => addMenuToCart({ id, name, basePrice, quantity, items })}
                 amount={totalPrice > 0 ? totalPrice : basePrice}
                 onRemoveMenuFromCart={() => removeMenuFromCart({ id, name, basePrice, quantity, items })}

diff --git a/frontend/src/reducers/cartReducer.tsx b/frontend/src/reducers/cartReducer.tsx
@@ -5,6 +5,7 @@ export enum CartActionsType {
   GET_MENU_QUANTITY = "GET_MENU_QUANTITY",
   ADD_ITEM_TO_CART = "ADD_ITEM_TO_CART",
   REMOVE_ITEM_FROM_CART = "REMOVE_ITEM_FROM_CART",
+  GET_MENU_PRICE = "GET_MENU_PRICE",
 }
 
 export type Item = {
@@ -29,6 +30,7 @@ export type CartItem = {
   basePrice: number;
   quantity: number;
   items?: Item[];
+  menuPrice: number;
   selectedItems?: selectedItem[] | [];
 };
 
@@ -39,6 +41,7 @@ export type CartAction = {
 export const initialCartState: cartState = {
   totalPrice: 0,
   quantity: 0,
+  menuPrice: 0,
   menus: [],
   items: [],
 };
@@ -48,6 +51,7 @@ export type cartState = {
   quantity: number;
   menus: Partial<CartItem>[];
   items: Item[] | undefined;
+  menuPrice: number;
 };
 
 export const cartReducer = (state = initialCartState, action: CartAction): cartState => {
@@ -73,6 +77,10 @@ export const cartReducer = (state = initialCartState, action: CartAction): cartS
       return {
         ...state,
       };
+    case CartActionsType.GET_MENU_PRICE:
+      return {
+        ...state,
+      };
     default:
       throw new Error(`No case for type ${type} found in shopReducer.`);
   }