From f1a8e2c08318fd02c50c9cb16ca72f18207b684f Mon Sep 17 00:00:00 2001 From: Anna Date: Sat, 2 Nov 2024 21:36:28 +0100 Subject: [PATCH 01/21] feat : svg functionnal (front) --- apps/frontend-common-space/src/app/app.tsx | 2 + libs/ui/common/src/index.ts | 1 + .../common/src/lib/dining/diningRoomSvg.tsx | 31 +--- libs/ui/common/src/lib/utils/SvgTablePath.tsx | 172 +++++++++++++++++- libs/ui/common/src/lib/utils/oneTable.svg | 10 + libs/ui/common/src/lib/utils/test.svg | 34 ++++ .../common/src/lib/utils/uniqueSvgTable.tsx | 29 +++ 7 files changed, 254 insertions(+), 25 deletions(-) create mode 100644 libs/ui/common/src/lib/utils/oneTable.svg create mode 100644 libs/ui/common/src/lib/utils/test.svg create mode 100644 libs/ui/common/src/lib/utils/uniqueSvgTable.tsx diff --git a/apps/frontend-common-space/src/app/app.tsx b/apps/frontend-common-space/src/app/app.tsx index 89eb91b..2cc2e55 100644 --- a/apps/frontend-common-space/src/app/app.tsx +++ b/apps/frontend-common-space/src/app/app.tsx @@ -4,6 +4,7 @@ import { DiningRoomTables, MealSelectionForPayment, PayementAsignee, + TableSvg } from '@spos/ui/common'; import { Box } from '@mui/material'; @@ -40,6 +41,7 @@ export function App() { path={"/mealSelectionForPayment/:groupId/:tableNumber"} element={} /> + {/* END: routes */} diff --git a/libs/ui/common/src/index.ts b/libs/ui/common/src/index.ts index 3d23879..8dc4e32 100644 --- a/libs/ui/common/src/index.ts +++ b/libs/ui/common/src/index.ts @@ -26,3 +26,4 @@ export * from './lib/dining/diningRoomTables'; export * from './lib/dining/diningIndividualRoomTables'; export * from './lib/commandsR/mealSelectionForPayment'; export * from './lib/commandsR/stores/cart'; +export * from './lib/utils/uniqueSvgTable'; diff --git a/libs/ui/common/src/lib/dining/diningRoomSvg.tsx b/libs/ui/common/src/lib/dining/diningRoomSvg.tsx index 6255979..2215166 100644 --- a/libs/ui/common/src/lib/dining/diningRoomSvg.tsx +++ b/libs/ui/common/src/lib/dining/diningRoomSvg.tsx @@ -1,5 +1,7 @@ import React, { useEffect, useRef, useState } from 'react'; -import { TablePaths } from '../utils/SvgTablePath'; +//import { TablePaths } from '../utils/SvgTablePath'; + +import { TablesSvgGrid } from '../utils/SvgTablePath'; interface DiningRoomSVGProps { onSelectionChange: (hasSelection: boolean) => void; @@ -17,7 +19,7 @@ const DiningRoomSVG = ({ onSelectionChange }: DiningRoomSVGProps) => { const groups = { - 1: [0,1,2,3,4,5,6,7,8], + 1: [1,2,3,4,5,6,7,8,9], 2: [], 3: [], }; @@ -71,31 +73,14 @@ const DiningRoomSVG = ({ onSelectionChange }: DiningRoomSVGProps) => { }; return ( - - - Created by potrace 1.10, written by Peter Selinger 2001-2011 - - - - + - - - + ); }; diff --git a/libs/ui/common/src/lib/utils/SvgTablePath.tsx b/libs/ui/common/src/lib/utils/SvgTablePath.tsx index 806068a..b73e8ac 100644 --- a/libs/ui/common/src/lib/utils/SvgTablePath.tsx +++ b/libs/ui/common/src/lib/utils/SvgTablePath.tsx @@ -236,7 +236,7 @@ const tablePaths: TablePath[] = [ text: 'YOU', }, ]; - +/* export const TablePaths: React.FC = ({ handleTableClick, getTableColor }) => { return ( <> @@ -249,4 +249,172 @@ export const TablePaths: React.FC = ({ handleTableClick, getTab ))} ); -}; \ No newline at end of file +};*/ + +import TableSvg from './uniqueSvgTable'; + +export const TablesSvgGrid: React.FC = ({ handleTableClick, getTableColor }) =>{ + + return ( +
+
+ + +
+
+ +
+
+ + +
+
+ +
+ +
+ + +
+
+ + +
+ +
+ + +
+
+ +
+
+ + +
+
+ ); +} + diff --git a/libs/ui/common/src/lib/utils/oneTable.svg b/libs/ui/common/src/lib/utils/oneTable.svg new file mode 100644 index 0000000..f468d62 --- /dev/null +++ b/libs/ui/common/src/lib/utils/oneTable.svg @@ -0,0 +1,10 @@ + + + Created by potrace 1.10, written by Peter Selinger 2001-2011 + + Layer 1 + + + + + \ No newline at end of file diff --git a/libs/ui/common/src/lib/utils/test.svg b/libs/ui/common/src/lib/utils/test.svg new file mode 100644 index 0000000..e0d32b1 --- /dev/null +++ b/libs/ui/common/src/lib/utils/test.svg @@ -0,0 +1,34 @@ + + + + +Created by potrace 1.10, written by Peter Selinger 2001-2011 + + + + + diff --git a/libs/ui/common/src/lib/utils/uniqueSvgTable.tsx b/libs/ui/common/src/lib/utils/uniqueSvgTable.tsx new file mode 100644 index 0000000..d53614e --- /dev/null +++ b/libs/ui/common/src/lib/utils/uniqueSvgTable.tsx @@ -0,0 +1,29 @@ +import React from 'react'; + +interface TableSvgProps { + index: number; + handleTableClick: (index: number) => void; + getTableColor: (index: number) => string; + isCurrentTable: boolean; +} + +const TableSvg: React.FC = ({ + index, + handleTableClick, + getTableColor, + isCurrentTable +}) => { + return ( + + handleTableClick(index)} + pointerEvents="bounding-box" + fill={getTableColor(index)} + transform="matrix(0.447055 0 0 -0.447055 -20.0258 -47.6671)"> + + + + ); +} +export default TableSvg; \ No newline at end of file From 3bfbd1c398b35dff1a3831ff0f5e6fe99e8ddff1 Mon Sep 17 00:00:00 2001 From: Anna Date: Sat, 2 Nov 2024 22:06:30 +0100 Subject: [PATCH 02/21] feat : add navigation for the tableID --- apps/frontend-common-space/src/app/app.tsx | 3 +-- .../lib/commandsR/mealSelectionForPayment.tsx | 4 ++-- .../common/src/lib/dining/diningRoomSvg.tsx | 22 ++++++++++--------- .../utils/mealSelectionForPaymentFooter.tsx | 1 + 4 files changed, 16 insertions(+), 14 deletions(-) diff --git a/apps/frontend-common-space/src/app/app.tsx b/apps/frontend-common-space/src/app/app.tsx index 2cc2e55..b93cb45 100644 --- a/apps/frontend-common-space/src/app/app.tsx +++ b/apps/frontend-common-space/src/app/app.tsx @@ -4,7 +4,6 @@ import { DiningRoomTables, MealSelectionForPayment, PayementAsignee, - TableSvg } from '@spos/ui/common'; import { Box } from '@mui/material'; @@ -36,7 +35,7 @@ export function App() { } /> - } /> + } /> } diff --git a/libs/ui/common/src/lib/commandsR/mealSelectionForPayment.tsx b/libs/ui/common/src/lib/commandsR/mealSelectionForPayment.tsx index fb328b3..2f4746b 100644 --- a/libs/ui/common/src/lib/commandsR/mealSelectionForPayment.tsx +++ b/libs/ui/common/src/lib/commandsR/mealSelectionForPayment.tsx @@ -43,14 +43,14 @@ export function MealSelectionForPayment() { function handleSelectWhoPays() { console.log('Select who pays button clicked'); - //navigate(`/diningRoomTables/${tableNumber}`); navigate(`/payementAsignee/`); } function handleGroupClick() { console.log('Group button clicked'); - navigate(`/diningRoomTables/`); + navigate(`/diningRoomTables/${groupId}/${tableNumber}`); + //navigate(`/diningRoomTables/`); } diff --git a/libs/ui/common/src/lib/dining/diningRoomSvg.tsx b/libs/ui/common/src/lib/dining/diningRoomSvg.tsx index 2215166..817d7f7 100644 --- a/libs/ui/common/src/lib/dining/diningRoomSvg.tsx +++ b/libs/ui/common/src/lib/dining/diningRoomSvg.tsx @@ -2,27 +2,32 @@ import React, { useEffect, useRef, useState } from 'react'; //import { TablePaths } from '../utils/SvgTablePath'; import { TablesSvgGrid } from '../utils/SvgTablePath'; +import { useNavigate, useParams } from 'react-router-dom'; interface DiningRoomSVGProps { onSelectionChange: (hasSelection: boolean) => void; } const DiningRoomSVG = ({ onSelectionChange }: DiningRoomSVGProps) => { + const navigate = useNavigate(); + const { groupId, tableNumber } = useParams<{ + groupId: string; + tableNumber: string; + }>(); - - const [userTable] = useState(5); + const [userTable] = useState(tableNumber ? parseInt(tableNumber, 10) : undefined); const [selectedTables, setSelectedTables] = useState(new Set()); + const groups = { + 1: [1,2,3,4,5,6,7,8,9], + 2: [], + 3: [], + }; useEffect(() => { onSelectionChange(selectedTables.size > 0); }, [selectedTables, onSelectionChange]); - const groups = { - 1: [1,2,3,4,5,6,7,8,9], - 2: [], - 3: [], - }; const getTableGroup = (tableIndex: number) => { //console.log("____________") @@ -57,9 +62,6 @@ const DiningRoomSVG = ({ onSelectionChange }: DiningRoomSVGProps) => { setSelectedTables(newSet); - - //onSelectionChange(newSet.size > 0); - return newSet; }); } diff --git a/libs/ui/common/src/lib/utils/mealSelectionForPaymentFooter.tsx b/libs/ui/common/src/lib/utils/mealSelectionForPaymentFooter.tsx index 857d4ea..9ebb3ad 100644 --- a/libs/ui/common/src/lib/utils/mealSelectionForPaymentFooter.tsx +++ b/libs/ui/common/src/lib/utils/mealSelectionForPaymentFooter.tsx @@ -26,6 +26,7 @@ const Footer: React.FC = ({ onClose, onSelectWhoPays, onGroupClick const handleIconTouchEnd = (e: React.TouchEvent) => { e.currentTarget.style.color = '#0A1E3F'; e.currentTarget.style.transform = 'scale(2.5)'; + //Navigate group id et table id }; return ( From 7df3d5aba1d8c9e7b552821d54c4348d0d17ccea Mon Sep 17 00:00:00 2001 From: Anna Date: Sat, 2 Nov 2024 22:19:10 +0100 Subject: [PATCH 03/21] feat : add return navigate for diningRoomTables --- libs/ui/common/src/lib/dining/diningRoomTables.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/libs/ui/common/src/lib/dining/diningRoomTables.tsx b/libs/ui/common/src/lib/dining/diningRoomTables.tsx index f0e2495..33733e0 100644 --- a/libs/ui/common/src/lib/dining/diningRoomTables.tsx +++ b/libs/ui/common/src/lib/dining/diningRoomTables.tsx @@ -2,12 +2,21 @@ import React, { useState } from 'react'; import './diningRoomTables.css'; import DiningRoomSVG from './diningRoomSvg'; import DiningHeader from './diningHeader'; +import { useNavigate, useParams } from 'react-router-dom'; export function DiningRoomTables() { + const navigate = useNavigate(); + const { groupId, tableNumber } = useParams<{ + groupId: string; + tableNumber: string; + }>(); + const [hasSelection, setHasSelection] = useState(false); const handleBackClick = () => { console.log('Back button clicked'); + navigate(`/mealSelectionForPayment/${groupId}/${tableNumber}`); + }; const handleContinueClick = () => { From d4042df77655c2f06809db5a977e13ebeaad2f3e Mon Sep 17 00:00:00 2001 From: Anna Date: Sun, 3 Nov 2024 01:04:52 +0100 Subject: [PATCH 04/21] feat : add backend group taking for diningRoomSvg --- .../lib/commandsR/mealSelectionForPayment.tsx | 8 +- .../common/src/lib/dining/diningRoomSvg.tsx | 95 +++++++++++-------- 2 files changed, 60 insertions(+), 43 deletions(-) diff --git a/libs/ui/common/src/lib/commandsR/mealSelectionForPayment.tsx b/libs/ui/common/src/lib/commandsR/mealSelectionForPayment.tsx index 2f4746b..a16d169 100644 --- a/libs/ui/common/src/lib/commandsR/mealSelectionForPayment.tsx +++ b/libs/ui/common/src/lib/commandsR/mealSelectionForPayment.tsx @@ -84,6 +84,7 @@ function MealSelectionContent({ const currentTable = tableItems.find((table) => table.number === tableNumber); const itemIds = currentTable ? currentTable.elements.map((element) => element.item.id) : []; + const { data: catalog, isLoading: isLoadingCatalog } = useQuery({ queryKey: ['catalogMealSelectionForPayments', itemIds], queryFn: async () => { @@ -93,6 +94,11 @@ function MealSelectionContent({ enabled: itemIds.length > 0, refetchOnWindowFocus: 'always', }); + React.useEffect(() => { + if (itemIds.length > 0) { + console.log('Item ids changed:', itemIds); + } + }, [tableItems]); if (!tableItems || tableItems.length === 0) { return ( @@ -110,7 +116,7 @@ function MealSelectionContent({ My table (Nb {currentTable.number}) diff --git a/libs/ui/common/src/lib/dining/diningRoomSvg.tsx b/libs/ui/common/src/lib/dining/diningRoomSvg.tsx index 817d7f7..2cf76c4 100644 --- a/libs/ui/common/src/lib/dining/diningRoomSvg.tsx +++ b/libs/ui/common/src/lib/dining/diningRoomSvg.tsx @@ -3,6 +3,10 @@ import React, { useEffect, useRef, useState } from 'react'; import { TablesSvgGrid } from '../utils/SvgTablePath'; import { useNavigate, useParams } from 'react-router-dom'; +import { ContainerContext } from '../containerHook/containerContext'; +import { useQuery } from '@tanstack/react-query'; +import { GroupService, Table, TYPES } from '@spos/services/common'; +import { Typography } from '@mui/material'; interface DiningRoomSVGProps { onSelectionChange: (hasSelection: boolean) => void; @@ -14,54 +18,65 @@ const DiningRoomSVG = ({ onSelectionChange }: DiningRoomSVGProps) => { groupId: string; tableNumber: string; }>(); - - const [userTable] = useState(tableNumber ? parseInt(tableNumber, 10) : undefined); + const stringTableNumber = tableNumber; + const userTable = tableNumber ? parseInt(tableNumber, 10) : undefined; const [selectedTables, setSelectedTables] = useState(new Set()); - const groups = { - 1: [1,2,3,4,5,6,7,8,9], - 2: [], - 3: [], + const [tablesInGroup, setTablesInGroup] = useState([]); + + + + const container = React.useContext(ContainerContext); + const isValidTableNumber = (tableNumber: string | undefined): boolean => { + const isString = typeof tableNumber === 'string'; + console.log('Type de stringTableNumber:', typeof tableNumber); + return isString && tableNumber.trim() !== ''; }; + const { + data: group, + isLoading, + isError, + error, + } = useQuery({ + queryKey: ['groupWithTable', groupId], + queryFn: async () => { + const groupService: GroupService = container.get(TYPES.GroupService); + if (isValidTableNumber(groupId)) { + return groupService.getGroup(groupId); + } + throw new Error('groupId is undefined'); + }, + refetchOnWindowFocus: 'always', + enabled: !!groupId && groupId !== '', + }); + useEffect(() => { + if (group) { + setTablesInGroup(group.tables.map((table) => table.number)); + } + }, [group]); useEffect(() => { onSelectionChange(selectedTables.size > 0); }, [selectedTables, onSelectionChange]); - + if (isLoading) { + return Loading...; + } + + if (!group || isError) { + console.error(error); + return Error; + } - const getTableGroup = (tableIndex: number) => { - //console.log("____________") - //console.log(tableIndex) - return Object.entries(groups).find(([_, tables]) => - tables.includes(tableIndex) - )?.[0]; - }; const isInUserGroup = (tableIndex: number) => { - const userGroup = getTableGroup(userTable); - const tableGroup = getTableGroup(tableIndex); - return userGroup === tableGroup; + return tablesInGroup.includes(tableIndex) }; const handleTableClick = (index: number) => { - console.log(index) if (isInUserGroup(index) && index !== userTable) { - console.log("user table : ") - console.log(userTable) - console.log("-------------") - console.log(index) - - setSelectedTables((prev) => { + setSelectedTables(prev => { const newSet = new Set(prev); - if (newSet.has(index)) { - newSet.delete(index); - } else { - newSet.add(index); - } - console.log(`Selected tables: ${Array.from(newSet)}`); // Log des tables sélectionnées - - setSelectedTables(newSet); - + newSet.has(index) ? newSet.delete(index) : newSet.add(index); return newSet; }); } @@ -75,15 +90,11 @@ const DiningRoomSVG = ({ onSelectionChange }: DiningRoomSVGProps) => { }; return ( - - - - - + ); }; - export default DiningRoomSVG; + From 171e67f7500ab2ee66948589341b11f713d808f5 Mon Sep 17 00:00:00 2001 From: Anna Date: Sun, 3 Nov 2024 01:33:44 +0100 Subject: [PATCH 05/21] feat : add YOU text dynamically to userTable --- .../common/src/lib/dining/diningRoomSvg.tsx | 1 + libs/ui/common/src/lib/utils/SvgTablePath.tsx | 192 ++++-------------- 2 files changed, 42 insertions(+), 151 deletions(-) diff --git a/libs/ui/common/src/lib/dining/diningRoomSvg.tsx b/libs/ui/common/src/lib/dining/diningRoomSvg.tsx index 2cf76c4..348a2ff 100644 --- a/libs/ui/common/src/lib/dining/diningRoomSvg.tsx +++ b/libs/ui/common/src/lib/dining/diningRoomSvg.tsx @@ -93,6 +93,7 @@ const DiningRoomSVG = ({ onSelectionChange }: DiningRoomSVGProps) => { ); }; diff --git a/libs/ui/common/src/lib/utils/SvgTablePath.tsx b/libs/ui/common/src/lib/utils/SvgTablePath.tsx index b73e8ac..db8c97b 100644 --- a/libs/ui/common/src/lib/utils/SvgTablePath.tsx +++ b/libs/ui/common/src/lib/utils/SvgTablePath.tsx @@ -9,6 +9,7 @@ interface TablePath { interface TablePathsProps { handleTableClick: (index: number) => void; getTableColor: (index: number) => string; + userTableIndex: number; } @@ -252,9 +253,12 @@ export const TablePaths: React.FC = ({ handleTableClick, getTab };*/ import TableSvg from './uniqueSvgTable'; +import { Typography } from '@mui/material'; -export const TablesSvgGrid: React.FC = ({ handleTableClick, getTableColor }) =>{ +export const TablesSvgGrid: React.FC = ({ handleTableClick, getTableColor,userTableIndex }) => { + const userTableIndex2 = 2; + return (
= ({ handleTableClick, get gap: '0.2rem', }} > -
- - -
-
- -
-
- - -
-
- -
- -
- - -
-
- - -
- -
- - -
-
- -
-
- - -
+ {Array.from({ length: 9 }, (_, index) => { + const isCurrentTable = index + 1 === userTableIndex; + return ( +
+ {isCurrentTable ? ( + <> + + + YOU + + + ) : ( + + )} +
+ ); + })}
); } From 8bbc115cefd977a7b6f7354d4f91dada08b6c4c1 Mon Sep 17 00:00:00 2001 From: Anna Date: Sun, 3 Nov 2024 02:13:11 +0100 Subject: [PATCH 06/21] feat : add store for diningRoomSvg.tsx --- .../common/src/lib/dining/diningRoomSvg.tsx | 14 ++++---- .../lib/dining/stores/tableSelectionStore.tsx | 34 +++++++++++++++++++ 2 files changed, 41 insertions(+), 7 deletions(-) create mode 100644 libs/ui/common/src/lib/dining/stores/tableSelectionStore.tsx diff --git a/libs/ui/common/src/lib/dining/diningRoomSvg.tsx b/libs/ui/common/src/lib/dining/diningRoomSvg.tsx index 348a2ff..634d7c2 100644 --- a/libs/ui/common/src/lib/dining/diningRoomSvg.tsx +++ b/libs/ui/common/src/lib/dining/diningRoomSvg.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef, useState } from 'react'; //import { TablePaths } from '../utils/SvgTablePath'; - +import { useTableStore } from './stores/tableSelectionStore'; import { TablesSvgGrid } from '../utils/SvgTablePath'; import { useNavigate, useParams } from 'react-router-dom'; import { ContainerContext } from '../containerHook/containerContext'; @@ -20,8 +20,11 @@ const DiningRoomSVG = ({ onSelectionChange }: DiningRoomSVGProps) => { }>(); const stringTableNumber = tableNumber; const userTable = tableNumber ? parseInt(tableNumber, 10) : undefined; - const [selectedTables, setSelectedTables] = useState(new Set()); + //const [selectedTables, setSelectedTables] = useState(new Set()); const [tablesInGroup, setTablesInGroup] = useState([]); + const addTable = useTableStore((state) => state.addTable); + const removeTable = useTableStore((state) => state.removeTable); + const selectedTables = useTableStore((state) => state.selectedTables); @@ -74,12 +77,9 @@ const DiningRoomSVG = ({ onSelectionChange }: DiningRoomSVGProps) => { const handleTableClick = (index: number) => { if (isInUserGroup(index) && index !== userTable) { - setSelectedTables(prev => { - const newSet = new Set(prev); - newSet.has(index) ? newSet.delete(index) : newSet.add(index); - return newSet; - }); + selectedTables.has(index) ? removeTable(index) : addTable(index); } + }; const getTableColor = (index: number) => { diff --git a/libs/ui/common/src/lib/dining/stores/tableSelectionStore.tsx b/libs/ui/common/src/lib/dining/stores/tableSelectionStore.tsx new file mode 100644 index 0000000..2b138f2 --- /dev/null +++ b/libs/ui/common/src/lib/dining/stores/tableSelectionStore.tsx @@ -0,0 +1,34 @@ +import { create } from 'zustand'; + +interface TableStore { + selectedTables: Set; + addTable: (tableId: number) => void; + removeTable: (tableId: number) => void; + clearTables: () => void; +} + +export const useTableStore = create((set) => ({ + selectedTables: new Set(), + + addTable: (tableId) => + set((state) => { + const newSet = new Set(state.selectedTables); + newSet.add(tableId); + console.log(`Table ${tableId} added. Current selected tables:`, Array.from(newSet)); + return { selectedTables: newSet }; + }), + + removeTable: (tableId) => + set((state) => { + const newSet = new Set(state.selectedTables); + newSet.delete(tableId); + console.log(`Table ${tableId} removed. Current selected tables:`, Array.from(newSet)); + return { selectedTables: newSet }; + }), + + clearTables: () => + set(() => { + console.log('All tables cleared.'); + return { selectedTables: new Set() }; + }), +})); From 63acc702cff3199e7ed43c5077c1c0b2ad82dc68 Mon Sep 17 00:00:00 2001 From: Anna Date: Sun, 3 Nov 2024 09:12:28 +0100 Subject: [PATCH 07/21] feat : store but don t function --- .../lib/commandsR/mealSelectionForPayment.tsx | 13 +++- .../common/src/lib/commandsR/otherTables.tsx | 62 +++++++++++++++++++ .../common/src/lib/dining/diningRoomSvg.tsx | 1 - .../src/lib/dining/diningRoomTables.tsx | 1 + 4 files changed, 73 insertions(+), 4 deletions(-) create mode 100644 libs/ui/common/src/lib/commandsR/otherTables.tsx diff --git a/libs/ui/common/src/lib/commandsR/mealSelectionForPayment.tsx b/libs/ui/common/src/lib/commandsR/mealSelectionForPayment.tsx index a16d169..8400644 100644 --- a/libs/ui/common/src/lib/commandsR/mealSelectionForPayment.tsx +++ b/libs/ui/common/src/lib/commandsR/mealSelectionForPayment.tsx @@ -10,6 +10,8 @@ import { useContext } from 'react'; import { ContainerContext } from '../containerHook/containerContext'; import { useQuery } from '@tanstack/react-query'; import { CatalogueService, TYPES } from '@spos/services/common'; +import { useTableStore } from '../dining/stores/tableSelectionStore'; +import OtherTable from './otherTables'; interface MealSelectionContentProps { onClose: () => void; @@ -80,9 +82,13 @@ function MealSelectionContent({ }: MealSelectionContentProps) { const tableItems = useSSE('message', []); const container = React.useContext(ContainerContext); + //const selectedTables = useTableStore((state) => state.selectedTables ? Array.from(state.selectedTables) : []); const currentTable = tableItems.find((table) => table.number === tableNumber); - const itemIds = currentTable ? currentTable.elements.map((element) => element.item.id) : []; + //const otherTables = tableItems.filter((table) => selectedTables.includes(table.number) && table.number !== tableNumber); + //console.log("Selected Tables:", selectedTables); + + const itemIds = React.useMemo(() => currentTable ? currentTable.elements.map((element) => element.item.id) : [], [currentTable]); const { data: catalog, isLoading: isLoadingCatalog } = useQuery({ @@ -94,11 +100,11 @@ function MealSelectionContent({ enabled: itemIds.length > 0, refetchOnWindowFocus: 'always', }); - React.useEffect(() => { + /*React.useEffect(() => { if (itemIds.length > 0) { console.log('Item ids changed:', itemIds); } - }, [tableItems]); + }, [tableItems]);*/ if (!tableItems || tableItems.length === 0) { return ( @@ -165,6 +171,7 @@ function MealSelectionContent({ )} +