Use tRPC and react-hook-form

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,