Use tRPC and react-hook-form

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

@@ -1,111 +1,73 @@
 "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 t = useTranslations("Map");
+const center: LatLngLiteral = { lat: 47.0844, lng: 2.3964 };
 
-  const latValue = position.lat.toFixed(4);
-  const lngValue = position.lng.toFixed(4);
+const Map = () => {
+  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}
-          scrollWheelZoom={false}
-          style={{ height: "600px", flexGrow: 1 }}
-          ref={(map) => {
-            if (map) {
-              setMapBounds(map.getBounds());
-            }
-          }}
-        >
-          <MapEvents />
-          <TileLayer
-            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
-            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-          />
-          <Marker
-            position={position}
-            draggable={true}
-            ref={markerRef}
-            eventHandlers={eventHandlers}
-          />
-        </MapContainer>
-      </section>
-    </>
+    <MapContainer
+      center={center}
+      zoom={5}
+      scrollWheelZoom={false}
+      style={{ height: "600px", flexGrow: 1 }}
+      ref={(map) => {
+        if (map) {
+          setMapBounds(map.getBounds());
+        }
+      }}
+    >
+      <MapEvents />
+      <TileLayer
+        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+      />
+      <Marker
+        position={{ lat: latValue, lng: lngValue }}
+        draggable={true}
+        ref={markerRef}
+        eventHandlers={eventHandlers}
+      />
+    </MapContainer>
   );
 };
 

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 {
-  handleClearTournamentForm,
-  handleTournamentSubmit,
-} from "@/handlers/formHandlers";
-import useTournamentForm from "@/hooks/useTournamentForm";
+import { DateField } from "@/app/[lang]/components/form/DateField";
+import { SelectField } from "@/app/[lang]/components/form/SelectField";
+import { SwitchField } from "@/app/[lang]/components/form/SwitchField";
+import { TextAreaField } from "@/app/[lang]/components/form/TextAreaField";
+import { TextField } from "@/app/[lang]/components/form/TextField";
+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 formRefs = useTournamentForm();
-
-  const [isSending, setIsSending] = useState(false);
+  const at = useTranslations("App");
+  const addTournament = trpc.addTournament.useMutation();
   const [responseMessage, setResponseMessage] = useState({
     isSuccessful: false,
     message: "",
   });
 
+  const form = useForm<TournamentFormValues>({
+    resolver: zodResolver(addTournamentSchema),
+    defaultValues: {
+      tournament: {
+        norm_tournament: false,
+        coordinates: [47.0844, 2.3964],
+      },
+    },
+  });
+
+  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);
+    }
+  };
+
   return (
-    <>
-      <form
-        onSubmit={(e) =>
-          handleTournamentSubmit(
-            e,
-            t,
-            setIsSending,
-            setResponseMessage,
-            formRefs,
-          )
-        }
-        className="space-y-8"
-      >
+    <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
-              htmlFor="tournament-name"
-              className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
-            >
-              {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"
+            <TextField
+              name="tournament.tournament"
+              label={t("tournamentNameLabel")}
               placeholder={t("tournamentNamePlaceholder")}
               required
             />
           </div>
           <div className="col-span-2 sm:col-span-1">
-            <label
-              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
-            />
+            <DateField name="tournament.date" label={t("dateLabel")} required />
           </div>
           <div className="col-span-2 sm:col-span-1">
-            <label
-              htmlFor="url"
-              className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
-            >
-              {t("urlLabel")}
-            </label>
-            <input
-              ref={formRefs.urlRef}
-              type="url"
-              id="url"
+            <TextField
+              name="tournament.url"
+              label={t("urlLabel")}
               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
-              htmlFor="time-control"
-              className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
-            >
-              {t("tcLabel")}
-            </label>
-            <select
-              ref={formRefs.timeControlRef}
-              id="time-control"
-              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="Classical"
-            >
-              <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>
+            <SelectField
+              name="tournament.time_control"
+              label={t("tcLabel")}
+              options={[
+                TimeControl.Classic,
+                TimeControl.Rapid,
+                TimeControl.Blitz,
+              ].map((tc) => ({
+                value: tc,
+                label: at("timeControlEnum", { tc }),
+              }))}
+              required
+            />
           </div>
           <div className="col-span-2 sm:col-span-1">
-            <label
-              htmlFor="norm"
-              className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
-            >
-              {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>
+            <SwitchField
+              name="tournament.norm_tournament"
+              label={t("normLabel")}
+            />
           </div>
           <div className="col-span-4">
-            <label
-              htmlFor="address"
-              className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
-            >
-              {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"
+            <TextField
+              name="tournament.address"
+              label={t("addressLabel")}
               placeholder={t("addressPlaceholder")}
               required
             />
           </div>
           <div className="col-span-4 sm:col-span-2">
-            <label
-              htmlFor="town"
-              className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
-            >
-              {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"
+            <TextField
+              name="tournament.town"
+              label={t("townLabel")}
               placeholder={t("townPlaceholder")}
               required
             />
           </div>
           <div className="col-span-2 sm:col-span-1">
-            <label
-              htmlFor="department"
-              className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
-            >
-              {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"
+            <TextField
+              name="tournament.department"
+              label={t("departmentLabel")}
               placeholder={t("departmentPlaceholder")}
-              // required
+              required
             />
           </div>
           <div className="col-span-2 sm:col-span-1">
-            <label
-              htmlFor="country"
-              className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
-            >
-              {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"
+            <TextField
+              name="tournament.country"
+              label={t("countryLabel")}
               placeholder={t("countryPlaceholder")}
               required
             />
           </div>
           <div className="col-span-2 sm:col-span-1">
-            <label
-              htmlFor="your-name"
-              className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
-            >
-              {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"
+            <TextField
+              name="name"
+              label={t("yourNameLabel")}
               placeholder={t("yourNamePlaceholder")}
               required
             />
           </div>
           <div className="col-span-2 sm:col-span-1">
-            <label
-              htmlFor="your-email"
-              className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
-            >
-              {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"
+            <TextField
+              name="email"
+              label={t("yourEmailLabel")}
               placeholder={t("yourEmailPlaceholder")}
               required
             />
           </div>
           <div className="col-span-4 row-span-2 sm:col-span-2">
-            <label
-              htmlFor="message"
-              className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
-            >
-              {t("messageLabel")}
-            </label>
-            <textarea
-              ref={formRefs.messageRef}
-              id="message"
+            <TextAreaField
+              name="message"
+              label={t("messageLabel")}
               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 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;