replace ScheduleTimeContext with ScheduleStore

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<SlotComponentProps>) {
-  const { editMode } = use(ScheduleTimeContext);
+  const editMode = useZustandStore((state) => state.editMode);
 
   return editMode ? <SlotTimeEditForm {...props} /> : <SlotTimeReadonly {...props} />;
 }
 
 function SlotTimeEditForm({ documentId }: Readonly<SlotComponentProps>) {
   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<SlotComponentProps>) {
 }
 
 function SlotTimeReadonly({ documentId }: Readonly<SlotComponentProps>) {
-  const { setEditMode } = use(ScheduleTimeContext);
+  const setEditMode = useZustandStore((state) => state.setEditMode);
 
   const { data: { slot } = {} } = useSlotQuery({ documentId });
 

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<EditableTimeRangeProps>) {
-  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 (
     <form className="flex flex-row items-center gap-2" onSubmit={onSubmit}>

apps/web/components/schedule/context/index.tsx

@@ -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<SetStateAction<boolean>>;
-  setEndTime: Dispatch<SetStateAction<string>>;
-  setStartTime: Dispatch<SetStateAction<string>>;
-  startTime: string;
-};
-export const ScheduleTimeContext = createContext<ContextType>({} as ContextType);
-
-export function ScheduleTimeContextProvider({ children }: Readonly<PropsWithChildren>) {
-  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 <ScheduleTimeContext value={value}>{children}</ScheduleTimeContext>;
-}

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();
 

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<SlotComponentProps>,
 ) {
   return (

apps/web/stores/orders/order-store/context.ts

@@ -1,4 +1,3 @@
-'use client';
 import { createOrderStore } from './store';
 import { createZustandStore } from '@/utils/zustand/context';
 

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 };

apps/web/stores/schedule/schedule-store/index.ts

@@ -0,0 +1 @@
+export * from './context';

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<ScheduleStore>((set) => ({
+    editMode: false,
+    endTime: '',
+    resetTime: () => set({ endTime: '', startTime: '' }),
+    setEditMode: (editMode) => set({ editMode }),
+    setEndTime: (endTime) => set({ endTime }),
+    setStartTime: (startTime) => set({ startTime }),
+    startTime: '',
+  }));
+}

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;
+};

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,
+        },
       },
     });