Merge pull request #22 from ThatNinjaGuy/develop

Develop

app/(tabs)/_layout.js

@@ -26,6 +26,18 @@ export default function TabLayout() {
           ),
         }}
       />
+      <Tabs.Screen
+        name="tables"
+        options={{
+          title: "Tables",
+          tabBarIcon: ({ color, focused }) => (
+            <TabBarIcon
+              name={focused ? "code-slash" : "code-slash-outline"}
+              color={color}
+            />
+          ),
+        }}
+      />
       <Tabs.Screen
         name="orders"
         options={{

app/(tabs)/orders.tsx

@@ -1,11 +1,12 @@
 import React from "react";
-import RestaurantTablesScreen from "@/screens/OrdersScreen/RestaurantTablesScreen";
+import OrdersScreenContainer from "@/screens/OrdersScreen/OrdersScreenContainer";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
+// import { Provider as PaperProvider } from "react-native-paper";
 
 export default function MenuScreen() {
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
-      <RestaurantTablesScreen />
+      <OrdersScreenContainer />
     </GestureHandlerRootView>
   );
 }

app/(tabs)/tables.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import RestaurantTablesScreen from "@/screens/TablesScreen/RestaurantTablesScreen";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+
+export default function MenuScreen() {
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <RestaurantTablesScreen />
+    </GestureHandlerRootView>
+  );
+}

components/OrderTaking/OrderDetails.js

@@ -1,49 +1,53 @@
-import React, { useState, useEffect } from "react";
 import { StyleSheet, FlatList, Platform } from "react-native";
 import Icon from "react-native-vector-icons/MaterialIcons";
 import { ThemedView } from "../common/ThemedView";
 import { ThemedText } from "../common/ThemedText";
 import ThemedButton from "../common/ThemedButton";
+import { generateUUID } from "@/utils/uuidGenerator";
 
 const OrderDetails = ({
   style,
   orders,
   increaseQuantity,
   decreaseQuantity,
-  removeItem,
 }) => {
-  const [orderItems, setOrderItems] = useState(orders);
+  const handleIncreaseQuantityClick = (item) => {
+    const orderItem = {
+      id: generateUUID(),
+      menuItemId: item.menuItemId,
+      name: item.name,
+      category: item.category,
+      cuisine: item.cuisine,
+      price: item.price,
+      searchableKey: item.searchableKey,
+      dietaryPreference: item.dietaryPreference,
+      image: item.image,
+      quantity: 1,
+      status: "ACTIVE",
+      itemValue: parseFloat(item.price) || 0, // Convert price to a number,
+      orderTimestamp: Date.now(),
+    };
+    increaseQuantity(orderItem);
+  };
 
-  useEffect(() => {
-    setOrderItems(orders);
-  }, [orders]);
-
-  const renderOrderItem = ({ item, index }) => (
+  const renderOrderItem = ({ item }) => (
     <ThemedView style={styles.container}>
       <ThemedView style={styles.orderItem}>
-        <ThemedButton
-          onPress={() => removeItem(index)}
-          style={styles.removeItemButton}
-        >
-          <Icon name="close" size={30} color="#f00" />
-        </ThemedButton>
         <ThemedView style={styles.itemDetailsContainer}>
           <ThemedText style={styles.itemName}>{item.name}</ThemedText>
-          <ThemedText style={styles.itemPrice}>
-            @ ₹ {item.price.toFixed(2)}
-          </ThemedText>
+          <ThemedText style={styles.itemPrice}>@ ₹ {item.price}</ThemedText>
         </ThemedView>
         <ThemedView style={styles.quantityContainer}>
           <ThemedView style={styles.quantityManipulator}>
             <ThemedButton
-              onPress={() => decreaseQuantity(index)}
+              onPress={() => decreaseQuantity(item)}
               style={styles.quantityButton}
             >
               <Icon name="remove" size={24} color="#000" />
             </ThemedButton>
             <ThemedText style={styles.quantityText}>{item.quantity}</ThemedText>
             <ThemedButton
-              onPress={() => increaseQuantity(index)}
+              onPress={() => handleIncreaseQuantityClick(item)}
               style={styles.quantityButton}
             >
               <Icon name="add" size={24} color="#000" />
@@ -59,7 +63,7 @@ const OrderDetails = ({
 
   return (
     <ThemedView style={[styles.orderDetails, style]}>
-      {orders.length === 0 ? (
+      {!orders || orders.length === 0 ? (
         <>
           <ThemedText>No item selected</ThemedText>
           <ThemedText>Please select item from left menu item</ThemedText>

components/OrderTaking/OrderManagement.js

@@ -9,14 +9,28 @@ import FloatingCloseButton from "@/components/FloatingCloseButton/FloatingCloseB
 import { ThemedView } from "../common/ThemedView";
 import { collection, getDocs } from "firebase/firestore";
 import { db } from "@/firebase/firebaseConfig";
+import { aggregateOrders } from "@/utils/orderManagement";
+import { generateUUID } from "@/utils/uuidGenerator";
 
 const OrderManagement = ({ items, onClose, updateOrder }) => {
-  const [selectedCategory, setSelectedCategory] = useState(0);
+  const [menuItems, setMenuItems] = useState([]);
   const [selectedMenu, setSelectedMenu] = useState();
-  const [orders, setOrders] = useState(items ? items : []);
 
-  const [menuItems, setMenuItems] = useState([]);
   const [categories, setCategories] = useState([]);
+  const [selectedCategory, setSelectedCategory] = useState(0);
+
+  const [rawOrders, setRawOrders] = useState(items ? items : []);
+  const [orders, setOrders] = useState([]);
+
+  const { width } = useWindowDimensions();
+  const isLargeScreen = width > 768; // Adjust the breakpoint as needed
+
+  useEffect(() => {
+    if (selectedCategory == 0) return setSelectedMenu(getFavoriteItems());
+    setSelectedMenu(
+      menuItems.filter((item) => item.category === categories[selectedCategory])
+    );
+  }, [selectedCategory, menuItems]);
 
   useEffect(() => {
     const fetchMenuItems = async () => {
@@ -42,68 +56,67 @@ const OrderManagement = ({ items, onClose, updateOrder }) => {
     fetchMenuItems();
   }, []);
 
+  // Update orders whenever rawOrders changes
   useEffect(() => {
-    if (selectedCategory == 0) return setSelectedMenu(getFavoriteItems());
-    setSelectedMenu(
-      menuItems.filter((item) => item.category === categories[selectedCategory])
-    );
-  }, [selectedCategory, menuItems]);
+    const aggOrders = aggregateOrders(rawOrders);
+    setOrders(aggOrders);
+  }, [rawOrders]);
 
-  useEffect(() => updateOrder(orders), [orders]);
+  // Update Firebase whenever orders change
+  useEffect(() => {
+    updateOrder(rawOrders);
+  }, [rawOrders]);
 
   const onSidebarItemClicked = (item, idx) => {
     setSelectedCategory(idx);
   };
 
-  const onMenuItemClick = (item, index) => {
-    const idx = getItemIndexInOrderBook(item);
-    if (idx === -1) {
-      // Add new item to the order
-      item.quantity = 1;
-      item.itemValue = item.price * item.quantity;
-      setOrders([...orders, item]);
-    } else increaseQuantity(idx);
-  };
-
-  const getItemIndexInOrderBook = (item) => {
-    return orders.findIndex(
-      (orderItem) =>
-        orderItem.name === item.name && orderItem.category === item.category
-    );
+  const onMenuItemClick = (item) => {
+    const orderItem = {
+      id: generateUUID(),
+      menuItemId: item.id,
+      name: item.name,
+      category: item.category,
+      cuisine: item.cuisine,
+      price: item.price,
+      searchableKey: item.searchableKey,
+      dietaryPreference: item.type,
+      image: item.image,
+      quantity: 1,
+      status: "ACTIVE",
+      itemValue: parseFloat(item.price) || 0, // Convert price to a number,
+      orderTimestamp: Date.now(),
+    };
+    addItem(orderItem);
   };
 
-  const increaseQuantity = (index) => {
-    const newOrderItems = [...orders];
-    newOrderItems[index].quantity += 1;
-    newOrderItems[index].itemValue =
-      newOrderItems[index].price * newOrderItems[index].quantity;
-    setOrders(newOrderItems);
+  const addItem = (item) => {
+    setRawOrders([...rawOrders, item]);
   };
 
-  const decreaseQuantity = (index) => {
-    const newOrderItems = [...orders];
-    if (newOrderItems[index].quantity > 1) {
-      newOrderItems[index].quantity -= 1;
-      newOrderItems[index].itemValue =
-        newOrderItems[index].price * newOrderItems[index].quantity;
-      setOrders(newOrderItems);
-    } else removeItem(index);
-  };
+  const removeItem = (item) => {
+    // Find the first item with the same name, category, and status ACTIVE
+    const index = rawOrders.findIndex(
+      (orderItem) =>
+        orderItem.name === item.name &&
+        orderItem.category === item.category &&
+        orderItem.status === "ACTIVE"
+    );
 
-  const removeItem = (index) => {
-    const newOrders = [...orders]; // Create a copy of the orders array
-    newOrders.splice(index, 1); // Remove the item at the specified index
-    setOrders(newOrders); // Update the state with the new array
+    if (index !== -1) {
+      const newOrders = [...rawOrders]; // Create a copy of the orders array
+      newOrders.splice(index, 1); // Remove the item at the specified index
+      setRawOrders(newOrders); // Update the state with the new array
+    } else {
+      console.log("No active item found to decrease quantity.");
+    }
   };
 
   const getFavoriteItems = () => {
     return menuItems;
     // return menuItems.filter((item) => item.orderCountPercentile > 70);
   };
 
-  const { width } = useWindowDimensions();
-  const isLargeScreen = width > 768; // Adjust the breakpoint as needed
-
   return (
     <ThemedView style={styles.mainContainer}>
       {/* <HeaderSection /> */}
@@ -137,9 +150,8 @@ const OrderManagement = ({ items, onClose, updateOrder }) => {
           <OrderDetails
             orders={orders}
             style={styles.orderDetails}
-            increaseQuantity={increaseQuantity}
-            decreaseQuantity={decreaseQuantity}
-            removeItem={removeItem}
+            increaseQuantity={addItem}
+            decreaseQuantity={removeItem}
           />
           <PaymentOptions style={styles.paymentOptions} onSave={onClose} />
         </ThemedView>