Skip to main content

​
Overview

The useTableStore hook manages table session state in the TableOrder app. It stores the currently scanned table and tracks whether a dining session is active.

​
Usage

import { useTableStore } from '@/src/stores/useTableStore';

function CameraScanner() {
  const setTable = useTableStore((s) => s.setTable);
  const router = useRouter();

  const handleBarCodeScanned = ({ data }: BarCodeScanningResult) => {
    setTable(data);
    router.replace('/menu');
  };

  return (
    <CameraView
      onBarcodeScanned={handleBarCodeScanned}
      barcodeScannerSettings={{
        barcodeTypes: ['qr'],
      }}
    />
  );
}

​
State properties

​
currentTable
TableData | null
The currently active table session, or null if no table is selected
​
isSessionActive
boolean
Whether a table session is currently active

​
Actions

​
setTable

Sets the current table by looking up the table ID in the mock data. Automatically activates the session if the table exists.
​
id
string
required
The table identifier from the QR code scan
const setTable = useTableStore((s) => s.setTable);
setTable('TABLE_001');

​
clearSession

Clears the current table session and deactivates the session state. 
const clearSession = useTableStore((s) => s.clearSession);
clearSession();

​
Real-world example

import { useTableStore } from '@/src/stores/useTableStore';
import { useCartStore } from '@/src/stores/useCartStore';

function PaymentScreen() {
  const currentTable = useTableStore((s) => s.currentTable);
  const clearSession = useTableStore((s) => s.clearSession);
  const resetCart = useCartStore((s) => s.resetCart);

  const handlePaymentSuccess = () => {
    clearSession();
    resetCart();
    router.replace('/');
  };

  return (
    <View>
      {currentTable && (
        <Text>Table: {currentTable.displayName}</Text>
      )}
      <Button onPress={handlePaymentSuccess} title="Complete Order" />
    </View>
  );
}

​
Integration with menu logic

import { useTableStore } from '@/src/stores/useTableStore';
import { useCartStore } from '@/src/stores/useCartStore';

function useMenuLogic() {
  const currentTable = useTableStore((s) => s.currentTable);
  const setTable = useTableStore((s) => s.setTable);
  const setBirthdayMode = useCartStore((s) => s.setBirthdayMode);

  useEffect(() => {
    if (!currentTable) return;

    const isBirthday = currentTable.specialEvent === 'BIRTHDAY';
    if (isBirthday && currentTable.discount) {
      setBirthdayMode(true, currentTable.discount);
    }
  }, [currentTable, setBirthdayMode]);
}

​
Type definitions

type TableStatus = 'FREE' | 'OCCUPIED' | 'PAYING';
type MenuType = 'FULL' | 'DRINKS_ONLY';
type SpecialEvent = 'NONE' | 'BIRTHDAY';

interface TableData {
  id: string;
  displayName: string;
  status: TableStatus;
  menuType: MenuType;
  specialEvent: SpecialEvent;
  discount?: number;
  animation?: 'cake';
}