From a57f971dcd196a4c620df9ec4278640f493d1715 Mon Sep 17 00:00:00 2001 From: Apoorva Srinivas Appadoo Date: Sun, 22 Sep 2024 16:37:19 +0200 Subject: [PATCH] feat(frontend-workflow): add state management to landingPage.tsx --- libs/ui/common/src/lib/tables/landingPage.tsx | 7 +- .../src/lib/tables/nbPeopleSelector.tsx | 44 +++-------- .../lib/tables/stores/currentSelectedGroup.ts | 25 ++++++ .../ui/common/src/lib/tables/stores/groups.ts | 18 +++++ .../ui/common/src/lib/tables/stores/tables.ts | 12 +++ libs/ui/common/src/lib/tables/tableSquare.tsx | 78 +++++++++++-------- 6 files changed, 114 insertions(+), 70 deletions(-) create mode 100644 libs/ui/common/src/lib/tables/stores/currentSelectedGroup.ts create mode 100644 libs/ui/common/src/lib/tables/stores/groups.ts create mode 100644 libs/ui/common/src/lib/tables/stores/tables.ts diff --git a/libs/ui/common/src/lib/tables/landingPage.tsx b/libs/ui/common/src/lib/tables/landingPage.tsx index 787a7a4..5fa5167 100644 --- a/libs/ui/common/src/lib/tables/landingPage.tsx +++ b/libs/ui/common/src/lib/tables/landingPage.tsx @@ -3,11 +3,12 @@ import TableSquare from './tableSquare'; import {Button, Typography, Box, Grid2 as Grid} from "@mui/material"; import * as React from 'react'; import {useState} from 'react'; +import {useTables} from "./stores/tables"; export function LandingPage() { const [totalPeople, setTotalPeople] = useState(0); const navigate = useNavigate(); - + const tables = useTables(state => state.tables); const validateTables = () => { console.log({totalPeople}) navigate("/offers") @@ -19,9 +20,9 @@ export function LandingPage() { Tables - {Array.from(Array(15)).map((_, index) => ( + {tables.map((value, index) => ( - + ))} diff --git a/libs/ui/common/src/lib/tables/nbPeopleSelector.tsx b/libs/ui/common/src/lib/tables/nbPeopleSelector.tsx index e5fd8b6..9512858 100644 --- a/libs/ui/common/src/lib/tables/nbPeopleSelector.tsx +++ b/libs/ui/common/src/lib/tables/nbPeopleSelector.tsx @@ -1,11 +1,6 @@ - -import {ReactNode, useState} from 'react'; import * as React from 'react'; -import { - Unstable_NumberInput as BaseNumberInput, - NumberInputProps, -} from '@mui/base/Unstable_NumberInput'; -import { styled } from '@mui/system'; +import {NumberInputProps, Unstable_NumberInput as BaseNumberInput,} from '@mui/base/Unstable_NumberInput'; +import {styled} from '@mui/system'; import RemoveIcon from '@mui/icons-material/Remove'; import AddIcon from '@mui/icons-material/Add'; @@ -23,14 +18,14 @@ const NumberInput = React.forwardRef(function CustomNumberInput( } as any} slotProps={{ incrementButton: { - children: , + children: , className: 'increment', }, decrementButton: { - children: , + children: , }, }} - {...props } + {...props} ref={ref} /> ); @@ -61,7 +56,7 @@ const grey = { }; const StyledInputRoot = styled('div')( - ({ theme }) => ` + ({theme}) => ` font-family: 'IBM Plex Sans', sans-serif; font-weight: 400; color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]}; @@ -73,7 +68,7 @@ const StyledInputRoot = styled('div')( ); const StyledInput = styled('input')( - ({ theme }) => ` + ({theme}) => ` font-size: 0.875rem; font-family: inherit; font-weight: 400; @@ -108,7 +103,7 @@ const StyledInput = styled('input')( ); const StyledButton = styled('button')( - ({ theme }) => ` + ({theme}) => ` font-family: 'IBM Plex Sans', sans-serif; font-size: 0.875rem; box-sizing: border-box; @@ -144,26 +139,5 @@ const StyledButton = styled('button')( } `, ); -export function NbPeopleSelector({totalPeople, setTotalPeople}) { - const [nbPeople, setNbPeople] = useState(0) - - const addPerson = () => { - setNbPeople(nbPeople + 1) - setTotalPeople(totalPeople + 1) - }; - - const removePerson = () => { - if (nbPeople > 0){ - setNbPeople(nbPeople - 1) - } - if (totalPeople > 0){ - setTotalPeople(totalPeople - 1) - } - }; - - return ( - - ); -} -export default NbPeopleSelector; +export default NumberInput; diff --git a/libs/ui/common/src/lib/tables/stores/currentSelectedGroup.ts b/libs/ui/common/src/lib/tables/stores/currentSelectedGroup.ts new file mode 100644 index 0000000..876a2d6 --- /dev/null +++ b/libs/ui/common/src/lib/tables/stores/currentSelectedGroup.ts @@ -0,0 +1,25 @@ +import {create} from "zustand/index"; + +interface CurrentSelectedGroupState { + tables: { [tableId: number]: number }; + setTable: (tableId: number, numberOfPeople: number) => void; + removeTable: (tableId: number) => void; + resetTables: () => void; +} + +export const useCurrentSelectedGroup = create((set) => ({ + tables: {}, + setTable: (tableId, numberOfPeople) => set((state) => { + const tables = {...state.tables}; + tables[tableId] = numberOfPeople; + return {tables}; + }), + removeTable: (tableId) => set((state) => { + const tables = {...state.tables}; + delete tables[tableId]; + return {tables}; + } + ), + resetTables: () => set({tables: {}}), +})); + diff --git a/libs/ui/common/src/lib/tables/stores/groups.ts b/libs/ui/common/src/lib/tables/stores/groups.ts new file mode 100644 index 0000000..a61fffc --- /dev/null +++ b/libs/ui/common/src/lib/tables/stores/groups.ts @@ -0,0 +1,18 @@ +import {create} from "zustand/index"; + +interface GroupsState { + groups: { tables: { [tableId: number]: number }, offer: string }[]; + addGroup: (tables: { [tableId: number]: number }, offer: string) => void; + resetGroups: () => void; +} + +export const useGroups = create((set) => ({ + groups: [], + addGroup: (tables, offer) => set((state) => ({ + groups: [...state.groups, { + tables, + offer + }] + })), + resetGroups: () => set({groups: []}), +})); diff --git a/libs/ui/common/src/lib/tables/stores/tables.ts b/libs/ui/common/src/lib/tables/stores/tables.ts new file mode 100644 index 0000000..42ae26a --- /dev/null +++ b/libs/ui/common/src/lib/tables/stores/tables.ts @@ -0,0 +1,12 @@ +import {create} from "zustand/index"; + +interface TablesState { + tables: { id: number }[]; +} + +export const useTables = create((set, get) => ({ + tables: Array.from(Array(15)).map((_, i) => ({ + id: i + 1, + }), + ), +})); diff --git a/libs/ui/common/src/lib/tables/tableSquare.tsx b/libs/ui/common/src/lib/tables/tableSquare.tsx index c95084c..e92b919 100644 --- a/libs/ui/common/src/lib/tables/tableSquare.tsx +++ b/libs/ui/common/src/lib/tables/tableSquare.tsx @@ -1,42 +1,56 @@ -import NbPeopleSelector from './nbPeopleSelector'; -import { purple, red } from '@mui/material/colors'; +import NumberInput from './nbPeopleSelector'; -import { Button, Typography, Box } from "@mui/material"; +import {Box, Button, Typography} from "@mui/material"; +import * as React from 'react'; import {useState} from 'react'; -import {styled} from "@mui/system"; +import {useCurrentSelectedGroup} from "./stores/currentSelectedGroup"; -export function TableSquare({tableNumber, totalPeople, setTotalPeople}) { - const [showPeopleSelector, setShowPeopleSelector] = useState(false) - const showHidePeopleSelector = () => { - showPeopleSelector ? setShowPeopleSelector(false) : setShowPeopleSelector(true); +export function TableSquare({tableNumber}) { + const [showPeopleSelector, setShowPeopleSelector] = useState(false) + const currentTablePeople = useCurrentSelectedGroup(state => state.tables[tableNumber]); + const setTable = useCurrentSelectedGroup(state => state.setTable); + const removeTable = useCurrentSelectedGroup(state => state.removeTable); + const showHidePeopleSelector = () => { + setShowPeopleSelector(!showPeopleSelector) + if (!showPeopleSelector) { + setTable(tableNumber, 1) + } else { + removeTable(tableNumber) } + } + return ( + + + + {showPeopleSelector ? setTable(tableNumber, value as number)} - }} - color={showPeopleSelector? 'success':'primary' }> - - - {tableNumber} - - - - - { showPeopleSelector ? : <> } - + /> : <>} + - - ); + + ); } export default TableSquare;