Use tRPC and react-hook-form

.vscode/settings.json

@@ -5,12 +5,15 @@
     "colour",
     "colours",
     "contactez",
+    "datepicker",
     "defaulticon",
     "Depfu",
     "Échecs",
     "Fédération",
     "Florifourchette",
     "Française",
+    "headlessui",
+    "hookform",
     "kodingdotninja",
     "Lente",
     "localisation",
@@ -25,6 +28,7 @@
     "spiderified",
     "superjson",
     "tailwindcss",
+    "tanstack",
     "timothyarmes",
     "tournois",
     "trivago",
@@ -33,5 +37,12 @@
     "unspiderfy"
   ],
 
-  "css.customData": [".vscode/tailwindcss.json"]
+  "css.customData": [".vscode/tailwindcss.json"],
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "css.lint.unknownAtRules": "ignore",
+  "tailwindCSS.experimental.classRegex": ["[a-zA-Z]*ClassName=\"([^\"]+)\""]
 }

app/[lang]/ajouter-un-tournoi/Map.tsx

@@ -1,86 +1,50 @@
 "use client";
 
-import { ChangeEvent, useMemo, useRef } from "react";
+import { useMemo, useRef } from "react";
 
 import { useSetAtom } from "jotai";
-import L from "leaflet";
+import L, { LatLngLiteral } from "leaflet";
 import "leaflet-defaulticon-compatibility";
 import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
 import "leaflet/dist/leaflet.css";
-import { useTranslations } from "next-intl";
+import { useFormContext, useWatch } from "react-hook-form";
 import { MapContainer, Marker, TileLayer } from "react-leaflet";
 
 import MapEvents from "@/app/[lang]/components/MapEvents";
 import { mapBoundsAtom } from "@/app/atoms";
-import { MapProps } from "@/types";
 
-const Map = ({ position, setPosition, center }: MapProps) => {
+const center: LatLngLiteral = { lat: 47.0844, lng: 2.3964 };
-  const t = useTranslations("Map");
 
-  const latValue = position.lat.toFixed(4);
+const Map = () => {
-  const lngValue = position.lng.toFixed(4);
+  const { control, setValue } = useFormContext();
+
+  const latValue = useWatch({ control, name: "tournament.coordinates.0" });
+  const lngValue = useWatch({ control, name: "tournament.coordinates.1" });
 
   const setMapBounds = useSetAtom(mapBoundsAtom);
   const markerRef = useRef<L.Marker | null>(null);
 
-  const handleLatChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
-    const newLat = Number(target.value);
-    setPosition((prevPosition) => ({ ...prevPosition, lat: newLat }));
-  };
-
-  const handleLngChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
-    const newLng = Number(target.value);
-    setPosition((prevPosition) => ({ ...prevPosition, lng: newLng }));
-  };
-
   const eventHandlers = useMemo(
     () => ({
       dragend() {
         const marker = markerRef.current;
         if (marker != null) {
-          setPosition(marker.getLatLng());
+          const position = marker.getLatLng();
+          setValue(
+            "tournament.coordinates.0",
+            Math.round((position.lat + Number.EPSILON) * 10000) / 10000,
+          );
+          setValue(
+            "tournament.coordinates.1",
+            Math.round((position.lng + Number.EPSILON) * 10000) / 10000,
+          );
         }
       },
     }),
-    [setPosition],
+    [setValue],
   );
 
   return (
-    <>
-      <div className="col-span-2 sm:col-span-1">
-        <label
-          htmlFor="lat"
-          className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
-        >
-          {t("latLabel")}
-        </label>
-        <input
-          value={latValue}
-          onChange={handleLatChange}
-          type="number"
-          id="lat"
-          className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-3 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
-          required
-        />
-      </div>
-      <div className="col-span-2 sm:col-span-1">
-        <label
-          htmlFor="lng"
-          className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
-        >
-          {t("lngLabel")}
-        </label>
-        <input
-          value={lngValue}
-          onChange={handleLngChange}
-          type="number"
-          id="lng"
-          className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-3 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
-          required
-        />
-      </div>
-
-      <section id="map" className="z-0 col-span-4 flex h-auto">
     <MapContainer
       center={center}
       zoom={5}
@@ -98,14 +62,12 @@ const Map = ({ position, setPosition, center }: MapProps) => {
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
       />
       <Marker
-            position={position}
+        position={{ lat: latValue, lng: lngValue }}
         draggable={true}
         ref={markerRef}
         eventHandlers={eventHandlers}
       />
     </MapContainer>
-      </section>
-    </>
   );
 };
 

app/[lang]/ajouter-un-tournoi/TournamentForm.tsx

@@ -2,18 +2,25 @@
 
 import { useState } from "react";
 
-import { useAtomValue } from "jotai";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { useTranslations } from "next-intl";
 import dynamic from "next/dynamic";
+import { FormProvider, useForm } from "react-hook-form";
+import { z } from "zod";
 
+import { clearMessage } from "@/app/[lang]/components/InfoMessage";
 import InfoMessage from "@/app/[lang]/components/InfoMessage";
 import LoadingMap from "@/app/[lang]/components/LoadingMap";
-import { franceCenterAtom } from "@/app/atoms";
+import { DateField } from "@/app/[lang]/components/form/DateField";
-import {
+import { SelectField } from "@/app/[lang]/components/form/SelectField";
-  handleClearTournamentForm,
+import { SwitchField } from "@/app/[lang]/components/form/SwitchField";
-  handleTournamentSubmit,
+import { TextAreaField } from "@/app/[lang]/components/form/TextAreaField";
-} from "@/handlers/formHandlers";
+import { TextField } from "@/app/[lang]/components/form/TextField";
-import useTournamentForm from "@/hooks/useTournamentForm";
+import { addTournamentSchema } from "@/schemas";
+import { TimeControl } from "@/types";
+import { trpc } from "@/utils/trpc";
+
+type TournamentFormValues = z.infer<typeof addTournamentSchema>;
 
 const Map = dynamic(() => import("./Map"), {
   ssr: false,
@@ -22,248 +29,184 @@ const Map = dynamic(() => import("./Map"), {
 
 const TournamentForm = () => {
   const t = useTranslations("AddTournament");
-  const center = useAtomValue(franceCenterAtom);
+  const at = useTranslations("App");
-  const formRefs = useTournamentForm();
+  const addTournament = trpc.addTournament.useMutation();
-
-  const [isSending, setIsSending] = useState(false);
   const [responseMessage, setResponseMessage] = useState({
     isSuccessful: false,
     message: "",
   });
 
-  return (
+  const form = useForm<TournamentFormValues>({
-    <>
+    resolver: zodResolver(addTournamentSchema),
-      <form
+    defaultValues: {
-        onSubmit={(e) =>
+      tournament: {
-          handleTournamentSubmit(
+        norm_tournament: false,
-            e,
+        coordinates: [47.0844, 2.3964],
-            t,
+      },
-            setIsSending,
+    },
-            setResponseMessage,
+  });
-            formRefs,
+
-          )
+  const onSubmit = async (data: TournamentFormValues) => {
+    try {
+      await addTournament.mutateAsync(data);
+      setResponseMessage({
+        isSuccessful: true,
+        message: t("success"),
+      });
+
+      clearMessage(setResponseMessage);
+      form.reset();
+    } catch (err: unknown) {
+      console.log(err);
+      setResponseMessage({
+        isSuccessful: true,
+        message: t("failure"),
+      });
+
+      clearMessage(setResponseMessage);
     }
-        className="space-y-8"
+  };
-      >
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
         <div className="grid grid-cols-4 items-start gap-6">
           <div className="col-span-4">
-            <label
+            <TextField
-              htmlFor="tournament-name"
+              name="tournament.tournament"
-              className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
+              label={t("tournamentNameLabel")}
-            >
-              {t("tournamentNameLabel")}
-            </label>
-            <input
-              ref={formRefs.tournamentNameRef}
-              type="text"
-              id="tournament-name"
-              className="item dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
               placeholder={t("tournamentNamePlaceholder")}
               required
             />
           </div>
           <div className="col-span-2 sm:col-span-1">
-            <label
+            <DateField name="tournament.date" label={t("dateLabel")} required />
-              htmlFor="date"
-              className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
-            >
-              {t("dateLabel")}
-            </label>
-            <input
-              ref={formRefs.dateRef}
-              type="date"
-              id="date"
-              className="dark:shadow-sm-light block w-full content-center rounded-lg border border-gray-300 bg-gray-50 p-3 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
-              required
-            />
           </div>
           <div className="col-span-2 sm:col-span-1">
-            <label
+            <TextField
-              htmlFor="url"
+              name="tournament.url"
-              className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
+              label={t("urlLabel")}
-            >
-              {t("urlLabel")}
-            </label>
-            <input
-              ref={formRefs.urlRef}
-              type="url"
-              id="url"
               placeholder={t("urlPlaceholder")}
-              className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-3 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
               required
             />
           </div>
           <div className="col-span-2 sm:col-span-1">
-            <label
+            <SelectField
-              htmlFor="time-control"
+              name="tournament.time_control"
-              className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
+              label={t("tcLabel")}
-            >
+              options={[
-              {t("tcLabel")}
+                TimeControl.Classic,
-            </label>
+                TimeControl.Rapid,
-            <select
+                TimeControl.Blitz,
-              ref={formRefs.timeControlRef}
+              ].map((tc) => ({
-              id="time-control"
+                value: tc,
-              className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-3 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
+                label: at("timeControlEnum", { tc }),
-              defaultValue="Classical"
+              }))}
-            >
+              required
-              <option value="Classical">{t("tcOption1")}</option>
+            />
-              <option value="Rapid">{t("tcOption2")}</option>
-              <option value="Blitz">{t("tcOption3")}</option>
-              <option value="Other">{t("tcOption4")}</option>
-            </select>
           </div>
           <div className="col-span-2 sm:col-span-1">
-            <label
+            <SwitchField
-              htmlFor="norm"
+              name="tournament.norm_tournament"
-              className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
+              label={t("normLabel")}
-            >
+            />
-              {t("normLabel")}
-            </label>
-            <select
-              ref={formRefs.normRef}
-              id="norm"
-              className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-3 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
-              defaultValue="false"
-            >
-              <option value="false">{t("normNo")}</option>
-              <option value="true">{t("normYes")}</option>
-            </select>
           </div>
           <div className="col-span-4">
-            <label
+            <TextField
-              htmlFor="address"
+              name="tournament.address"
-              className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
+              label={t("addressLabel")}
-            >
-              {t("addressLabel")}
-            </label>
-            <input
-              ref={formRefs.addressRef}
-              type="text"
-              id="address"
-              className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
               placeholder={t("addressPlaceholder")}
               required
             />
           </div>
           <div className="col-span-4 sm:col-span-2">
-            <label
+            <TextField
-              htmlFor="town"
+              name="tournament.town"
-              className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
+              label={t("townLabel")}
-            >
-              {t("townLabel")}
-            </label>
-            <input
-              ref={formRefs.townRef}
-              type="text"
-              id="town"
-              className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-3 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
               placeholder={t("townPlaceholder")}
               required
             />
           </div>
           <div className="col-span-2 sm:col-span-1">
-            <label
+            <TextField
-              htmlFor="department"
+              name="tournament.department"
-              className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
+              label={t("departmentLabel")}
-            >
-              {t("departmentLabel")}
-            </label>
-            <input
-              ref={formRefs.departmentRef}
-              type="text"
-              id="department"
-              className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-3 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
               placeholder={t("departmentPlaceholder")}
-              // required
+              required
             />
           </div>
           <div className="col-span-2 sm:col-span-1">
-            <label
+            <TextField
-              htmlFor="country"
+              name="tournament.country"
-              className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
+              label={t("countryLabel")}
-            >
-              {t("countryLabel")}
-            </label>
-            <input
-              ref={formRefs.countryRef}
-              type="text"
-              id="country"
-              className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-3 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
               placeholder={t("countryPlaceholder")}
               required
             />
           </div>
           <div className="col-span-2 sm:col-span-1">
-            <label
+            <TextField
-              htmlFor="your-name"
+              name="name"
-              className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
+              label={t("yourNameLabel")}
-            >
-              {t("yourNameLabel")}
-            </label>
-            <input
-              ref={formRefs.yourNameRef}
-              type="text"
-              id="your-name"
-              className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-3 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
               placeholder={t("yourNamePlaceholder")}
               required
             />
           </div>
           <div className="col-span-2 sm:col-span-1">
-            <label
+            <TextField
-              htmlFor="your-email"
+              name="email"
-              className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
+              label={t("yourEmailLabel")}
-            >
-              {t("yourEmailLabel")}
-            </label>
-            <input
-              ref={formRefs.yourEmailRef}
-              type="email"
-              id="your-email"
-              className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-gray-50 p-3 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
               placeholder={t("yourEmailPlaceholder")}
               required
             />
           </div>
           <div className="col-span-4 row-span-2 sm:col-span-2">
-            <label
+            <TextAreaField
-              htmlFor="message"
+              name="message"
-              className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
+              label={t("messageLabel")}
-            >
-              {t("messageLabel")}
-            </label>
-            <textarea
-              ref={formRefs.messageRef}
-              id="message"
               rows={6}
-              className="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
               placeholder={t("messagePlaceholder")}
-              // required
-            ></textarea>
-          </div>
-          <Map
-            position={formRefs.position}
-            setPosition={formRefs.setPosition}
-            center={center}
             />
           </div>
+
+          <div className="col-span-2 sm:col-span-1">
+            <TextField
+              name="tournament.coordinates.0"
+              label={t("latLabel")}
+              type="number"
+              required
+            />
+          </div>
+          <div className="col-span-2 sm:col-span-1">
+            <TextField
+              name="tournament.coordinates.1"
+              label={t("lngLabel")}
+              type="number"
+              required
+            />
+          </div>
+
+          <section id="map" className="z-0 col-span-4 flex h-auto">
+            <Map />
+          </section>
+        </div>
         <button
-          disabled={isSending}
+          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"
         >
-          {isSending ? t("sending") : t("sendButton")}
+          {form.formState.isSubmitting ? t("sending") : t("sendButton")}
         </button>
         <button
-          onClick={() => handleClearTournamentForm(formRefs, center)}
+          onClick={() => form.reset()}
           type="button"
           className="ml-4 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("clearForm")}
         </button>
-        <InfoMessage responseMessage={responseMessage} />;
+
+        <InfoMessage responseMessage={responseMessage} />
       </form>
-    </>
+    </FormProvider>
   );
 };
 

app/[lang]/ajouter-un-tournoi/page.tsx

@@ -14,9 +14,11 @@ export default function Contact() {
         >
           {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>
+
         <TournamentForm />
       </div>
     </section>

app/[lang]/components/ThemeSwitcher.tsx

@@ -25,7 +25,7 @@ const ThemeSwitcher = () => {
             <path
               fill-rule="evenodd"
               d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z"
-              clip-rule="evenodd"
+              clipRule="evenodd"
             />
           </svg>
         </div>

app/[lang]/components/form/DateField/components/DatePickerCustomHeader.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+
+import { format } from "date-fns";
+import { enGB, fr } from "date-fns/locale";
+import { useLocale } from "next-intl";
+import { ReactDatePickerCustomHeaderProps } from "react-datepicker";
+import { IoChevronBack, IoChevronForward } from "react-icons/io5";
+import { twMerge } from "tailwind-merge";
+
+const chevronClasses = {
+  chevronRoot: "h-4 w-4 dark:text-white",
+  chevronClassDisabled: "!text-neutral-500",
+};
+
+export const DatePickerCustomHeader = ({
+  date,
+  decreaseMonth,
+  increaseMonth,
+  prevMonthButtonDisabled,
+  nextMonthButtonDisabled,
+}: ReactDatePickerCustomHeaderProps) => {
+  // Bit of a hack. inputRef doesn't work because DatePicker doesn't correctly propagate props
+  const locale = useLocale();
+
+  return (
+    <div className="mb-2 flex !w-full items-center justify-between border-b border-neutral-500 px-6 pb-4">
+      <button
+        onClick={decreaseMonth}
+        disabled={prevMonthButtonDisabled}
+        className={chevronClasses.chevronRoot}
+      >
+        <IoChevronBack
+          className={twMerge(
+            chevronClasses.chevronRoot,
+            prevMonthButtonDisabled && chevronClasses.chevronClassDisabled,
+          )}
+        />
+      </button>
+      {format(date, "LLLL yyyy", { locale: locale === "fr" ? fr : enGB })}
+      <button
+        onClick={increaseMonth}
+        disabled={nextMonthButtonDisabled}
+        className={chevronClasses.chevronRoot}
+      >
+        <IoChevronForward
+          className={twMerge(
+            chevronClasses.chevronRoot,
+            nextMonthButtonDisabled && chevronClasses.chevronClassDisabled,
+          )}
+        />
+      </button>
+    </div>
+  );
+};

app/[lang]/components/form/DateField/components/InputDatePicker.tsx

@@ -0,0 +1,65 @@
+import React, { forwardRef } from "react";
+
+import InputMask from "react-input-mask";
+import { twMerge } from "tailwind-merge";
+
+interface InputProps {
+  error?: boolean;
+  className?: string;
+  inputContainerClass?: string;
+  inputClass?: string;
+  mask?: string | (string | RegExp)[];
+}
+
+type AllProps = React.DetailedHTMLProps<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  HTMLInputElement
+> &
+  InputProps;
+
+export const InputDatePicker = forwardRef<HTMLInputElement, AllProps>(
+  (
+    {
+      error,
+      className,
+      children,
+      inputContainerClass,
+      inputClass,
+      mask,
+      ...props
+    },
+    inputRef,
+  ) => {
+    return (
+      <div
+        className={twMerge(
+          "flex w-full content-center rounded-lg border p-3 text-sm",
+          "border-gray-300 bg-gray-50 text-gray-900 shadow-sm",
+          "dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 ",
+          !error &&
+            "focus-within:border-primary-500 focus-within:ring-primary-500 dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500",
+          error && "!border-orange-700 focus:!border-orange-700",
+          inputContainerClass,
+        )}
+      >
+        <InputMask
+          ref={inputRef as any}
+          mask={mask ?? ""}
+          className={twMerge(
+            "w-full border-none bg-transparent text-sm outline-none ring-0 focus:outline-none focus:ring-0 focus:ring-offset-0",
+            "text-gray-900 dark:text-white",
+            inputClass,
+          )}
+          onKeyDown={(e) => {
+            if (e.code === "Enter") {
+              e.stopPropagation();
+            }
+          }}
+          {...props}
+        />
+      </div>
+    );
+  },
+);
+
+InputDatePicker.displayName = "InputDatePicker";

app/[lang]/components/form/DateField/components/index.ts

@@ -0,0 +1 @@
+export * from "./InputDatePicker";

app/[lang]/components/form/DateField/index.tsx

@@ -0,0 +1,129 @@
+import React, { useRef } from "react";
+
+import { getYear, isValid, parse } from "date-fns";
+import fr from "date-fns/locale/fr";
+import { get, range } from "lodash";
+import { useLocale, useTranslations } from "next-intl";
+import DatePicker from "react-datepicker";
+import { registerLocale } from "react-datepicker";
+import { Controller, useFormContext } from "react-hook-form";
+import { twMerge } from "tailwind-merge";
+
+import { Field, FieldProps } from "../Field";
+
+import { InputDatePicker } from "./components";
+import { DatePickerCustomHeader } from "./components/DatePickerCustomHeader";
+
+registerLocale("fr", fr);
+
+type DateFieldProps = FieldProps & {
+  maxDate?: Date;
+  minDate?: Date;
+  dateFormat?: string;
+  className?: string;
+  datePickerPopperClass?: string;
+  required?: boolean;
+};
+
+export const DateField = ({
+  minDate,
+  maxDate,
+  dateFormat = "dd/MM/yyyy",
+  className,
+  datePickerPopperClass,
+
+  name,
+  ...otherFieldProps
+}: DateFieldProps) => {
+  const locale = useLocale();
+  const at = useTranslations("App");
+  const min = minDate ? minDate.getFullYear() : 1900;
+
+  const inputRef = useRef(null);
+
+  const form = useFormContext();
+  const {
+    formState: { errors },
+  } = form;
+
+  const hasError = name && !!get(errors, name)?.message;
+
+  return (
+    <Field name={name} {...otherFieldProps}>
+      <div className={twMerge("relative flex w-full flex-col", className)}>
+        <Controller
+          control={form.control}
+          name={name}
+          render={({ field }) => (
+            <DatePicker
+              locale={locale}
+              closeOnScroll={true}
+              placeholderText={at("datePlaceholder")}
+              portalId="calendar-portal"
+              dateFormat={dateFormat}
+              disabledKeyboardNavigation={true}
+              formatWeekDay={(day: string) => (
+                <div className="flex h-8 flex-col items-center justify-center">
+                  {day.slice(0, 3)}
+                </div>
+              )}
+              weekDayClassName={() =>
+                "text-xs h-8 w-8 flex-1 bg-gray-50 text-gray-900 dark:bg-gray-700 dark:text-white"
+              }
+              dayClassName={() =>
+                "text-xs h-8 w-8 flex-1 bg-gray-50 cursor-pointer hover:font-bold text-gray-900 dark:bg-gray-700 dark:text-white"
+              }
+              value={field.value}
+              selected={field.value}
+              onSelect={field.onChange}
+              onChange={field.onChange}
+              onChangeRaw={(e) => {
+                // Called when the user types in the input
+                if (e.currentTarget.value) {
+                  const value = e.currentTarget.value;
+                  const date = parse(value, at("dateParseFormat"), new Date());
+                  if (
+                    isValid(date) &&
+                    date.getFullYear() >= min &&
+                    maxDate &&
+                    getYear(maxDate) >= getYear(date)
+                  ) {
+                    field.onChange(date);
+                  }
+                }
+              }}
+              popperPlacement="bottom-start"
+              popperClassName={twMerge(
+                "z-50 mt-[12px] rounded border",
+                "border-gray-300 bg-gray-50 text-gray-900",
+                "dark:border-gray-600 dark:bg-gray-700 dark:text-white",
+
+                datePickerPopperClass,
+              )}
+              showPopperArrow={false}
+              calendarClassName={twMerge(
+                "border-gray-300 bg-gray-50 text-gray-900",
+                "dark:border-gray-600 dark:bg-gray-700 dark:text-white",
+              )}
+              minDate={minDate}
+              showFullMonthYearPicker
+              maxDate={maxDate}
+              renderCustomHeader={(props) => (
+                <DatePickerCustomHeader {...props} />
+              )}
+              customInput={
+                <InputDatePicker
+                  mask={at("dateMask")}
+                  inputClass="p-0"
+                  className="text-left"
+                  ref={inputRef}
+                  error={!!hasError}
+                />
+              }
+            />
+          )}
+        />
+      </div>
+    </Field>
+  );
+};

app/[lang]/components/form/ErrorMessage.tsx

@@ -0,0 +1,21 @@
+import { useTranslations } from "next-intl";
+
+type ErrorMessageProps = {
+  errorMessage: string;
+};
+
+export const ErrorMessage = ({ errorMessage }: ErrorMessageProps) => {
+  const t = useTranslations();
+
+  type TranslationKey = Parameters<typeof t>[0];
+
+  return errorMessage !== undefined ? (
+    <div className="mt-2 font-medium text-orange-700">
+      <p>
+        {errorMessage.startsWith("FormValidation")
+          ? t(errorMessage as TranslationKey)
+          : errorMessage}
+      </p>
+    </div>
+  ) : null;
+};

app/[lang]/components/form/Field.tsx

@@ -0,0 +1,68 @@
+import { ReactNode } from "react";
+
+import { get } from "lodash";
+import { useFormContext } from "react-hook-form";
+import { twMerge } from "tailwind-merge";
+
+import { ErrorMessage } from "./ErrorMessage";
+import { Label } from "./Label";
+
+export type FieldProps = {
+  name: string;
+  className?: string;
+  labelClassName?: string;
+  childrenWrapperClassName?: string;
+  label?: React.ReactNode;
+  hideErrorMessage?: boolean;
+};
+
+export const Field = (
+  props: Omit<FieldProps, "name"> & {
+    required?: boolean;
+    name?: string;
+    children: ReactNode;
+  },
+) => {
+  const {
+    name,
+    className,
+    labelClassName,
+    childrenWrapperClassName,
+    label,
+    children,
+    required,
+    hideErrorMessage = false,
+  } = props;
+
+  const form = useFormContext();
+
+  const {
+    formState: { errors },
+  } = form;
+
+  const hasError = name && !!get(errors, name)?.message;
+
+  return (
+    <div className={twMerge("flex w-full flex-col items-start", className)}>
+      {label ? (
+        <Label htmlFor={name} required={required} className={labelClassName}>
+          {label}
+        </Label>
+      ) : null}
+
+      <div
+        className={twMerge(
+          "flex w-full",
+          label && "mt-2",
+          childrenWrapperClassName,
+        )}
+      >
+        {children}
+      </div>
+
+      {hideErrorMessage || !hasError ? null : (
+        <ErrorMessage errorMessage={String(get(errors, name)?.message)} />
+      )}
+    </div>
+  );
+};

app/[lang]/components/form/Label.tsx

@@ -0,0 +1,31 @@
+import { twMerge } from "tailwind-merge";
+
+type LabelProps = React.DetailedHTMLProps<
+  React.LabelHTMLAttributes<HTMLLabelElement>,
+  HTMLLabelElement
+> & {
+  required?: boolean;
+  className?: string;
+  tooltip?: React.ReactNode;
+};
+
+export const Label = ({
+  required,
+  className,
+  children,
+  tooltip,
+  ...labelProps
+}: LabelProps) => {
+  return (
+    <label
+      {...labelProps}
+      className={twMerge(
+        "flex items-center text-sm font-medium text-gray-900 dark:text-gray-300",
+        required && "after:ml-0.5 after:content-['*']",
+        className,
+      )}
+    >
+      <div>{children}</div>
+    </label>
+  );
+};

app/[lang]/components/form/SelectField.tsx

@@ -0,0 +1,200 @@
+import { Fragment, useRef } from "react";
+
+import { Listbox, Transition } from "@headlessui/react";
+import { useTranslations } from "next-intl";
+import { Controller, useFormContext } from "react-hook-form";
+import {
+  IoChevronDown,
+  IoCloseOutline,
+  IoSearchOutline,
+} from "react-icons/io5";
+import { twMerge } from "tailwind-merge";
+
+import { Field, FieldProps } from "./Field";
+
+export type SelectOption = {
+  value: string;
+  label: React.ReactNode;
+  selectedLabel?: React.ReactNode;
+  disabled?: boolean;
+};
+
+type SelectFieldProps = FieldProps & {
+  required?: boolean;
+  placeholder?: string;
+  noOptionsMessage?: string;
+  options: SelectOption[];
+  searchable?: boolean;
+  listboxClassName?: string;
+  dropdownClassName?: string;
+  searchValue?: string;
+  onChangeSearchValue?: (value: string) => void;
+  onOptionSelected?: (option: SelectOption) => void;
+};
+
+export const SelectField = ({
+  name,
+  label,
+  className,
+  labelClassName,
+  childrenWrapperClassName,
+  hideErrorMessage = false,
+
+  required,
+  placeholder,
+  noOptionsMessage,
+  options,
+  searchable,
+  searchValue = "",
+  onChangeSearchValue,
+  onOptionSelected,
+  listboxClassName,
+  dropdownClassName,
+}: SelectFieldProps) => {
+  const at = useTranslations("App");
+  const form = useFormContext();
+
+  // We need to keep track of the selected option to be able to continue to
+  // display it when the user searches for something else
+  const curOption = useRef<SelectOption | null>(null);
+
+  return (
+    <Field
+      {...{
+        name,
+        label,
+        required,
+        className,
+        labelClassName,
+        childrenWrapperClassName,
+        hideErrorMessage,
+      }}
+    >
+      <div className="flex w-full flex-col">
+        <Controller
+          control={form.control}
+          name={name}
+          render={({ field: { onChange, value, name } }) => {
+            const selectedOption =
+              curOption.current?.value === value
+                ? curOption.current
+                : options.find((option) => option.value === value);
+
+            return (
+              <Listbox
+                value={value ?? null}
+                name={name}
+                onChange={(value) => {
+                  curOption.current =
+                    options.find((option) => option.value === value) ?? null;
+                  onChangeSearchValue?.("");
+                  onChange(value);
+                  onOptionSelected?.(curOption.current!);
+                }}
+              >
+                {({ open }) => (
+                  <div className="relative w-full">
+                    <Listbox.Button
+                      className={twMerge(
+                        "group flex w-full items-center justify-between rounded-lg border p-3 text-sm",
+                        "border-gray-300 bg-gray-50  text-gray-900 shadow-sm focus-within:border-primary-500 focus-within:ring-primary-500",
+                        "dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500",
+                        listboxClassName,
+                      )}
+                    >
+                      <span className="block truncate pr-2 text-gray-900 dark:text-white">
+                        {selectedOption?.selectedLabel ??
+                          selectedOption?.label ??
+                          placeholder ??
+                          at("selectPlaceholder")}
+                      </span>
+                      <span className="pointer-events-none flex items-center pr-2">
+                        <IoChevronDown
+                          className="h-3 w-3 text-gray-900 dark:text-white"
+                          aria-hidden="true"
+                        />
+                      </span>
+                    </Listbox.Button>
+
+                    <Transition
+                      as={Fragment}
+                      show={open}
+                      leave="transition ease-in duration-200"
+                      leaveFrom="opacity-100"
+                      leaveTo="opacity-0"
+                    >
+                      <div
+                        className={twMerge(
+                          "absolute z-10 mt-1 flex w-full flex-col overflow-y-hidden rounded border py-3 text-white focus:outline-none [&>ul]:outline-none",
+                          "border-gray-300 bg-gray-50  text-gray-900",
+                          "dark:border-gray-600 dark:bg-gray-700 dark:text-white",
+
+                          dropdownClassName,
+                        )}
+                      >
+                        <Listbox.Options className="flex max-h-[180px] flex-1 flex-col justify-stretch">
+                          {searchable && (
+                            <div className="mx-3 mb-4 flex h-[40px] w-auto flex-1 items-center justify-between rounded border px-4 dark:border-neutral-500 dark:bg-neutral-600 focus-within:dark:border-neutral-200">
+                              <IoSearchOutline
+                                width="16px"
+                                className="h-4 w-4 flex-shrink-0 text-gray-900 dark:text-white"
+                              />
+                              <input
+                                className="w-full flex-1 border-none bg-transparent ring-0 focus:outline-none focus:ring-0 focus:ring-offset-0"
+                                value={searchValue}
+                                onChange={
+                                  onChangeSearchValue
+                                    ? (e) => onChangeSearchValue(e.target.value)
+                                    : undefined
+                                }
+                                placeholder={at("searchPlaceholder")}
+                                type="search"
+                              />
+                              {searchValue.trim() !== "" && (
+                                <button
+                                  className="flex h-4 w-4 flex-shrink-0 items-center justify-center"
+                                  type="button"
+                                  onClick={() => onChangeSearchValue?.("")}
+                                >
+                                  <IoCloseOutline className="h-4 w-4 text-gray-900 transition-all duration-200 dark:text-white" />
+                                </button>
+                              )}
+                            </div>
+                          )}
+
+                          {options.length === 0 ? (
+                            <div className="w-full text-center">
+                              {noOptionsMessage ?? at("noOptionsMessage")}
+                            </div>
+                          ) : (
+                            <div className="flex-1 overflow-scroll">
+                              {options.map((option) => (
+                                <Listbox.Option
+                                  key={option.value}
+                                  value={option.value}
+                                  disabled={option.disabled}
+                                  className={twMerge(
+                                    "w-full px-3 py-2 text-left",
+                                    !option.disabled &&
+                                      "hover:bg-primary-500 hover:text-white",
+                                    option.disabled && "opacity-50",
+                                  )}
+                                >
+                                  {option.label}
+                                </Listbox.Option>
+                              ))}
+                            </div>
+                          )}
+                        </Listbox.Options>
+                      </div>
+                    </Transition>
+                  </div>
+                )}
+              </Listbox>
+            );
+          }}
+        />
+      </div>
+    </Field>
+  );
+};

app/[lang]/components/form/SwitchField.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+
+import { Switch, SwitchProps } from "@headlessui/react";
+import { Controller, useFormContext } from "react-hook-form";
+import { twMerge } from "tailwind-merge";
+
+import { Field, FieldProps } from "./Field";
+
+export const SwitchField = (props: FieldProps & SwitchProps<"button">) => {
+  const {
+    name,
+    label,
+    disabled,
+    className,
+    labelClassName,
+
+    childrenWrapperClassName,
+    hideErrorMessage,
+
+    ...rest
+  } = props;
+  const form = useFormContext();
+
+  return (
+    <Field
+      {...{
+        name,
+        type: "checkbox",
+        label,
+        disabled,
+        className,
+        labelClassName,
+      }}
+    >
+      <div className="flex w-full flex-col">
+        <Controller
+          control={form.control}
+          name={name}
+          render={({ field }) => (
+            <div className="flex h-[40px] items-center">
+              <Switch
+                checked={field.value}
+                onChange={field.onChange}
+                className={twMerge(
+                  "relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none",
+                  "ui-not-checked:bg-neutral-300 ui-not-checked:hover:bg-neutral-400",
+                  "ui-not-checked:dark:bg-neutral-500 ui-not-checked:dark:hover:bg-neutral-600",
+                  "ui-checked:bg-primary-500 ui-checked:hover:bg-primary-600",
+                )}
+                {...rest}
+              >
+                <span className="ui-checked:translate-x-[19px] ui-not-checked:translate-x-[3px] inline-block h-[14px] w-[14px] transform rounded-full bg-white transition-transform" />
+              </Switch>
+            </div>
+          )}
+        />
+      </div>
+    </Field>
+  );
+};

app/[lang]/components/form/TextAreaField.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+
+import { get } from "lodash";
+import { Controller, useFormContext } from "react-hook-form";
+import { twMerge } from "tailwind-merge";
+
+import { Field, FieldProps } from "./Field";
+
+export const TextAreaField = (
+  props: FieldProps &
+    React.HTMLProps<HTMLTextAreaElement> & {
+      handleChanged?: (props: { name: string }) => void;
+      startIcon?: React.ReactNode;
+    },
+) => {
+  const {
+    name,
+    label,
+    required,
+    disabled,
+    className,
+    labelClassName,
+    childrenWrapperClassName,
+    hideErrorMessage = false,
+
+    startIcon,
+    handleChanged,
+
+    ...rest
+  } = props;
+  const form = useFormContext();
+
+  const {
+    formState: { errors },
+  } = form;
+
+  const hasError = !!get(errors, name)?.message;
+
+  return (
+    <Field
+      {...{
+        name,
+        label,
+        required,
+        className,
+        labelClassName,
+        childrenWrapperClassName,
+        hideErrorMessage,
+      }}
+    >
+      <div className="flex w-full flex-col">
+        <Controller
+          control={form.control}
+          name={name}
+          render={({ field }) => (
+            <div className="relative">
+              {startIcon && (
+                <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+                  {startIcon}
+                </div>
+              )}
+              <textarea
+                {...form.register(name, {
+                  required,
+                })}
+                aria-required={required}
+                aria-invalid={hasError}
+                disabled={disabled}
+                className={twMerge(
+                  "flex w-full content-center rounded-lg border p-3 text-sm",
+                  "border-gray-300 bg-gray-50  text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500",
+                  "dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500",
+                  hasError && "!border-orange-700 focus:!border-orange-700",
+                  disabled && "dark:bg-gray-50",
+                )}
+                {...rest}
+                onChange={(e) => {
+                  field.onChange(e);
+                }}
+                value={field.value}
+              />
+            </div>
+          )}
+        />
+      </div>
+    </Field>
+  );
+};

app/[lang]/components/form/TextField.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+
+import { get } from "lodash";
+import { Controller, useFormContext } from "react-hook-form";
+import { twMerge } from "tailwind-merge";
+
+import { Field, FieldProps } from "./Field";
+
+export const TextField = (
+  props: FieldProps &
+    React.HTMLProps<HTMLInputElement> & {
+      handleChanged?: (props: { name: string }) => void;
+      startIcon?: React.ReactNode;
+    },
+) => {
+  const {
+    name,
+    type = "text",
+    label,
+    required,
+    disabled,
+    className,
+    labelClassName,
+    childrenWrapperClassName,
+    hideErrorMessage = false,
+
+    startIcon,
+    handleChanged,
+
+    ...rest
+  } = props;
+  const form = useFormContext();
+
+  const {
+    formState: { errors },
+  } = form;
+
+  const hasError = !!get(errors, name)?.message;
+
+  const input = (value: string | number) => {
+    return typeof value === "number"
+      ? isNaN(value)
+        ? ""
+        : value.toString()
+      : value ?? "";
+  };
+
+  const output =
+    type === "number"
+      ? (e: React.ChangeEvent<HTMLInputElement>) => {
+          const output = parseFloat(e.target.value);
+          return isNaN(output) ? 0 : output;
+        }
+      : (e: React.ChangeEvent<HTMLInputElement>) => e.target.value;
+
+  return (
+    <Field
+      {...{
+        name,
+        label,
+        required,
+        className,
+        labelClassName,
+        childrenWrapperClassName,
+        hideErrorMessage,
+      }}
+    >
+      <div className="flex w-full flex-col">
+        <Controller
+          control={form.control}
+          name={name}
+          render={({ field }) => (
+            <div className="relative">
+              {startIcon && (
+                <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+                  {startIcon}
+                </div>
+              )}
+              <input
+                type={type}
+                {...form.register(name, {
+                  valueAsNumber: type === "number",
+                  required,
+                })}
+                aria-required={required}
+                aria-invalid={hasError}
+                disabled={disabled}
+                className={twMerge(
+                  "flex w-full content-center rounded-lg border p-3 text-sm",
+                  "border-gray-300 bg-gray-50  text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500",
+                  "dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500",
+                  hasError && "!border-orange-700 focus:!border-orange-700",
+                  disabled && "dark:bg-gray-50",
+                  startIcon && "pl-10",
+                )}
+                {...rest}
+                onChange={(e) => {
+                  field.onChange(output(e));
+                }}
+                value={input(field.value)}
+                onBlur={() => {
+                  if (handleChanged) handleChanged({ name });
+                }}
+              />
+            </div>
+          )}
+        />
+      </div>
+    </Field>
+  );
+};

app/[lang]/providers/TrpcProvider.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { getFetch, httpBatchLink, loggerLink } from "@trpc/client";
+import superjson from "superjson";
+
+import { trpc } from "@/utils/trpc";
+
+export const TrpcProvider = ({ children }: { children: React.ReactNode }) => {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: { queries: { staleTime: 5000 } },
+      }),
+  );
+
+  const url = "/api/trpc";
+
+  const [trpcClient] = useState(() =>
+    trpc.createClient({
+      links: [
+        loggerLink({
+          enabled: () => true,
+        }),
+        httpBatchLink({
+          url,
+          fetch: async (input, init?) => {
+            const fetch = getFetch();
+            return fetch(input, {
+              ...init,
+              credentials: "include",
+            });
+          },
+        }),
+      ],
+      transformer: superjson,
+    }),
+  );
+
+  return (
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </trpc.Provider>
+  );
+};

app/[lang]/providers/index.tsx

@@ -4,7 +4,13 @@ import { Provider } from "jotai";
 
 import { useDynamicViewportUnits } from "@/hooks/useDynamicViewportUnits";
 
+import { TrpcProvider } from "./TrpcProvider";
+
 export default function Providers({ children }: { children: React.ReactNode }) {
   useDynamicViewportUnits();
-  return <Provider>{children}</Provider>;
+  return (
+    <Provider>
+      <TrpcProvider>{children}</TrpcProvider>
+    </Provider>
+  );
 }

app/[lang]/tournois/Legend.tsx

@@ -10,7 +10,7 @@ import { TimeControlColours } from "@/app/constants";
 import { TimeControl } from "@/types";
 
 const Legend = () => {
-  const t = useTranslations("Tournaments");
+  const at = useTranslations("App");
   const map = useMap();
   const tournaments = useAtomValue(filteredTournamentsByTimeControlAtom);
 
@@ -45,7 +45,7 @@ const Legend = () => {
                   <li>
                     <span class="block h-4 w-7 border border-[#999] float-left mr-1" style="background: ${
                       TimeControlColours[tc]
-                    }"></span>${t("timeControlEnum", { tc })}
+                    }"></span>${at("timeControlEnum", { tc })}
                   </li>
                 `,
               )
@@ -56,7 +56,7 @@ const Legend = () => {
 
       legend.addTo(map);
     }
-  }, [map, t]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [map, at]); // eslint-disable-line react-hooks/exhaustive-deps
   return null;
 };
 

app/[lang]/tournois/TimeControlFilters.tsx

@@ -11,7 +11,7 @@ import {
 import { TimeControl } from "@/types";
 
 const TimeControlFilters = () => {
-  const t = useTranslations("Tournaments");
+  const at = useTranslations("App");
   const tournaments = useAtomValue(tournamentsAtom);
 
   const classic = useAtom(classicAtom);
@@ -37,7 +37,7 @@ const TimeControlFilters = () => {
               checked={atom[0]}
               onChange={() => atom[1](!atom[0])}
             />
-            {t("timeControlEnum", { tc })}
+            {at("timeControlEnum", { tc })}
           </label>
         </div>
       ))}

app/[lang]/tournois/TournamentTable.tsx

@@ -25,6 +25,7 @@ import TimeControlFilters from "./TimeControlFilters";
 
 export default function TournamentTable() {
   const t = useTranslations("Tournaments");
+  const at = useTranslations("App");
 
   const filteredTournaments = useAtomValue(filteredTournamentsListAtom);
   const [syncVisible, setSyncVisible] = useAtom(syncVisibleAtom);
@@ -150,7 +151,7 @@ export default function TournamentTable() {
                     </span>
                   </td>
                   <td className="px-1 py-2 sm:px-3 sm:py-3 lg:px-3 lg:py-3">
-                    {t("timeControlEnum", { tc: tournament.timeControl })}
+                    {at("timeControlEnum", { tc: tournament.timeControl })}
                   </td>
                   <td className="px-1 py-2 sm:px-3 sm:py-3 lg:px-3 lg:py-3">
                     <a href={tournament.url} target="_blank">

app/[lang]/tournois/page.tsx

@@ -1,8 +1,8 @@
 import { differenceInDays, isSameDay, parse } from "date-fns";
 import { groupBy } from "lodash";
-import { ObjectId } from "mongodb";
 
 import clientPromise from "@/lib/mongodb";
+import { TournamentData } from "@/types";
 import { TimeControl, Tournament } from "@/types";
 import { errorLog } from "@/utils/logger";
 
@@ -10,19 +10,6 @@ import TournamentsDisplay from "./TournamentsDisplay";
 
 export const revalidate = 3600; // Revalidate cache every 6 hours
 
-export interface TournamentData {
-  _id: ObjectId;
-  town: string;
-  department: string;
-  tournament: string;
-  url: string;
-  time_control: "Cadence Lente" | "Rapide" | "Blitz" | string;
-  norm_tournament: boolean;
-  date: string;
-  coordinates: [number, number];
-  pending: boolean;
-}
-
 const tcMap: Record<TournamentData["time_control"], TimeControl> = {
   "Cadence Lente": TimeControl.Classic,
   Rapide: TimeControl.Rapid,

app/api/add-tournament/route.ts

@@ -1,54 +0,0 @@
-import { NextResponse } from "next/server";
-
-import clientPromise from "@/lib/mongodb";
-import { errorLog } from "@/utils/logger";
-
-export async function POST(req: Request) {
-  const {
-    address,
-    town,
-    department,
-    tournament,
-    url,
-    time_control,
-    norm_tournament,
-    date,
-    coordinates,
-    country,
-  } = await req.json();
-
-  try {
-    const client = await clientPromise;
-    const db = client.db("tournamentsFranceDB").collection("tournaments");
-
-    const tournamentData = {
-      address,
-      town,
-      department,
-      tournament,
-      url,
-      time_control,
-      norm_tournament,
-      date,
-      coordinates,
-      country,
-      entry_method: "manual",
-      pending: true,
-    };
-
-    const result = await db.insertOne(tournamentData);
-
-    if (result.insertedId) {
-      return new NextResponse(
-        JSON.stringify({ success: "Tournament added to DB as pending" }),
-        { status: 201, headers: { "Content-Type": "application/json" } },
-      );
-    }
-  } catch (error) {
-    errorLog(error);
-    return new NextResponse(
-      JSON.stringify({ error: "Failed to insert tournament data" }),
-      { status: 500, headers: { "Content-Type": "application/json" } },
-    );
-  }
-}

app/api/send-discord-notification/route.ts

@@ -1,34 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-
-export async function POST(req: NextRequest) {
-  const webhookURL = process.env.DISCORD_WEBHOOK_URL;
-  const { embeds } = await req.json();
-
-  if (!webhookURL) {
-    return NextResponse.json(
-      { error: `Discord webhook URL not found` },
-      { status: 404 },
-    );
-  }
-
-  try {
-    const webhookBody = {
-      embeds: embeds,
-    };
-
-    const webhookInfo = await fetch(webhookURL, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(webhookBody),
-    });
-
-    return NextResponse.json(
-      { success: `Message delivered to ${webhookInfo}` },
-      { status: 200 },
-    );
-  } catch (error) {
-    return NextResponse.json({ error: `Connection refused` }, { status: 404 });
-  }
-}

app/api/trpc/[trpc]/route.ts

@@ -0,0 +1,21 @@
+import {
+  FetchCreateContextFnOptions,
+  fetchRequestHandler,
+} from "@trpc/server/adapters/fetch";
+
+import { appRouter } from "@/app/server/appRouter";
+
+const handler = (request: Request) => {
+  return fetchRequestHandler({
+    endpoint: "/api/trpc",
+    req: request,
+    router: appRouter,
+    createContext: function (
+      opts: FetchCreateContextFnOptions,
+    ): object | Promise<object> {
+      return {};
+    },
+  });
+};
+
+export { handler as GET, handler as POST };

app/server/appRouter.ts

@@ -0,0 +1,8 @@
+import { addTournament } from "./procedures/addTournament";
+import { router } from "./trpc";
+
+export const appRouter = router({
+  addTournament,
+});
+
+export type AppRouter = typeof appRouter;

app/server/procedures/addTournament.ts

@@ -0,0 +1,75 @@
+import { format } from "date-fns";
+
+import clientPromise from "@/lib/mongodb";
+import { addTournamentSchema } from "@/schemas";
+import { TournamentData } from "@/types";
+import { TimeControl } from "@/types";
+import { errorLog } from "@/utils/logger";
+
+import { publicProcedure } from "../trpc";
+
+const tcMap: Record<TimeControl, TournamentData["time_control"]> = {
+  [TimeControl.Classic]: "Cadence Lente",
+  [TimeControl.Rapid]: "Rapide",
+  [TimeControl.Blitz]: "Blitz",
+  [TimeControl.Other]: "Other",
+};
+
+export const addTournament = publicProcedure
+  .input(addTournamentSchema)
+  .mutation(async ({ input }) => {
+    try {
+      const client = await clientPromise;
+      const db = client.db("tournamentsFranceDB").collection("tournaments");
+
+      const { name, email, message, tournament } = input;
+
+      const tournamentData: Omit<TournamentData, "_id"> = {
+        ...tournament,
+        date: format(tournament.date, "dd/MM/yyyy"),
+        time_control: tcMap[tournament.time_control],
+        coordinates: tournament.coordinates as [number, number],
+        entry_method: "manual",
+        pending: true,
+      };
+
+      const result = await db.insertOne(tournamentData);
+
+      if (result.insertedId) {
+        const { tournament, country, date, time_control } = tournamentData;
+
+        if (typeof process.env.DISCORD_WEBHOOK_URL === "string") {
+          await fetch(process.env.DISCORD_WEBHOOK_URL as string, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              embeds: [
+                {
+                  title: "Tournament Submitted",
+                  fields: [
+                    { name: "Tournament", value: tournament },
+                    { name: "Country", value: country },
+                    { name: "Date", value: date },
+                    {
+                      name: "Time Control",
+                      value: time_control,
+                    },
+                    { name: "Sender", value: name },
+                    { name: "Sender Email", value: email },
+                    { name: "Message", value: message ?? "" },
+                  ],
+                },
+              ],
+            }),
+          });
+        }
+
+        return true;
+      }
+    } catch (error) {
+      errorLog(error);
+      throw error;
+    }
+  });

app/server/trpc.ts

@@ -0,0 +1,11 @@
+import { initTRPC } from "@trpc/server";
+import superjson from "superjson";
+import { z } from "zod";
+
+const t = initTRPC.create({
+  transformer: superjson,
+});
+
+// Base router and procedure helpers
+export const router = t.router;
+export const publicProcedure = t.procedure;

css/globals.css

@@ -48,8 +48,62 @@ input[type="search"]::-webkit-search-results-decoration {
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
   -webkit-appearance: none;
-  margin: 0
+  margin: 0;
 }
-input[type=number] {
+input[type="number"] {
   -moz-appearance: textfield;
 }
+
+/* react-date-picker styles */
+
+.react-datepicker__header--custom {
+  background-color: inherit;
+  border-bottom: none;
+}
+.react-datepicker__header {
+  padding: 8px 0 0px;
+  position: relative;
+  text-align: center;
+}
+.react-datepicker__day {
+  cursor: default;
+}
+.react-datepicker__week,
+.react-datepicker__day-names {
+  display: flex;
+}
+.react-datepicker__day,
+.react-datepicker__day-name,
+.react-datepicker__time-name {
+  display: inline-block;
+  line-height: 1.7rem;
+  margin: 0.166rem;
+  text-align: center;
+}
+.react-datepicker__month {
+  margin: 0.4rem;
+  text-align: center;
+}
+
+.react-datepicker__day-names,
+.react-datepicker__week {
+  white-space: nowrap;
+}
+
+.react-datepicker__aria-live {
+  order: 0;
+  -webkit-clip-path: circle(0);
+  clip-path: circle(0);
+  height: 0px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 0px;
+}
+.react-datepicker-popper[data-placement^="bottom"] {
+  padding-top: 10px;
+}
+.no-calendar::-webkit-calendar-picker-indicator {
+  display: none;
+}

handlers/formHandlers.ts

@@ -1,56 +1,12 @@
 import { Dispatch, FormEvent, SetStateAction } from "react";
 
-import { LatLngLiteral } from "leaflet";
 import { useTranslations } from "next-intl";
 
 import { clearMessage } from "@/app/[lang]/components/InfoMessage";
-import discordWebhook from "@/lib/discordWebhook";
 import sendMail from "@/lib/sendMail";
-import tournamentFormToDB from "@/lib/tournamentFormToDB";
+import { ResponseMessage } from "@/types";
-import { ResponseMessage, TournamentFormProps } from "@/types";
 import { errorLog } from "@/utils/logger";
 
-export const handleClearTournamentForm = (
-  formRefs: TournamentFormProps,
-  center: LatLngLiteral,
-) => {
-  Object.values(formRefs).forEach((ref) => {
-    if (ref.current) ref.current.value = "";
-  });
-  formRefs.setPosition(center);
-};
-
-export const handleTournamentSubmit = async (
-  e: FormEvent<HTMLFormElement>,
-  t: ReturnType<typeof useTranslations>,
-  setIsSending: Dispatch<SetStateAction<boolean>>,
-  setResponseMessage: Dispatch<SetStateAction<ResponseMessage>>,
-  formRefs: TournamentFormProps,
-) => {
-  e.preventDefault();
-  setIsSending(true);
-
-  try {
-    await discordWebhook(formRefs); // send Discord notification
-    await tournamentFormToDB(formRefs); // write to DB
-    setIsSending(false);
-    setResponseMessage({
-      isSuccessful: true,
-      message: t("success"),
-    });
-    clearMessage(setResponseMessage);
-  } catch (error) {
-    errorLog(error);
-    setResponseMessage({
-      isSuccessful: false,
-      message: t("failure"),
-    });
-    clearMessage(setResponseMessage);
-  } finally {
-    setIsSending(false);
-  }
-};
-
 export const handleEmailSubmit = async (
   e: FormEvent<HTMLFormElement>,
   t: ReturnType<typeof useTranslations>,

hooks/useTournamentForm.ts

@@ -1,44 +0,0 @@
-import { useRef, useState } from "react";
-
-import { useAtomValue } from "jotai";
-import { LatLngLiteral } from "leaflet";
-
-import { franceCenterAtom } from "@/app/atoms";
-import { TournamentFormProps } from "@/types";
-
-export const useTournamentForm = (): TournamentFormProps => {
-  const center = useAtomValue(franceCenterAtom);
-
-  const tournamentNameRef = useRef(null);
-  const dateRef = useRef(null);
-  const urlRef = useRef(null);
-  const timeControlRef = useRef(null);
-  const normRef = useRef(null);
-  const addressRef = useRef(null);
-  const townRef = useRef(null);
-  const departmentRef = useRef(null);
-  const countryRef = useRef(null);
-  const yourNameRef = useRef(null);
-  const yourEmailRef = useRef(null);
-  const messageRef = useRef(null);
-  const [position, setPosition] = useState<LatLngLiteral>(center);
-
-  return {
-    tournamentNameRef,
-    dateRef,
-    urlRef,
-    timeControlRef,
-    normRef,
-    addressRef,
-    townRef,
-    departmentRef,
-    countryRef,
-    yourNameRef,
-    yourEmailRef,
-    messageRef,
-    position,
-    setPosition,
-  };
-};
-
-export default useTournamentForm;

lib/discordWebhook.ts

@@ -1,42 +0,0 @@
-import { TournamentFormProps } from "@/types";
-import formatDate from "@/utils/formatDate";
-
-const discordWebhook = async ({
-  tournamentNameRef,
-  countryRef,
-  dateRef,
-  timeControlRef,
-  yourNameRef,
-  yourEmailRef,
-  messageRef,
-}: TournamentFormProps) => {
-  const webhookBody = {
-    embeds: [
-      {
-        title: "Tournament Submitted",
-        fields: [
-          { name: "Tournament", value: tournamentNameRef.current?.value },
-          { name: "Country", value: countryRef.current?.value },
-          { name: "Date", value: formatDate(dateRef.current?.value) },
-          {
-            name: "Time Control",
-            value: timeControlRef.current?.value,
-          },
-          { name: "Sender", value: yourNameRef.current?.value },
-          { name: "Sender Email", value: yourEmailRef.current?.value },
-          { name: "Message", value: messageRef.current?.value },
-        ],
-      },
-    ],
-  };
-
-  return await fetch("/api/send-discord-notification", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify(webhookBody),
-  });
-};
-
-export default discordWebhook;

lib/tournamentFormToDB.ts

@@ -1,29 +0,0 @@
-import { LatLngLiteral } from "leaflet";
-
-import { TournamentFormProps } from "@/types";
-import formatDate from "@/utils/formatDate";
-
-const tournamentFormToDB = async (formRefs: TournamentFormProps) => {
-  const data = {
-    address: formRefs.addressRef.current?.value,
-    town: formRefs.townRef.current?.value.toUpperCase(),
-    department: formRefs.departmentRef.current?.value,
-    tournament: formRefs.tournamentNameRef.current?.value,
-    url: formRefs.urlRef.current?.value,
-    time_control: formRefs.timeControlRef.current?.value,
-    date: formatDate(formRefs.dateRef.current?.value),
-    coordinates: [formRefs.position.lat, formRefs.position.lng],
-    country: formRefs.countryRef.current?.value,
-    norm_tournament: formRefs.normRef.current?.value,
-  };
-
-  return await fetch("/api/add-tournament", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify(data),
-  });
-};
-
-export default tournamentFormToDB;

messages/en.json

@@ -5,6 +5,17 @@
     "keywords": "chess, France, tournament, tournaments, FFE, map, norm, norms"
   },
 
+  "App": {
+    "shortDate": "{date, date, ::dd/MM/yyyy}",
+    "datePlaceholder": "DD/MM/YYYY",
+    "dateParseFormat": "dd/MM/yyyy",
+    "dateMask": "99/99/9999",
+    "selectPlaceholder": "Select...",
+    "searchPlaceholder": "Search...",
+    "noOptionsMessage": "No options found",
+    "timeControlEnum": "{tc, select, Classic {Classic} Rapid {Rapid} Blitz {Blitz} Other {Other} other {{tc}}}"
+  },
+
   "Nav": {
     "title": "Échecs France",
     "tournaments": "Tournaments",
@@ -17,6 +28,11 @@
     "contactAria": "Contact Us"
   },
 
+  "FormValidation": {
+    "required": "Required",
+    "url": "Invalid URL"
+  },
+
   "Home": {
     "title": "Échecs France",
     "purpose": "Find chess tournaments, in France, on a map",
@@ -35,9 +51,8 @@
     "town": "Town",
     "tournament": "Tournament",
     "timeControl": "Time Control",
-    "approx": "Geolocation is approximative",
+    "approx": "Geo-location is approximative",
     "norm": "Norm Tournament",
-    "timeControlEnum": "{tc, select, Classic {Classic} Rapid {Rapid} Blitz {Blitz} Other {Other} other {{tc}}}",
     "clearButton": "Clear"
   },
 
@@ -78,10 +93,6 @@
     "urlLabel": "URL",
     "urlPlaceholder": "www.example.com",
     "tcLabel": "Time Control",
-    "tcOption1": "Classical",
-    "tcOption2": "Rapid",
-    "tcOption3": "Blitz",
-    "tcOption4": "Other",
     "normLabel": "Norm Tournament?",
     "normNo": "No",
     "normYes": "Yes",
@@ -95,6 +106,8 @@
     "postcodePlaceholder": "Postcode",
     "countryLabel": "Country",
     "countryPlaceholder": "Country",
+    "latLabel": "Latitude",
+    "lngLabel": "Longitude",
     "yourNameLabel": "Your Name",
     "yourNamePlaceholder": "Your Name",
     "yourEmailLabel": "Your Email",
@@ -106,10 +119,5 @@
     "clearForm": "Clear Form",
     "success": "Thank you for your message.",
     "failure": "Sorry, something went wrong.  Please try again."
-  },
-
-  "Map": {
-    "latLabel": "Latitude",
-    "lngLabel": "Longitude"
   }
 }

messages/fr.json

@@ -5,6 +5,17 @@
     "keywords": "echecs, echec, France, tournoi, tournois, FFE, carte, norme, normes"
   },
 
+  "App": {
+    "shortDate": "{date, date, ::dd/MM/yyyy}",
+    "datePlaceholder": "DD/MM/YYYY",
+    "dateParseFormat": "dd/MM/yyyy",
+    "dateMask": "99/99/9999",
+    "selectPlaceholder": "Choisir...",
+    "searchPlaceholder": "Rechercher...",
+    "noOptionsMessage": "Pas d'options",
+    "timeControlEnum": "{tc, select, Classic {Cadence Lente} Rapid {Rapide} Blitz {Blitz} Other {Autres} other {{tc}}}"
+  },
+
   "Nav": {
     "title": "Échecs France",
     "tournaments": "Tournois",
@@ -17,6 +28,11 @@
     "contactAria": "Contactez-nous"
   },
 
+  "FormValidation": {
+    "required": "Requis",
+    "url": "L'URL n'est pas valide"
+  },
+
   "Home": {
     "title": "Échecs France",
     "purpose": "Trouvez vos tournois d'échecs en france sur une carte",
@@ -37,7 +53,6 @@
     "timeControl": "Cadence",
     "approx": "Géolocalisation approximative",
     "norm": "Tournoi à norme",
-    "timeControlEnum": "{tc, select, Classic {Cadence Lente} Rapid {Rapide} Blitz {Blitz} Other {Autres} other {{tc}}}",
     "clearButton": "Effacer"
   },
 
@@ -80,10 +95,8 @@
     "urlPlaceholder": "www.example.com",
     "tcLabel": "Cadence",
     "tcOption1": "Cadence Lente",
-    "tcOption2": "Rapide",
+
-    "tcOption3": "Blitz",
+    "normLabel": "Tournoi à norme\u00a0?",
-    "tcOption4": "Autres",
-    "normLabel": "Tournoi à norme ?",
     "normNo": "Non",
     "normYes": "Oui",
     "addressLabel": "Adresse",
@@ -96,6 +109,8 @@
     "postcodePlaceholder": "Code Postal",
     "countryLabel": "Pays",
     "countryPlaceholder": "Pays",
+    "latLabel": "Latitude",
+    "lngLabel": "Longitude",
     "yourNameLabel": "Votre Nom",
     "yourNamePlaceholder": "Votre Nom",
     "yourEmailLabel": "Votre adresse mail",
@@ -107,10 +122,5 @@
     "clearForm": "Réinitialiser",
     "success": "Merci pour votre message.",
     "failure": "Oops, quelque chose ne va pas. Veuillez réessayer SVP."
-  },
-
-  "Map": {
-    "latLabel": "Latitude",
-    "lngLabel": "Longitude"
   }
 }

package-lock.json

@@ -8,9 +8,16 @@
       "name": "client",
       "version": "0.1.0",
       "dependencies": {
+        "@headlessui/react": "^1.7.17",
+        "@headlessui/tailwindcss": "^0.2.0",
+        "@hookform/resolvers": "^3.3.1",
         "@kodingdotninja/use-tailwind-breakpoint": "^0.0.5",
         "@next/bundle-analyzer": "^13.4.12",
+        "@tanstack/react-query": "^4.35.0",
         "@trivago/prettier-plugin-sort-imports": "^4.2.0",
+        "@trpc/client": "^10.38.1",
+        "@trpc/react-query": "^10.38.1",
+        "@trpc/server": "^10.38.1",
         "@types/node": "20.5.1",
         "@types/react": "18.2.21",
         "@types/react-dom": "18.2.7",
@@ -29,12 +36,16 @@
         "nodemailer": "^6.9.4",
         "postcss": "8.4.28",
         "react": "^18.2.0",
+        "react-datepicker": "^4.17.0",
         "react-dom": "^18.2.0",
+        "react-hook-form": "^7.46.1",
         "react-icons": "^4.10.1",
+        "react-input-mask": "^2.0.4",
         "react-leaflet": "^4.2.1",
         "react-leaflet-cluster": "^2.1.0",
         "react-tooltip": "^5.18.0",
         "sharp": "^0.32.3",
+        "superjson": "^1.13.1",
         "tailwind-merge": "^1.14.0",
         "tailwindcss": "3.3.3",
         "typescript": "5.2.2"
@@ -48,6 +59,8 @@
         "@types/leaflet.markercluster": "^1.5.1",
         "@types/lodash": "^4.14.195",
         "@types/nodemailer": "^6.4.8",
+        "@types/react-datepicker": "^4.15.0",
+        "@types/react-input-mask": "^3.0.2",
         "eslint": "8.48.0",
         "eslint-config-next": "^13.4.12",
         "eslint-config-prettier": "^9.0.0",
@@ -588,6 +601,40 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@headlessui/react": {
+      "version": "1.7.17",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.17.tgz",
+      "integrity": "sha512-4am+tzvkqDSSgiwrsEpGWqgGo9dz8qU5M3znCkC4PgkpY4HcCZzEDEvozltGGGHIKl9jbXbZPSH5TWn4sWJdow==",
+      "dependencies": {
+        "client-only": "^0.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
+    "node_modules/@headlessui/tailwindcss": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@headlessui/tailwindcss/-/tailwindcss-0.2.0.tgz",
+      "integrity": "sha512-fpL830Fln1SykOCboExsWr3JIVeQKieLJ3XytLe/tt1A0XzqUthOftDmjcCYLW62w7mQI7wXcoPXr3tZ9QfGxw==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "tailwindcss": "^3.0"
+      }
+    },
+    "node_modules/@hookform/resolvers": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.3.1.tgz",
+      "integrity": "sha512-K7KCKRKjymxIB90nHDQ7b9nli474ru99ZbqxiqDAWYsYhOsU3/4qLxW91y+1n04ic13ajjZ66L3aXbNef8PELQ==",
+      "peerDependencies": {
+        "react-hook-form": "^7.0.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
@@ -905,6 +952,15 @@
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
       "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g=="
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@react-leaflet/core": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz",
@@ -947,6 +1003,41 @@
         "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "4.35.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.35.0.tgz",
+      "integrity": "sha512-4GMcKQuLZQi6RFBiBZNsLhl+hQGYScRZ5ZoVq8QAzfqz9M7vcGin/2YdSESwl7WaV+Qzsb5CZOAbMBes4lNTnA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "4.35.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.35.0.tgz",
+      "integrity": "sha512-LLYDNnM9ewYHgjm2rzhk4KG/puN2rdoqCUD+N9+V7SwlsYwJk5ypX58rpkoZAhFyZ+KmFUJ7Iv2lIEOoUqydIg==",
+      "dependencies": {
+        "@tanstack/query-core": "4.35.0",
+        "use-sync-external-store": "^1.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-native": "*"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "9.3.1",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.1.tgz",
@@ -1072,6 +1163,40 @@
         }
       }
     },
+    "node_modules/@trpc/client": {
+      "version": "10.38.1",
+      "resolved": "https://registry.npmjs.org/@trpc/client/-/client-10.38.1.tgz",
+      "integrity": "sha512-kY7ZV7Eco5SeFIGJX6OBg7AAKkiMt5+1N+GC7N1lTZszrw95ZiNgtkZ5TI6+Un4O+RqrOcqqast6MeExCoyZhQ==",
+      "funding": [
+        "https://trpc.io/sponsor"
+      ],
+      "peerDependencies": {
+        "@trpc/server": "10.38.1"
+      }
+    },
+    "node_modules/@trpc/react-query": {
+      "version": "10.38.1",
+      "resolved": "https://registry.npmjs.org/@trpc/react-query/-/react-query-10.38.1.tgz",
+      "integrity": "sha512-eNmNYDzfn4Xx5R94v/Z2vmNjsLo/CpgPyRBNARcO7wLwjpzLxRPsJKNfOB92RWB+QsPJxqeBGIS1IETg2yyu7w==",
+      "funding": [
+        "https://trpc.io/sponsor"
+      ],
+      "peerDependencies": {
+        "@tanstack/react-query": "^4.18.0",
+        "@trpc/client": "10.38.1",
+        "@trpc/server": "10.38.1",
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@trpc/server": {
+      "version": "10.38.1",
+      "resolved": "https://registry.npmjs.org/@trpc/server/-/server-10.38.1.tgz",
+      "integrity": "sha512-59mM0Jk3cnWBExSv4Z4cw/776MPwa+rcVNywnV5gyHyK/p5qHtis1b1JPYdTEQZ0zhR+6zeto14rTR51hg+Nuw==",
+      "funding": [
+        "https://trpc.io/sponsor"
+      ]
+    },
     "node_modules/@types/aria-query": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.1.tgz",
@@ -1143,6 +1268,18 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-datepicker": {
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@types/react-datepicker/-/react-datepicker-4.15.0.tgz",
+      "integrity": "sha512-kr10s8ex4+MmCJmzdhA9kfmoMQBmsW5uDYDlH+8f/PgStrp7rRaz23Y/cvTiMgvESVq8ujDh4SOo6jlSwEw13g==",
+      "dev": true,
+      "dependencies": {
+        "@popperjs/core": "^2.9.2",
+        "@types/react": "*",
+        "date-fns": "^2.0.1",
+        "react-popper": "^2.2.5"
+      }
+    },
     "node_modules/@types/react-dom": {
       "version": "18.2.7",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.7.tgz",
@@ -1151,6 +1288,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-input-mask": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/react-input-mask/-/react-input-mask-3.0.2.tgz",
+      "integrity": "sha512-WTli3kUyvUqqaOLYG/so2pLqUvRb+n4qnx2He5klfqZDiQmRyD07jVIt/bco/1BrcErkPMtpOm+bHii4Oed6cQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.16.3",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
@@ -1921,6 +2067,20 @@
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
     },
+    "node_modules/copy-anything": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz",
+      "integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==",
+      "dependencies": {
+        "is-what": "^4.1.8"
+      },
+      "engines": {
+        "node": ">=12.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -3451,6 +3611,14 @@
         "tslib": "^2.1.0"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/ip": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
@@ -3801,6 +3969,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-what": {
+      "version": "4.1.15",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.15.tgz",
+      "integrity": "sha512-uKua1wfy3Yt+YqsD6mTUEa2zSi3G1oPlqTflgaPJ7z63vUGN5pxFpnQfeSLMFnJDEsdvOtkp1rUWkYjB4YfhgA==",
+      "engines": {
+        "node": ">=12.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/is-wsl": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -5046,7 +5225,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -5056,8 +5234,7 @@
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-      "dev": true
     },
     "node_modules/pump": {
       "version": "3.0.0",
@@ -5133,6 +5310,23 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-datepicker": {
+      "version": "4.17.0",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.17.0.tgz",
+      "integrity": "sha512-z50H44XbnkYlns7gVHzHK4jWAzLfvQehh5Lvindb09J97yVJKIbsmHs98D0f77tdZc3dSYM7oAqsFY55dBeOGQ==",
+      "dependencies": {
+        "@popperjs/core": "^2.11.8",
+        "classnames": "^2.2.6",
+        "date-fns": "^2.30.0",
+        "prop-types": "^15.7.2",
+        "react-onclickoutside": "^6.13.0",
+        "react-popper": "^2.3.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17 || ^18",
+        "react-dom": "^16.9.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -5145,6 +5339,26 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+    },
+    "node_modules/react-hook-form": {
+      "version": "7.46.1",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.46.1.tgz",
+      "integrity": "sha512-0GfI31LRTBd5tqbXMGXT1Rdsv3rnvy0FjEk8Gn9/4tp6+s77T7DPZuGEpBRXOauL+NhyGT5iaXzdIM2R6F/E+w==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-icons": {
       "version": "4.10.1",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.10.1.tgz",
@@ -5153,6 +5367,19 @@
         "react": "*"
       }
     },
+    "node_modules/react-input-mask": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz",
+      "integrity": "sha512-1hwzMr/aO9tXfiroiVCx5EtKohKwLk/NT8QlJXHQ4N+yJJFyUuMT+zfTpLBwX/lK3PkuMlievIffncpMZ3HGRQ==",
+      "dependencies": {
+        "invariant": "^2.2.4",
+        "warning": "^4.0.2"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0",
+        "react-dom": ">=0.14.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -5186,6 +5413,33 @@
         "react-leaflet": "^4.0.0"
       }
     },
+    "node_modules/react-onclickoutside": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz",
+      "integrity": "sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md"
+      },
+      "peerDependencies": {
+        "react": "^15.5.x || ^16.x || ^17.x || ^18.x",
+        "react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x"
+      }
+    },
+    "node_modules/react-popper": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
+      "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
+      "dependencies": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.0.0",
+        "react": "^16.8.0 || ^17 || ^18",
+        "react-dom": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-tooltip": {
       "version": "5.19.0",
       "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.19.0.tgz",
@@ -5931,6 +6185,17 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/superjson": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/superjson/-/superjson-1.13.1.tgz",
+      "integrity": "sha512-AVH2eknm9DEd3qvxM4Sq+LTCkSXE2ssfh1t11MHMXyYXFQyQ1HLgVvV+guLTsaQnJU3gnaVo34TohHPulY/wLg==",
+      "dependencies": {
+        "copy-anything": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -6350,11 +6615,27 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",

package.json

@@ -11,9 +11,16 @@
     "format:fix": "prettier --write \"**/*.{js,jsx,ts,tsx}\""
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.17",
+    "@headlessui/tailwindcss": "^0.2.0",
+    "@hookform/resolvers": "^3.3.1",
     "@kodingdotninja/use-tailwind-breakpoint": "^0.0.5",
     "@next/bundle-analyzer": "^13.4.12",
+    "@tanstack/react-query": "^4.35.0",
     "@trivago/prettier-plugin-sort-imports": "^4.2.0",
+    "@trpc/client": "^10.38.1",
+    "@trpc/react-query": "^10.38.1",
+    "@trpc/server": "^10.38.1",
     "@types/node": "20.5.1",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
@@ -32,12 +39,16 @@
     "nodemailer": "^6.9.4",
     "postcss": "8.4.28",
     "react": "^18.2.0",
+    "react-datepicker": "^4.17.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.46.1",
     "react-icons": "^4.10.1",
+    "react-input-mask": "^2.0.4",
     "react-leaflet": "^4.2.1",
     "react-leaflet-cluster": "^2.1.0",
     "react-tooltip": "^5.18.0",
     "sharp": "^0.32.3",
+    "superjson": "^1.13.1",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "3.3.3",
     "typescript": "5.2.2"
@@ -51,6 +62,8 @@
     "@types/leaflet.markercluster": "^1.5.1",
     "@types/lodash": "^4.14.195",
     "@types/nodemailer": "^6.4.8",
+    "@types/react-datepicker": "^4.15.0",
+    "@types/react-input-mask": "^3.0.2",
     "eslint": "8.48.0",
     "eslint-config-next": "^13.4.12",
     "eslint-config-prettier": "^9.0.0",

schemas.ts

@@ -0,0 +1,22 @@
+import { z } from "zod";
+
+import { TimeControl } from "@/types";
+
+export const addTournamentSchema = z.object({
+  name: z.string().min(1, { message: "FormValidation.required" }),
+  email: z.string().email(),
+  message: z.string().optional(),
+
+  tournament: z.object({
+    address: z.string().min(1, { message: "FormValidation.required" }),
+    town: z.string().min(1, { message: "FormValidation.required" }),
+    department: z.string().min(1, { message: "FormValidation.required" }),
+    tournament: z.string().min(1, { message: "FormValidation.required" }),
+    url: z.string().url({ message: "FormValidation.url" }),
+    time_control: z.nativeEnum(TimeControl),
+    norm_tournament: z.boolean(),
+    date: z.date(),
+    coordinates: z.array(z.number()).length(2),
+    country: z.string().min(1, { message: "FormValidation.required" }),
+  }),
+});

tailwind.config.js

@@ -45,5 +45,5 @@ module.exports = {
       },
     },
   },
-  plugins: [require("@tailwindcss/forms")],
+  plugins: [require("@headlessui/tailwindcss"), require("@tailwindcss/forms")],
 };

types.ts

@@ -1,6 +1,22 @@
 import { Dispatch, MutableRefObject, SetStateAction } from "react";
 
 import { LatLngLiteral } from "leaflet";
+import { ObjectId } from "mongodb";
+
+export type TournamentData = {
+  _id: ObjectId;
+  town: string;
+  department: string;
+  country: string;
+  tournament: string;
+  url: string;
+  time_control: "Cadence Lente" | "Rapide" | "Blitz" | string;
+  norm_tournament: boolean;
+  date: string;
+  coordinates: [number, number];
+  entry_method: "manual" | "auto";
+  pending: boolean;
+};
 
 export enum TimeControl {
   Classic = "Classic",
@@ -9,7 +25,7 @@ export enum TimeControl {
   Other = "Other",
 }
 
-export interface Tournament {
+export type Tournament = {
   id: string;
   groupId: string;
   town: string;
@@ -21,34 +37,11 @@ export interface Tournament {
   latLng: LatLngLiteral;
   norm: boolean;
   pending: boolean;
-}
+};
 
-export interface MapProps {
+export type ResponseMessage = {
-  position: LatLngLiteral;
-  setPosition: Dispatch<SetStateAction<LatLngLiteral>>;
-  center: LatLngLiteral;
-}
-
-export interface TournamentFormProps {
-  addressRef: MutableRefObject<HTMLInputElement | null>;
-  townRef: MutableRefObject<HTMLInputElement | null>;
-  departmentRef: MutableRefObject<HTMLInputElement | null>;
-  tournamentNameRef: MutableRefObject<HTMLInputElement | null>;
-  urlRef: MutableRefObject<HTMLInputElement | null>;
-  timeControlRef: MutableRefObject<HTMLSelectElement | null>;
-  dateRef: MutableRefObject<HTMLInputElement | null>;
-  countryRef: MutableRefObject<HTMLInputElement | null>;
-  normRef: MutableRefObject<HTMLSelectElement | null>;
-  yourNameRef: MutableRefObject<HTMLInputElement | null>;
-  yourEmailRef: MutableRefObject<HTMLInputElement | null>;
-  messageRef: MutableRefObject<HTMLTextAreaElement | null>;
-  position: LatLngLiteral;
-  setPosition: Dispatch<SetStateAction<LatLngLiteral>>;
-}
-
-export interface ResponseMessage {
   isSuccessful: boolean;
   message: string;
-}
+};
 
 export type ScrollableElement = Window | HTMLElement;

utils/trpc.ts

@@ -0,0 +1,9 @@
+import { createTRPCReact } from "@trpc/react-query";
+import type { inferRouterInputs, inferRouterOutputs } from "@trpc/server";
+
+import type { AppRouter } from "@/app/server/appRouter";
+
+export type APIRouterInput = inferRouterInputs<AppRouter>;
+export type APIRouterOutput = inferRouterOutputs<AppRouter>;
+
+export const trpc = createTRPCReact<AppRouter>();