add feature: delete slot

apps/web/actions/slots.ts

@@ -35,3 +35,4 @@ export async function getSlots(input: GQL.GetSlotsQueryVariables) {
 
 export const getSlot = api.getSlot;
 export const updateSlot = api.updateSlot;
+export const deleteSlot = api.deleteSlot;

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

@@ -3,11 +3,11 @@ import { Context, ContextProvider } from '../context';
 import { type Props } from '../types';
 import { EditableTimePair, ReadonlyTimePair } from './time-pair';
 import { ScheduleSlotsContext } from '@/context/schedule-slots';
-import { useSlotMutation, useSlotQuery } from '@/hooks/slots';
+import { useSlotDelete, useSlotMutation, useSlotQuery } from '@/hooks/slots';
 import { withContext } from '@/utils/context';
 import { combineDateTime } from '@/utils/date';
 import { Button } from '@repo/ui/components/ui/button';
-import { Pencil, Save } from 'lucide-react';
+import { CircleX, Pencil, Save } from 'lucide-react';
 import { type FormEvent, use } from 'react';
 
 export const EditSlotForm = withContext(ContextProvider)(function (props: Readonly<Props>) {
@@ -19,6 +19,9 @@ export const EditSlotForm = withContext(ContextProvider)(function (props: Readon
 
   const { isLoading: isLoadingSlotQuery } = useSlotQuery({ documentId });
   const { isPending: isPendingSlotMutation, mutate: mutateSlot } = useSlotMutation({ documentId });
+  const { isPending: isLoadingSlotDelete, mutate: deleteSlot } = useSlotDelete({ documentId });
+
+  const isPending = isPendingSlotMutation || isLoadingSlotQuery || isLoadingSlotDelete;
 
   const handleSubmit = (event: FormEvent) => {
     event.preventDefault();
@@ -40,17 +43,23 @@ export const EditSlotForm = withContext(ContextProvider)(function (props: Readon
   const TimePair = editMode ? EditableTimePair : ReadonlyTimePair;
 
   return (
-    <form className="grid grid-cols-[auto_1fr_1fr_auto] items-center gap-2" onSubmit={handleSubmit}>
+    <form
+      className="grid grid-cols-[auto_1fr_1fr_auto_auto] items-center gap-2"
+      onSubmit={handleSubmit}
+    >
       <span className="text-base font-bold">•</span>
       <TimePair {...props} />
 
       <Button
-        disabled={isLoadingSlotQuery || isPendingSlotMutation}
+        disabled={isPending}
         onClick={editMode ? undefined : () => setEditMode(true)}
         type={editMode ? 'submit' : 'button'}
       >
         {editMode ? <Save className="size-4" /> : <Pencil className="size-4" />}
       </Button>
+      <Button disabled={isPending} onClick={() => deleteSlot()}>
+        <CircleX className="size-4" />
+      </Button>
     </form>
   );
 });

apps/web/hooks/slots/index.ts

@@ -1,5 +1,5 @@
 'use client';
-import { addSlot, getSlot, getSlots, updateSlot } from '@/actions/slots';
+import { addSlot, deleteSlot, getSlot, getSlots, updateSlot } from '@/actions/slots';
 import { ScheduleSlotsContext } from '@/context/schedule-slots';
 // eslint-disable-next-line sonarjs/no-internal-api-use
 import type * as ApolloTypes from '@repo/graphql/node_modules/@apollo/client/core';
@@ -47,3 +47,13 @@ export const useSlotAdd = () => {
     onSuccess: () => refetch(),
   });
 };
+
+export const useSlotDelete = ({ documentId }: Props) => {
+  const { refetch } = useSlots();
+
+  return useMutation({
+    mutationFn: () => deleteSlot({ documentId }),
+    mutationKey: ['schedule', 'slots', documentId],
+    onSuccess: () => refetch(),
+  });
+};