Zone editing

2026-07-23 04:26:57 +00:00 · 2024-04-11 11:21:08 +02:00
parent 9f12a00030
commit 9e9f5fd975
11 changed files with 225 additions and 28 deletions
@@ -0,0 +1,96 @@
+"use client";
+
+import { useState } from "react";
+
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useTranslations } from "next-intl";
+import { useParams } from "next/navigation";
+
+import InfoMessage, { clearMessage } from "@/components/InfoMessage";
+import { editZone } from "@/server/editZone";
+import { myZones } from "@/server/myZones";
+import { useRouter } from "@/utils/navigation";
+
+import { ZoneForm, ZoneFormValues } from "../../components/ZoneForm";
+
+const EditZone = () => {
+  const t = useTranslations("Zones");
+  const router = useRouter();
+  const params = useParams();
+  const queryClient = useQueryClient();
+
+  const [responseMessage, setResponseMessage] = useState({
+    isSuccessful: false,
+    message: "",
+  });
+
+  const { data, isFetching, error, refetch } = useQuery({
+    queryKey: ["zones"],
+    queryFn: async () => myZones(),
+    refetchOnWindowFocus: false,
+    staleTime: Infinity,
+    gcTime: 10 * 60 * 1000,
+    retry: false,
+  });
+
+  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);
+
+  if (isFetching) {
+    return null;
+  }
+
+  if (!isFetching && !zone) {
+    router.push("/zones");
+  }
+
+  const onSubmit = async (data: ZoneFormValues) => {
+    await editZoneMutation.mutateAsync(data);
+  };
+
+  return (
+    <div className="mx-auto max-w-screen-md px-4 pb-20 pt-8 lg:pt-16">
+      <h2
+        className="mb-4 text-center text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white"
+        data-test="header2"
+      >
+        {t("editTitle")}
+      </h2>
+
+      <ZoneForm
+        onSubmit={onSubmit}
+        onCancel={() => router.push("/zones")}
+        zone={zone}
+      />
+      <InfoMessage responseMessage={responseMessage} />
+    </div>
+  );
+};
+
+export default EditZone;