Feat/v0.2

src/components/schedules/modal/DeleteScheduleModal.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from "@heroui/modal";
+import { useDeleteSchedule } from "@/hooks/data/use-schedules";
+import { getQueryClient } from "@/lib/get-query-client";
 import { Button } from "@heroui/button";
-import fetcher from "@/lib/fetcher";
-import { useRouter } from "next/navigation";
+import { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from "@heroui/modal";
+import { Spinner } from "@heroui/spinner";
 import { addToast } from "@heroui/toast";
-import { getQueryClient } from "@/lib/get-query-client";
+import { useRouter } from "next/navigation";
 
 type DeleteScheduleModalProps = {
   scheduleId: string;
@@ -16,29 +17,19 @@ type DeleteScheduleModalProps = {
 export default function DeleteScheduleModal({ isOpen, onClose, scheduleId }: DeleteScheduleModalProps) {
   const router = useRouter();
   const qc = getQueryClient();
-
+  const { mutate: deleteSchedule, isPending: isLoading } = useDeleteSchedule();
   const onDelete = async () => {
-    try {
-      const response = await fetcher<{ id: string }>("DELETE", `/schedules/${scheduleId}`);
-
-      if (response?.id) {
-        onClose();
+    deleteSchedule(scheduleId, {
+      onSuccess: () => {
+        addToast({ title: "Schedule deleted successfully", color: "success" });
         qc.invalidateQueries({ queryKey: ["schedules"] });
         router.push("/schedules");
-      } else {
-        console.error("Failed to delete schedule");
-        addToast({
-          title: "Failed to delete schedule",
-          color: "danger",
-        });
-      }
-    } catch (error) {
-      addToast({
-        title: "An error occurred while deleting the schedule",
-        color: "danger",
-      });
-      console.error("Error deleting schedule:", error);
-    }
+      },
+      onError: (error: unknown) => {
+        const errorMessage = (error as { response?: { data?: { message?: string } } })?.response?.data?.message || (error as { message?: string })?.message || "Failed to delete schedule";
+        addToast({ title: errorMessage, color: "danger" });
+      },
+    });
   };
 
   return (
@@ -53,6 +44,7 @@ export default function DeleteScheduleModal({ isOpen, onClose, scheduleId }: Del
         </ModalBody>
         <ModalFooter className="border-t border-gray-300 dark:border-gray-800 py-2.5">
           <Button variant="flat" size="sm" color="danger" onPress={onDelete} className="text-primary-foreground">
+            {isLoading && <Spinner color="danger" size="sm" />}
             Delete
           </Button>
         </ModalFooter>

src/hooks/data/use-schedules.ts

@@ -1,5 +1,5 @@
 import fetcher from "@/lib/fetcher";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 
 export type Schedule = {
   id: string;
@@ -64,18 +64,17 @@ export type SchedulePost = {
   scheduleTimeId: string;
 };
 
-export function useSchedulePosts(
-  scheduleId: string,
-  month?: number,
-  year?: number
-) {
+export function useSchedulePosts(scheduleId: string, month?: number, year?: number) {
   return useQuery<SchedulePost[]>({
     queryKey: ["schedulePosts", scheduleId],
-    queryFn: async () =>
-      fetcher<SchedulePost[]>(
-        "GET",
-        `/schedules/${scheduleId}/posts?month=${month}&year=${year}`
-      ),
+    queryFn: async () => fetcher<SchedulePost[]>("GET", `/schedules/${scheduleId}/posts?month=${month}&year=${year}`),
     enabled: !!scheduleId,
   });
 }
+
+export function useDeleteSchedule() {
+  return useMutation({
+    mutationKey: ["deleteSchedule"],
+    mutationFn: async (scheduleId: string) => fetcher<{ id: string }>("DELETE", `/schedules/${scheduleId}`),
+  });
+}