improve useSlots hook

apps/web/actions/slots.ts

@@ -28,12 +28,12 @@ export async function getSlots(input: GQL.GetSlotsQueryVariables) {
 
   return api.getSlots({
     filters: {
-      ...input.filters,
       master: {
         documentId: {
           eq: customer.documentId,
         },
       },
+      ...input.filters,
     },
   });
 }

apps/web/components/schedule/components/slot-card.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable canonical/id-match */
 'use client';
 import { ReadonlyTimeRange } from './time-range';
-import { useSlotQuery } from '@/hooks/slots/master';
+import { useSlotQuery } from '@/hooks/slots';
 import { Enum_Slot_State, type SlotFieldsFragment } from '@repo/graphql/types';
 import { Badge } from '@repo/ui/components/ui/badge';
 import { cn } from '@repo/ui/lib/utils';

apps/web/components/schedule/components/slot-date.tsx

@@ -1,6 +1,6 @@
 'use client';
 import { type SlotComponentProps } from '../types';
-import { useSlotQuery } from '@/hooks/slots/master';
+import { useSlotQuery } from '@/hooks/slots';
 import { formatDate } from '@/utils/date';
 
 export function SlotDate({ documentId }: Readonly<SlotComponentProps>) {

apps/web/components/schedule/components/slot-time.tsx

@@ -3,7 +3,7 @@
 import { ScheduleTimeContext } from '../context';
 import { type SlotComponentProps } from '../types';
 import { EditableTimeRangeForm, ReadonlyTimeRange } from './time-range';
-import { useSlotMutation, useSlotQuery } from '@/hooks/slots/master';
+import { useSlotMutation, useSlotQuery } from '@/hooks/slots';
 import { Button } from '@repo/ui/components/ui/button';
 import { PencilLine } from 'lucide-react';
 import { use, useEffect } from 'react';

apps/web/components/schedule/day-slot-add-form.tsx

@@ -3,7 +3,7 @@
 import { EditableTimeRangeForm } from './components/time-range';
 import { ScheduleTimeContext, ScheduleTimeContextProvider } from './context';
 import { ScheduleContext } from '@/context/schedule';
-import { useSlotAdd } from '@/hooks/slots/master';
+import { useSlotAdd } from '@/hooks/slots';
 import { withContext } from '@/utils/context';
 import { Enum_Slot_State } from '@repo/graphql/types';
 import { Button } from '@repo/ui/components/ui/button';
@@ -15,7 +15,7 @@ export const DaySlotAddForm = withContext(ScheduleTimeContextProvider)(function
 
   const { selectedDate } = use(ScheduleContext);
 
-  const { isPending, mutate: addSlot } = useSlotAdd();
+  const { isPending, mutate: addSlot } = useSlotAdd({ date: selectedDate });
 
   const handleSubmit = (event: FormEvent) => {
     event.preventDefault();

apps/web/components/schedule/day-slots-list.tsx

@@ -2,10 +2,13 @@
 import { SlotCard } from './components/slot-card';
 import { DaySlotAddForm } from './day-slot-add-form';
 import { LoadingSpinner } from '@/components/common/spinner';
-import { useSlots } from '@/hooks/slots/master';
+import { ScheduleContext } from '@/context/schedule';
+import { useSlots } from '@/hooks/slots';
+import { use } from 'react';
 
 export function DaySlotsList() {
-  const { data, isLoading } = useSlots();
+  const { selectedDate } = use(ScheduleContext);
+  const { data, isLoading } = useSlots({ date: selectedDate });
   const slots = data?.data.slots;
 
   if (isLoading) return <LoadingSpinner />;

apps/web/components/schedule/slot-buttons.tsx

@@ -2,15 +2,20 @@
 /* eslint-disable canonical/id-match */
 'use client';
 import { type SlotComponentProps } from './types';
-import { useSlotDelete, useSlotMutation, useSlotQuery } from '@/hooks/slots/master';
+import { ScheduleContext } from '@/context/schedule';
+import { useSlotDelete, useSlotMutation, useSlotQuery } from '@/hooks/slots';
 import { Enum_Slot_State } from '@repo/graphql/types';
 import { Button } from '@repo/ui/components/ui/button';
 import { useRouter } from 'next/navigation';
+import { use } from 'react';
 
 export function SlotButtons({ documentId }: Readonly<SlotComponentProps>) {
   const { data } = useSlotQuery({ documentId });
+
   const { mutate: updateSlot } = useSlotMutation({ documentId });
-  const { mutate: deleteSlot } = useSlotDelete({ documentId });
+
+  const { selectedDate } = use(ScheduleContext);
+  const { mutate: deleteSlot } = useSlotDelete({ date: selectedDate, documentId });
 
   const router = useRouter();
 

apps/web/components/schedule/slot-orders-list.tsx

@@ -1,7 +1,7 @@
 'use client';
 import { OrderCard } from './components/order-card';
 import { type SlotComponentProps } from './types';
-import { useSlotQuery } from '@/hooks/slots/master';
+import { useSlotQuery } from '@/hooks/slots';
 
 export function SlotOrdersList({ documentId }: Readonly<SlotComponentProps>) {
   const { data } = useSlotQuery({ documentId });

apps/web/hooks/slots/index.ts

@@ -1,42 +1,46 @@
 'use client';
 import { addSlot, deleteSlot, getSlot, getSlots, updateSlot } from '@/actions/slots';
-import { ScheduleContext } from '@/context/schedule';
 import { formatDate } from '@/utils/date';
 // eslint-disable-next-line sonarjs/no-internal-api-use
 import type * as ApolloTypes from '@repo/graphql/node_modules/@apollo/client/core';
 import { useMutation, useQuery } from '@tanstack/react-query';
-import { use } from 'react';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 type FixTypescriptCringe = ApolloTypes.FetchResult;
 
-export const useSlots = () => {
-  const { selectedDate } = use(ScheduleContext);
+type SlotAddInput = {
+  date: Date;
+};
 
+type SlotMutationInput = {
+  documentId: string;
+};
+
+type SlotQueryInput = {
+  date: Date;
+  masterId?: string;
+};
+
+export const useSlots = ({ date, masterId }: SlotQueryInput) => {
   return useQuery({
     queryFn: () =>
       getSlots({
         filters: {
-          date: {
-            eq: formatDate(selectedDate).db(),
-          },
+          date: { eq: formatDate(date).db() },
+          master: masterId ? { documentId: { eq: masterId } } : undefined,
         },
       }),
-    queryKey: ['slots', 'list', selectedDate],
+    queryKey: ['slots', 'master', masterId, 'list', date],
   });
 };
 
-type Props = {
-  documentId: string;
-};
-
-export const useSlotQuery = ({ documentId }: Props) =>
+export const useSlotQuery = ({ documentId }: SlotMutationInput) =>
   useQuery({
     queryFn: () => getSlot({ documentId }),
     queryKey: ['slots', 'get', documentId],
   });
 
-export const useSlotMutation = ({ documentId }: Props) => {
+export const useSlotMutation = ({ documentId }: SlotMutationInput) => {
   const { refetch } = useSlotQuery({ documentId });
 
   return useMutation({
@@ -46,8 +50,8 @@ export const useSlotMutation = ({ documentId }: Props) => {
   });
 };
 
-export const useSlotAdd = () => {
-  const { refetch } = useSlots();
+export const useSlotAdd = ({ date }: SlotAddInput) => {
+  const { refetch } = useSlots({ date });
 
   return useMutation({
     mutationFn: addSlot,
@@ -56,8 +60,8 @@ export const useSlotAdd = () => {
   });
 };
 
-export const useSlotDelete = ({ documentId }: Props) => {
-  const { refetch } = useSlots();
+export const useSlotDelete = ({ date, documentId }: SlotAddInput & SlotMutationInput) => {
+  const { refetch } = useSlots({ date });
 
   return useMutation({
     mutationFn: () => deleteSlot({ documentId }),