Zone deletion

src/app/[locale]/(main)/zones/edit/[id]/page.tsx

@@ -2,13 +2,12 @@
 
 import { useState } from "react";
 
-import { useMutation, useQuery } from "@tanstack/react-query";
 import { useTranslations } from "next-intl";
 import { useParams } from "next/navigation";
 
 import InfoMessage, { clearMessage } from "@/components/InfoMessage";
+import { useZones } from "@/hooks/useZones";
 import { editZone } from "@/server/editZone";
-import { myZones } from "@/server/myZones";
 import { useRouter } from "@/utils/navigation";
 
 import { ZoneForm, ZoneFormValues } from "../../components/ZoneForm";
@@ -23,43 +22,9 @@ const EditZone = () => {
     message: "",
   });
 
-  const { data, isFetching, error, refetch } = useQuery({
-    queryKey: ["zones"],
-    queryFn: async () => myZones(),
-    refetchOnWindowFocus: false,
-    staleTime: Infinity,
-    gcTime: 10 * 60 * 1000,
-    retry: false,
-  });
+  const { zones, isFetching, refetch } = useZones();
 
-  const editZoneMutation = useMutation({
-    mutationFn: async (data: ZoneFormValues) => {
-      const updatedZone = await editZone({
-        id: params.id as string,
-        zone: data,
-      });
-
-      if (updatedZone.serverError) {
-        throw new Error(updatedZone.serverError);
-      }
-
-      return updatedZone;
-    },
-    onError: (error) => {
-      setResponseMessage({
-        isSuccessful: false,
-        message: t("createFailure"),
-      });
-
-      clearMessage(setResponseMessage);
-    },
-    onSuccess: async () => {
-      await refetch();
-      router.push("/zones");
-    },
-  });
-
-  const zone = (data?.data ?? []).find((zone) => zone.id === params.id);
+  const zone = zones.find((zone) => zone.id === params.id);
 
   if (isFetching) {
     return null;
@@ -70,7 +35,26 @@ const EditZone = () => {
   }
 
   const onSubmit = async (data: ZoneFormValues) => {
-    await editZoneMutation.mutateAsync(data);
+    try {
+      const updatedZone = await editZone({
+        id: params.id as string,
+        zone: data,
+      });
+
+      if (updatedZone.serverError) {
+        throw new Error(updatedZone.serverError);
+      }
+
+      await refetch();
+      router.push("/zones");
+    } catch (error) {
+      setResponseMessage({
+        isSuccessful: false,
+        message: t("createFailure"),
+      });
+
+      clearMessage(setResponseMessage);
+    }
   };
 
   return (
@@ -87,6 +71,7 @@ const EditZone = () => {
         onCancel={() => router.push("/zones")}
         zone={zone}
       />
+
       <InfoMessage responseMessage={responseMessage} />
     </div>
   );