Zone collection + creation

Zone create UI flow

src/app/[locale]/(main)/add-tournament/Map.tsx

@@ -11,7 +11,7 @@ import { useFormContext, useWatch } from "react-hook-form";
 import { MapContainer, Marker, TileLayer } from "react-leaflet";
 
 import { mapBoundsAtom } from "@/atoms";
-import MapEvents from "@/components/MapEvents";
+import { MapEvents } from "@/components/MapEvents";
 
 const center: LatLngLiteral = { lat: 47.0844, lng: 2.3964 };
 

src/app/[locale]/(main)/add-tournament/TournamentForm.tsx

@@ -59,7 +59,7 @@ const TournamentForm = () => {
     } catch (err: unknown) {
       console.log(err);
       setResponseMessage({
-        isSuccessful: true,
+        isSuccessful: false,
         message: t("failure"),
       });
 

src/app/[locale]/(main)/auth/sign-in/page.tsx

@@ -53,7 +53,7 @@ export default function SignIn() {
       console.log(err);
 
       setResponseMessage({
-        isSuccessful: true,
+        isSuccessful: false,
         message: t("failure"),
       });
 

src/app/[locale]/(main)/contact-us/ContactForm.tsx

@@ -41,7 +41,7 @@ const ContactForm = () => {
     } catch (err: unknown) {
       console.log(err);
       setResponseMessage({
-        isSuccessful: true,
+        isSuccessful: false,
         message: t("failure"),
       });
 

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

@@ -12,9 +12,21 @@ import { ZoneEditorField } from "@/components/form/ZoneEditorField";
 import { zoneSchema } from "@/schemas";
 import { TimeControl } from "@/types";
 
-type ZoneFormValues = z.infer<typeof zoneSchema>;
+export type ZoneFormValues = z.infer<typeof zoneSchema>;
 
-export const ZoneForm = () => {
+type ZoneFormProps = {
+  onSubmit: (data: ZoneFormValues) => Promise<void>;
+  onCancel: () => void;
+  submitTitle?: string;
+  cancelTitle?: string;
+};
+
+export const ZoneForm = ({
+  onSubmit,
+  onCancel,
+  submitTitle,
+  cancelTitle,
+}: ZoneFormProps) => {
   const t = useTranslations("Zones");
   const at = useTranslations("App");
   const form = useForm<ZoneFormValues>({
@@ -30,67 +42,67 @@ export const ZoneForm = () => {
     },
   });
 
-  const onSubmit = async (data: ZoneFormValues) => {
-    try {
-      console.log(data);
-    } catch (err: unknown) {
-      console.log(err);
-    }
-  };
-
   return (
-    <div className="mx-auto max-w-screen-md px-4 py-8 lg:py-16">
-      <FormProvider {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-          <div className="grid grid-cols-3 items-start gap-6">
-            <div className="col-span-3">
-              <TextField
-                name="name"
-                control={form.control}
-                label={t("zoneNameLabel")}
-                placeholder={t("zoneNamePlaceholder")}
-                required
-              />
-            </div>
+    <FormProvider {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <div className="grid grid-cols-3 items-start gap-6">
+          <div className="col-span-3">
+            <TextField
+              name="name"
+              control={form.control}
+              label={t("zoneNameLabel")}
+              placeholder={t("zoneNamePlaceholder")}
+              required
+            />
+          </div>
 
-            <div className="col-span-3">
-              <div className="flex flex-col gap-4">
-                <Label>{t("notificationsLabel")}</Label>
-                <div className="font-light text-gray-500 dark:text-gray-400">
-                  {t("notificationsInfo")}
-                </div>
+          <div className="col-span-3">
+            <div className="flex flex-col gap-4">
+              <Label>{t("notificationsLabel")}</Label>
+              <div className="font-light text-gray-500 dark:text-gray-400">
+                {t("notificationsInfo")}
               </div>
             </div>
-
-            <InlineSwitchField
-              name="classicNotifications"
-              control={form.control}
-              label={at("timeControlEnum", { tc: TimeControl.Classic })}
-            />
-            <InlineSwitchField
-              name="rapidNotifications"
-              control={form.control}
-              label={at("timeControlEnum", { tc: TimeControl.Rapid })}
-            />
-            <InlineSwitchField
-              name="blitzNotifications"
-              control={form.control}
-              label={at("timeControlEnum", { tc: TimeControl.Blitz })}
-            />
-
-            <section id="map" className="z-0 col-span-3 flex h-auto">
-              <ZoneEditorField name="features" control={form.control} />
-            </section>
           </div>
+
+          <InlineSwitchField
+            name="classicNotifications"
+            control={form.control}
+            label={at("timeControlEnum", { tc: TimeControl.Classic })}
+          />
+          <InlineSwitchField
+            name="rapidNotifications"
+            control={form.control}
+            label={at("timeControlEnum", { tc: TimeControl.Rapid })}
+          />
+          <InlineSwitchField
+            name="blitzNotifications"
+            control={form.control}
+            label={at("timeControlEnum", { tc: TimeControl.Blitz })}
+          />
+
+          <section id="map" className="z-0 col-span-3 flex h-auto">
+            <ZoneEditorField name="features" control={form.control} />
+          </section>
+        </div>
+
+        <div className="flex justify-end gap-4">
+          <button
+            onClick={onCancel}
+            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"
+          >
+            {cancelTitle ?? at("cancelButton")}
+          </button>
+
           <button
             disabled={form.formState.isSubmitting}
             type="submit"
             className="rounded-lg bg-primary-600 px-5 py-3 text-center text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-fit"
           >
-            {t("saveButton")}
+            {submitTitle ?? at("saveButton")}
           </button>
-        </form>
-      </FormProvider>
-    </div>
+        </div>
+      </form>
+    </FormProvider>
   );
 };

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

@@ -0,0 +1,41 @@
+import * as React from "react";
+
+import L, { LatLngLiteral } from "leaflet";
+import "leaflet-defaulticon-compatibility";
+import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
+import "leaflet/dist/leaflet.css";
+import { FeatureGroup, GeoJSON, MapContainer, TileLayer } from "react-leaflet";
+
+import { MapEvents } from "@/components/MapEvents";
+import type { ZoneModel } from "@/server/models/zoneModel";
+
+const center: LatLngLiteral = { lat: 47.0844, lng: 2.3964 };
+
+export type ZoneThumbnailProps = {
+  features: ZoneModel["features"];
+  size: number;
+};
+
+export const ZoneThumbnail = ({ features, size }: ZoneThumbnailProps) => {
+  return (
+    <MapContainer
+      center={center}
+      zoom={5}
+      zoomControl={false}
+      scrollWheelZoom={false}
+      dragging={false}
+      style={{ height: size, width: size }}
+      attributionControl={false}
+    >
+      <MapEvents bounds={L.geoJson(features).getBounds()} />
+      <TileLayer
+        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+      />
+
+      <GeoJSON data={features} />
+    </MapContainer>
+  );
+};
+
+export default ZoneThumbnail;

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

@@ -1,28 +1,50 @@
 "use client";
 
-import { FeatureCollection } from "geojson";
+import { useState } from "react";
+
 import { useTranslations } from "next-intl";
 
-import { ZoneForm } from "../components/ZoneForm";
+import InfoMessage, { clearMessage } from "@/components/InfoMessage";
+import { createZone } from "@/server/createZone";
+import { useRouter } from "@/utils/navigation";
 
-type ZoneFormValues = {
-  features: FeatureCollection;
-};
+import { ZoneForm, ZoneFormValues } from "../components/ZoneForm";
 
 const CreateZone = () => {
   const t = useTranslations("Zones");
+  const router = useRouter();
+
+  const [responseMessage, setResponseMessage] = useState({
+    isSuccessful: false,
+    message: "",
+  });
 
   const onSubmit = async (data: ZoneFormValues) => {
     try {
-      console.log(data);
+      await createZone(data);
+      router.push("/zones");
     } catch (err: unknown) {
       console.log(err);
+      setResponseMessage({
+        isSuccessful: false,
+        message: t("createFailure"),
+      });
+
+      clearMessage(setResponseMessage);
     }
   };
 
   return (
-    <div className="mx-auto max-w-screen-md px-4 py-8 lg:py-16">
-      <ZoneForm />
+    <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("createTitle")}
+      </h2>
+
+      <ZoneForm onSubmit={onSubmit} onCancel={() => router.push("/zones")} />
+      <InfoMessage responseMessage={responseMessage} />
     </div>
   );
 };

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

@@ -0,0 +1,120 @@
+"use client";
+
+import React from "react";
+
+import { useQuery } from "@tanstack/react-query";
+import { useFormatter, useTranslations } from "next-intl";
+import dynamic from "next/dynamic";
+import { IoAdd } from "react-icons/io5";
+
+import { Spinner } from "@/components/Spinner";
+import { myZones } from "@/server/myZones";
+import { TimeControl } from "@/types";
+import { Link } from "@/utils/navigation";
+
+const ZoneThumbnail = dynamic(() => import("./components/ZoneThumbnail"), {
+  ssr: false,
+  loading: () => <div className="h-[200px] w-[200px] bg-gray-200" />,
+});
+
+const Zones = () => {
+  const t = useTranslations("Zones");
+  const at = useTranslations("App");
+  const format = useFormatter();
+
+  const { data, isFetching, error } = useQuery({
+    queryKey: ["zones"],
+    queryFn: async () => myZones(),
+    refetchOnWindowFocus: false,
+    staleTime: Infinity,
+    gcTime: 10 * 60 * 1000,
+    retry: false,
+  });
+
+  const zones = data?.data ?? [];
+
+  return (
+    <div className="mx-auto max-w-screen-md px-4 py-8 lg:py-16">
+      <h2
+        className="mb-4 text-center text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white"
+        data-test="header2"
+      >
+        {t("title")}
+      </h2>
+      <p className="mb-8 text-center font-light text-gray-500 dark:text-gray-400 sm:text-xl lg:mb-16">
+        {t("info")}
+      </p>
+
+      {isFetching ? (
+        <div className="mt-8 flex justify-center">
+          <Spinner />
+        </div>
+      ) : (
+        <div className="flex flex-col gap-8">
+          {zones?.map((zone) => {
+            const notifications = [
+              ...(zone.classicNotifications ? [TimeControl.Classic] : []),
+              ...(zone.rapidNotifications ? [TimeControl.Rapid] : []),
+              ...(zone.blitzNotifications ? [TimeControl.Blitz] : []),
+            ];
+            console.log(notifications);
+            const notificationsList = format.list(
+              notifications.map((tc) => at("timeControlEnumInline", { tc })),
+              { type: "conjunction" },
+            );
+
+            return (
+              <div
+                className="flex gap-4 text-gray-900 dark:text-white"
+                key={zone.id}
+              >
+                <ZoneThumbnail features={zone.features} size={200} />
+                <div className="flex flex-1 flex-col justify-between">
+                  <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
+                    {zone.name}
+                  </h3>
+
+                  <div>
+                    {notifications.length === 0
+                      ? t("noNotifications")
+                      : t.rich("withNotifications", {
+                          list: notificationsList,
+                          b: (str) => <b>{str}</b>,
+                        })}
+                  </div>
+
+                  <div className="flex gap-4">
+                    <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"
+                    >
+                      {t("editButton")}
+                    </button>
+                    <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"
+                    >
+                      {t("deleteButton")}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      <div className="mt-12 flex justify-center gap-4">
+        <Link
+          href={`/zones/create`}
+          className="rounded-lg bg-primary-600 px-5 py-3 text-center text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-fit"
+        >
+          <IoAdd className="mr-2 inline-block h-5 w-5" />
+          {t("addZoneButton")}
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default Zones;