From c7105377277773309f8cb54d3b620fa370b5394e Mon Sep 17 00:00:00 2001 From: vchikalkin Date: Fri, 23 May 2025 14:32:39 +0300 Subject: [PATCH] replace ScheduleTimeContext with ScheduleStore --- .../schedule/components/slot-time.tsx | 10 ++-- .../schedule/components/time-range.tsx | 9 ++-- .../web/components/schedule/context/index.tsx | 46 ------------------- .../components/schedule/day-slot-add-form.tsx | 10 ++-- .../web/components/schedule/slot-datetime.tsx | 4 +- .../order-store/{context.tsx => context.ts} | 1 - .../order-store/{types.tsx => types.ts} | 0 .../stores/schedule/schedule-store/context.ts | 6 +++ .../stores/schedule/schedule-store/index.ts | 1 + .../stores/schedule/schedule-store/store.ts | 14 ++++++ .../stores/schedule/schedule-store/types.ts | 9 ++++ packages/graphql/api/slots.ts | 13 ++++-- 12 files changed, 57 insertions(+), 66 deletions(-) delete mode 100644 apps/web/components/schedule/context/index.tsx rename apps/web/stores/orders/order-store/{context.tsx => context.ts} (94%) rename apps/web/stores/orders/order-store/{types.tsx => types.ts} (100%) create mode 100644 apps/web/stores/schedule/schedule-store/context.ts create mode 100644 apps/web/stores/schedule/schedule-store/index.ts create mode 100644 apps/web/stores/schedule/schedule-store/store.ts create mode 100644 apps/web/stores/schedule/schedule-store/types.ts diff --git a/apps/web/components/schedule/components/slot-time.tsx b/apps/web/components/schedule/components/slot-time.tsx index e0b843c..e5d10dc 100644 --- a/apps/web/components/schedule/components/slot-time.tsx +++ b/apps/web/components/schedule/components/slot-time.tsx @@ -1,23 +1,23 @@ /* eslint-disable react/jsx-no-bind */ 'use client'; -import { ScheduleTimeContext } from '../context'; import { type SlotComponentProps } from '../types'; import { EditableTimeRangeForm, ReadonlyTimeRange } from './time-range'; import { useSlotMutation, useSlotQuery } from '@/hooks/api/slots'; +import { useZustandStore } from '@/stores/schedule/schedule-store'; import { Button } from '@repo/ui/components/ui/button'; import { PencilLine } from 'lucide-react'; -import { use, useEffect } from 'react'; +import { useEffect } from 'react'; export function SlotTime(props: Readonly) { - const { editMode } = use(ScheduleTimeContext); + const editMode = useZustandStore((state) => state.editMode); return editMode ? : ; } function SlotTimeEditForm({ documentId }: Readonly) { const { editMode, endTime, resetTime, setEditMode, setEndTime, setStartTime, startTime } = - use(ScheduleTimeContext); + useZustandStore((state) => state); const { isPending: isMutationPending, mutate: updateSlot } = useSlotMutation({ documentId }); const { data: { slot } = {}, isPending: isQueryPending } = useSlotQuery({ documentId }); @@ -47,7 +47,7 @@ function SlotTimeEditForm({ documentId }: Readonly) { } function SlotTimeReadonly({ documentId }: Readonly) { - const { setEditMode } = use(ScheduleTimeContext); + const setEditMode = useZustandStore((state) => state.setEditMode); const { data: { slot } = {} } = useSlotQuery({ documentId }); diff --git a/apps/web/components/schedule/components/time-range.tsx b/apps/web/components/schedule/components/time-range.tsx index 18cbf0a..252fe7b 100644 --- a/apps/web/components/schedule/components/time-range.tsx +++ b/apps/web/components/schedule/components/time-range.tsx @@ -1,11 +1,11 @@ 'use client'; -import { ScheduleTimeContext } from '../context'; import { type OrderTimeRange } from '../types'; +import { useScheduleStore } from '@/stores/schedule/schedule-store'; import { formatTime } from '@repo/graphql/utils/datetime-format'; import { Input } from '@repo/ui/components/ui/input'; import { cn } from '@repo/ui/lib/utils'; -import { type FormEvent, type PropsWithChildren, use } from 'react'; +import { type FormEvent, type PropsWithChildren } from 'react'; type EditableTimeRangeProps = { readonly disabled?: boolean; @@ -22,7 +22,10 @@ export function EditableTimeRangeForm({ disabled = false, onSubmit, }: PropsWithChildren) { - const { endTime, setEndTime, setStartTime, startTime } = use(ScheduleTimeContext); + const endTime = useScheduleStore((state) => state.endTime); + const startTime = useScheduleStore((state) => state.startTime); + const setEndTime = useScheduleStore((state) => state.setEndTime); + const setStartTime = useScheduleStore((state) => state.setStartTime); return (
diff --git a/apps/web/components/schedule/context/index.tsx b/apps/web/components/schedule/context/index.tsx deleted file mode 100644 index 1629846..0000000 --- a/apps/web/components/schedule/context/index.tsx +++ /dev/null @@ -1,46 +0,0 @@ -'use client'; - -import { - createContext, - type Dispatch, - type PropsWithChildren, - type SetStateAction, - useMemo, - useState, -} from 'react'; - -export type ContextType = { - editMode: boolean; - endTime: string; - resetTime: () => void; - setEditMode: Dispatch>; - setEndTime: Dispatch>; - setStartTime: Dispatch>; - startTime: string; -}; -export const ScheduleTimeContext = createContext({} as ContextType); - -export function ScheduleTimeContextProvider({ children }: Readonly) { - const [editMode, setEditMode] = useState(false); - const [startTime, setStartTime] = useState(''); - const [endTime, setEndTime] = useState(''); - - function resetTime() { - setStartTime(''); - setEndTime(''); - } - - const value = useMemo(() => { - return { - editMode, - endTime, - resetTime, - setEditMode, - setEndTime, - setStartTime, - startTime, - }; - }, [editMode, endTime, setEditMode, startTime]); - - return {children}; -} diff --git a/apps/web/components/schedule/day-slot-add-form.tsx b/apps/web/components/schedule/day-slot-add-form.tsx index e576c8b..f15549b 100644 --- a/apps/web/components/schedule/day-slot-add-form.tsx +++ b/apps/web/components/schedule/day-slot-add-form.tsx @@ -2,16 +2,18 @@ 'use client'; import { EditableTimeRangeForm } from './components/time-range'; -import { ScheduleTimeContext, ScheduleTimeContextProvider } from './context'; import { useSlotCreate } from '@/hooks/api/slots'; +import { ScheduleStoreProvider, useScheduleStore } from '@/stores/schedule/schedule-store'; import { withContext } from '@/utils/context'; import { Enum_Slot_State } from '@repo/graphql/types'; import { Button } from '@repo/ui/components/ui/button'; import { PlusSquare } from 'lucide-react'; -import { type FormEvent, use } from 'react'; +import { type FormEvent } from 'react'; -export const DaySlotAddForm = withContext(ScheduleTimeContextProvider)(function () { - const { endTime, resetTime, startTime } = use(ScheduleTimeContext); +export const DaySlotAddForm = withContext(ScheduleStoreProvider)(function () { + const endTime = useScheduleStore((state) => state.endTime); + const resetTime = useScheduleStore((state) => state.resetTime); + const startTime = useScheduleStore((state) => state.startTime); const { isPending, mutate: addSlot } = useSlotCreate(); diff --git a/apps/web/components/schedule/slot-datetime.tsx b/apps/web/components/schedule/slot-datetime.tsx index 9fc54b7..d229b4d 100644 --- a/apps/web/components/schedule/slot-datetime.tsx +++ b/apps/web/components/schedule/slot-datetime.tsx @@ -2,11 +2,11 @@ import { SlotDate } from './components/slot-date'; import { SlotTime } from './components/slot-time'; -import { ScheduleTimeContextProvider } from './context'; import { type SlotComponentProps } from './types'; +import { ScheduleStoreProvider } from '@/stores/schedule/schedule-store'; import { withContext } from '@/utils/context'; -export const SlotDateTime = withContext(ScheduleTimeContextProvider)(function ( +export const SlotDateTime = withContext(ScheduleStoreProvider)(function ( props: Readonly, ) { return ( diff --git a/apps/web/stores/orders/order-store/context.tsx b/apps/web/stores/orders/order-store/context.ts similarity index 94% rename from apps/web/stores/orders/order-store/context.tsx rename to apps/web/stores/orders/order-store/context.ts index 21fd3f7..d8bbfa6 100644 --- a/apps/web/stores/orders/order-store/context.tsx +++ b/apps/web/stores/orders/order-store/context.ts @@ -1,4 +1,3 @@ -'use client'; import { createOrderStore } from './store'; import { createZustandStore } from '@/utils/zustand/context'; diff --git a/apps/web/stores/orders/order-store/types.tsx b/apps/web/stores/orders/order-store/types.ts similarity index 100% rename from apps/web/stores/orders/order-store/types.tsx rename to apps/web/stores/orders/order-store/types.ts diff --git a/apps/web/stores/schedule/schedule-store/context.ts b/apps/web/stores/schedule/schedule-store/context.ts new file mode 100644 index 0000000..fbf5663 --- /dev/null +++ b/apps/web/stores/schedule/schedule-store/context.ts @@ -0,0 +1,6 @@ +import { createScheduleStore } from './store'; +import { createZustandStore } from '@/utils/zustand/context'; + +export const { Provider, useZustandStore } = createZustandStore(createScheduleStore); + +export { Provider as ScheduleStoreProvider, useZustandStore as useScheduleStore }; diff --git a/apps/web/stores/schedule/schedule-store/index.ts b/apps/web/stores/schedule/schedule-store/index.ts new file mode 100644 index 0000000..c38e8e8 --- /dev/null +++ b/apps/web/stores/schedule/schedule-store/index.ts @@ -0,0 +1 @@ +export * from './context'; diff --git a/apps/web/stores/schedule/schedule-store/store.ts b/apps/web/stores/schedule/schedule-store/store.ts new file mode 100644 index 0000000..02d91ac --- /dev/null +++ b/apps/web/stores/schedule/schedule-store/store.ts @@ -0,0 +1,14 @@ +import { type ScheduleStore } from './types'; +import { createStore } from 'zustand'; + +export function createScheduleStore() { + return createStore((set) => ({ + editMode: false, + endTime: '', + resetTime: () => set({ endTime: '', startTime: '' }), + setEditMode: (editMode) => set({ editMode }), + setEndTime: (endTime) => set({ endTime }), + setStartTime: (startTime) => set({ startTime }), + startTime: '', + })); +} diff --git a/apps/web/stores/schedule/schedule-store/types.ts b/apps/web/stores/schedule/schedule-store/types.ts new file mode 100644 index 0000000..193f997 --- /dev/null +++ b/apps/web/stores/schedule/schedule-store/types.ts @@ -0,0 +1,9 @@ +export type ScheduleStore = { + editMode: boolean; + endTime: string; + resetTime: () => void; + setEditMode: (editMode: boolean) => void; + setEndTime: (endTime: string) => void; + setStartTime: (startTime: string) => void; + startTime: string; +}; diff --git a/packages/graphql/api/slots.ts b/packages/graphql/api/slots.ts index 92b4587..f2f6b84 100644 --- a/packages/graphql/api/slots.ts +++ b/packages/graphql/api/slots.ts @@ -146,11 +146,14 @@ export class SlotsService extends BaseService { mutation: GQL.UpdateSlotDocument, variables: { ...variables, - date: variables.data?.date ? formatDate(variables.data.date).db() : undefined, - time_end: variables.data?.time_end ? formatTime(variables.data.time_end).db() : undefined, - time_start: variables.data?.time_start - ? formatTime(variables.data.time_start).db() - : undefined, + data: { + ...variables.data, + date: variables.data?.date ? formatDate(variables.data.date).db() : undefined, + time_end: variables.data?.time_end ? formatTime(variables.data.time_end).db() : undefined, + time_start: variables.data?.time_start + ? formatTime(variables.data.time_start).db() + : undefined, + }, }, });