use slots hooks

apps/web/components/schedule/time-slots/add-slot-form.tsx

@@ -1,13 +1,11 @@
 /* eslint-disable canonical/id-match */
 'use client';
-import { addSlot } from '@/actions/slots';
 import { ScheduleSlotsContext } from '@/context/schedule-slots';
-import { useSlots } from '@/hooks/slots';
+import { useSlotAdd } from '@/hooks/slots';
 import { combineDateTime } from '@/utils/date';
 import { Enum_Slot_State } from '@repo/graphql/types';
 import { Button } from '@repo/ui/components/ui/button';
 import { Input } from '@repo/ui/components/ui/input';
-import { useMutation } from '@tanstack/react-query';
 import { PlusSquare } from 'lucide-react';
 import { type FormEvent, use, useState } from 'react';
 
@@ -16,13 +14,8 @@ export function AddSlotForm() {
   const [endTime, setEndTime] = useState('');
 
   const { selectedDate } = use(ScheduleSlotsContext);
-  const { refetch: refetchSlots } = useSlots();
 
-  const { mutate } = useMutation({
-    mutationFn: addSlot,
-    mutationKey: ['schedule', 'slots', 'add'],
-    onSuccess: () => refetchSlots(),
-  });
+  const { isPending, mutate } = useSlotAdd();
 
   const handleSubmit = (event: FormEvent) => {
     event.preventDefault();
@@ -40,6 +33,7 @@ export function AddSlotForm() {
     <form className="grid grid-cols-[1fr_1fr_auto] gap-2" onSubmit={handleSubmit}>
       <div className="flex-1">
         <Input
+          disabled={isPending}
           id="start-time"
           onChange={(event) => setStartTime(event.target.value)}
           required
@@ -49,6 +43,7 @@ export function AddSlotForm() {
       </div>
       <div className="flex-1">
         <Input
+          disabled={isPending}
           id="end-time"
           onChange={(event) => setEndTime(event.target.value)}
           required

apps/web/components/schedule/time-slots/edit-slot-form.tsx

@@ -1,11 +1,10 @@
 'use client';
-import { getSlot, updateSlot } from '@/actions/slots';
 import { ScheduleSlotsContext } from '@/context/schedule-slots';
+import { useSlotMutation, useSlotQuery } from '@/hooks/slots';
 import { combineDateTime, getTimeString } from '@/utils/date';
 import { type SlotFieldsFragment } from '@repo/graphql/types';
 import { Button } from '@repo/ui/components/ui/button';
 import { Input } from '@repo/ui/components/ui/input';
-import { useMutation, useQuery } from '@tanstack/react-query';
 import { Loader, Pencil, Save } from 'lucide-react';
 import { type FormEvent, use, useEffect, useState } from 'react';
 
@@ -21,20 +20,8 @@ export function EditSlotForm({ documentId }: Readonly<Props>) {
 
   const { selectedDate } = use(ScheduleSlotsContext);
 
-  const {
-    data,
-    isLoading: isLoadingSlot,
-    refetch: refetchSlot,
-  } = useQuery({
-    queryFn: () => getSlot({ documentId }),
-    queryKey: ['schedule', 'slots', documentId],
-  });
-
-  const { isPending: isPendingSlotUpdate, mutate } = useMutation({
-    mutationFn: updateSlot,
-    mutationKey: ['schedule', 'slots', documentId],
-    onSuccess: () => refetchSlot(),
-  });
+  const { data, isLoading: isLoadingSlotQuery } = useSlotQuery({ documentId });
+  const { isPending: isPendingSlotMutation, mutate } = useSlotMutation({ documentId });
 
   const handleSubmit = (event: FormEvent) => {
     event.preventDefault();
@@ -90,16 +77,14 @@ export function EditSlotForm({ documentId }: Readonly<Props>) {
           <TimeText date={data?.slot?.dateend} />
         </>
       )}
-      {editMode ? (
-        <Button disabled={isLoadingSlot || isPendingSlotUpdate} type="submit">
-          <Save className="size-4" />
-        </Button>
-      ) : null}
-      {editMode ? null : (
-        <Button disabled={isLoadingSlot || isPendingSlotUpdate} onClick={() => setEditMode(true)}>
-          <Pencil className="size-4" />
-        </Button>
-      )}
+
+      <Button
+        disabled={isLoadingSlotQuery || isPendingSlotMutation}
+        onClick={editMode ? undefined : () => setEditMode(true)}
+        type={editMode ? 'submit' : 'button'}
+      >
+        {editMode ? <Save className="size-4" /> : <Pencil className="size-4" />}
+      </Button>
     </form>
   );
 }

apps/web/hooks/slots/index.ts

@@ -1,21 +1,49 @@
 'use client';
-import { getSlots } from '@/actions/slots';
+import { addSlot, getSlot, getSlots, updateSlot } from '@/actions/slots';
 import { ScheduleSlotsContext } from '@/context/schedule-slots';
-import { useQuery } from '@tanstack/react-query';
+// 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(ScheduleSlotsContext);
 
   return useQuery({
-    queryFn: () =>
-      getSlots({
-        filters: {
-          datestart: {
-            gte: selectedDate,
-          },
-        },
-      }),
+    queryFn: () => getSlots({ filters: { datestart: { gte: selectedDate } } }),
     queryKey: ['schedule', 'slots', selectedDate],
   });
 };
+
+type Props = {
+  documentId: string;
+};
+
+export const useSlotQuery = ({ documentId }: Props) =>
+  useQuery({
+    queryFn: () => getSlot({ documentId }),
+    queryKey: ['schedule', 'slots', documentId],
+  });
+
+export const useSlotMutation = ({ documentId }: Props) => {
+  const { refetch } = useSlotQuery({ documentId });
+
+  return useMutation({
+    mutationFn: updateSlot,
+    mutationKey: ['schedule', 'slots', documentId],
+    onSuccess: () => refetch(),
+  });
+};
+
+export const useSlotAdd = () => {
+  const { refetch } = useSlots();
+
+  return useMutation({
+    mutationFn: addSlot,
+    mutationKey: ['schedule', 'slots', 'add'],
+    onSuccess: () => refetch(),
+  });
+};