Zone editing

src/app/[locale]/(main)/components/Footer.tsx

@@ -2,17 +2,24 @@
 
 import { useSetAtom } from "jotai";
 import { useTranslations } from "next-intl";
+import { useParams } from "next/navigation";
 import { FaGithub, FaRegEnvelope } from "react-icons/fa";
 
 import { burgerMenuIsOpenAtom } from "@/atoms";
-import { Link, usePathname } from "@/utils/navigation";
+import { Link, usePathname, useRouter } from "@/utils/navigation";
 
 import ThemeSwitcher from "./ThemeSwitcher";
 
 export default function Footer() {
   const t = useTranslations("Footer");
   const setBurgerMenuIsOpen = useSetAtom(burgerMenuIsOpenAtom);
+  const router = useRouter();
   const pathname = usePathname();
+  const params = useParams();
+
+  const changeLanguage = (lang: string) => {
+    router.push({ pathname, params: params as any }, { locale: lang });
+  };
 
   return (
     <footer
@@ -20,7 +27,7 @@ export default function Footer() {
       data-test="footer"
     >
       <div
-        className="flex items-center py-2 hover:[&_a]:opacity-80"
+        className="flex items-center py-2 hover:[&_a]:opacity-80 hover:[&_button]:opacity-80"
         onClick={() => setBurgerMenuIsOpen(false)}
       >
         <a
@@ -35,13 +42,9 @@ export default function Footer() {
           <FaRegEnvelope />
         </Link>
         <div className="mr-4 space-x-2 text-xs">
-          <Link href={pathname} locale="fr">
-            FR
-          </Link>
+          <button onClick={() => changeLanguage("fr")}>FR</button>
           <span>|</span>
-          <Link href={pathname} locale="en">
-            EN
-          </Link>
+          <button onClick={() => changeLanguage("en")}>EN</button>
         </div>
         <div className="text-xs hover:opacity-80">
           <ThemeSwitcher />

src/app/[locale]/(main)/zones/components/ZoneForm.tsx

@@ -15,6 +15,7 @@ import { TimeControl } from "@/types";
 export type ZoneFormValues = z.infer<typeof zoneSchema>;
 
 type ZoneFormProps = {
+  zone?: ZoneFormValues;
   onSubmit: (data: ZoneFormValues) => Promise<void>;
   onCancel: () => void;
   submitTitle?: string;
@@ -22,6 +23,7 @@ type ZoneFormProps = {
 };
 
 export const ZoneForm = ({
+  zone,
   onSubmit,
   onCancel,
   submitTitle,
@@ -29,9 +31,11 @@ export const ZoneForm = ({
 }: ZoneFormProps) => {
   const t = useTranslations("Zones");
   const at = useTranslations("App");
+
+  // @ts-ignore - Type instantiation is excessively deep and possibly infinite
   const form = useForm<ZoneFormValues>({
     resolver: zodResolver(zoneSchema),
-    defaultValues: {
+    defaultValues: zone ?? {
       classicNotifications: false,
       rapidNotifications: false,
       blitzNotifications: false,

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

@@ -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;

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

@@ -57,7 +57,7 @@ const Zones = () => {
               ...(zone.rapidNotifications ? [TimeControl.Rapid] : []),
               ...(zone.blitzNotifications ? [TimeControl.Blitz] : []),
             ];
-            console.log(notifications);
+
             const notificationsList = format.list(
               notifications.map((tc) => at("timeControlEnumInline", { tc })),
               { type: "conjunction" },
@@ -84,12 +84,15 @@ const Zones = () => {
                   </div>
 
                   <div className="flex gap-4">
-                    <button
-                      type="button"
+                    <Link
+                      href={{
+                        pathname: "/zones/edit/[id]",
+                        params: { id: zone.id },
+                      }}
                       className="rounded-lg border border-primary px-3 py-2 text-center text-xs text-primary  hover:bg-primary hover:text-white focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:focus:ring-primary-800 sm:w-fit"
                     >
                       {t("editButton")}
-                    </button>
+                    </Link>
                     <button
                       type="button"
                       className="rounded-lg border border-primary px-3 py-2 text-center text-xs text-primary  hover:bg-primary hover:text-white focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:focus:ring-primary-800 sm:w-fit"