Add Tournament form

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

@@ -0,0 +1,112 @@
+"use client";
+
+import { MapProps } from "@/types";
+import { useMemo, useRef, ChangeEvent } from "react";
+import { useTranslations } from "next-intl";
+import { useSetAtom } from "jotai";
+import { mapBoundsAtom } from "@/app/atoms";
+
+import L from "leaflet";
+import { MapContainer, TileLayer, Marker } from "react-leaflet";
+import "leaflet/dist/leaflet.css";
+import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
+import "leaflet-defaulticon-compatibility";
+
+import MapEvents from "@/app/[lang]/components/MapEvents";
+
+const Map = ({ position, setPosition, center }: MapProps) => {
+  const t = useTranslations("Map");
+
+  const latValue = position.lat.toFixed(4);
+  const lngValue = position.lng.toFixed(4);
+
+  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());
+        }
+      },
+    }),
+    [setPosition],
+  );
+
+  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>
+    </>
+  );
+};
+
+export default Map;

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

@@ -0,0 +1,268 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { useState } from "react";
+import { useTranslations } from "next-intl";
+import { useAtomValue } from "jotai";
+import { franceCenterAtom } from "@/app/atoms";
+import useTournamentForm from "@/hooks/useTournamentForm";
+import InfoMessage from "@/app/[lang]/components/InfoMessage";
+import {
+  handleTournamentSubmit,
+  handleClearTournamentForm,
+} from "@/handlers/formHandlers";
+import LoadingMap from "@/app/[lang]/components/LoadingMap";
+
+const Map = dynamic(() => import("./Map"), {
+  ssr: false,
+  loading: LoadingMap,
+});
+
+const TournamentForm = () => {
+  const t = useTranslations("AddTournament");
+  const center = useAtomValue(franceCenterAtom);
+  const formRefs = useTournamentForm();
+
+  const [isSending, setIsSending] = useState(false);
+  const [responseMessage, setResponseMessage] = useState({
+    isSuccessful: false,
+    message: "",
+  });
+
+  return (
+    <>
+      <form
+        onSubmit={(e) =>
+          handleTournamentSubmit(
+            e,
+            t,
+            setIsSending,
+            setResponseMessage,
+            formRefs,
+          )
+        }
+        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"
+              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
+            />
+          </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"
+              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>
+          </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>
+          </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"
+              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"
+              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"
+              placeholder={t("departmentPlaceholder")}
+              // 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"
+              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"
+              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"
+              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"
+              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>
+        <button
+          disabled={isSending}
+          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")}
+        </button>
+        <button
+          onClick={() => handleClearTournamentForm(formRefs, center)}
+          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} />;
+      </form>
+    </>
+  );
+};
+
+export default TournamentForm;

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

@@ -0,0 +1,24 @@
+import { useTranslations } from "next-intl";
+
+import TournamentForm from "./TournamentForm";
+
+export default function Contact() {
+  const t = useTranslations("AddTournament");
+
+  return (
+    <section className="grid place-items-center bg-white pb-20 dark:bg-gray-800">
+      <div className="mx-auto max-w-screen-md px-4 py-8 lg:py-16">
+        <h2
+          className="mb-4 text-center text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white"
+          data-test="header2"
+        >
+          {t("title")}
+        </h2>
+        <p className="mb-8 text-center font-light text-gray-500 dark:text-gray-400 sm:text-xl lg:mb-16">
+          {t("info")}
+        </p>
+        <TournamentForm />
+      </div>
+    </section>
+  );
+}

app/[lang]/components/InfoMessage.tsx

@@ -0,0 +1,30 @@
+import { ResponseMessage } from "@/types";
+import { Dispatch, SetStateAction } from "react";
+
+const InfoMessage = ({
+  responseMessage,
+}: {
+  responseMessage: ResponseMessage;
+}) => (
+  <p
+    className={`${
+      responseMessage.isSuccessful ? "text-green-600" : "text-red-600"
+    } italic`}
+    data-test="info-message"
+  >
+    {responseMessage.message}
+  </p>
+);
+
+export const clearMessage = (
+  setResponseMessage: Dispatch<SetStateAction<ResponseMessage>>,
+) => {
+  setTimeout(() => {
+    setResponseMessage({
+      isSuccessful: false,
+      message: "",
+    });
+  }, 10000);
+};
+
+export default InfoMessage;

app/[lang]/components/LoadingMap.tsx

@@ -0,0 +1,12 @@
+import { useTranslations } from "next-intl";
+
+const LoadingMap = () => {
+  const t = useTranslations("Tournaments");
+  return (
+    <div className="grid h-content place-self-center bg-white text-center text-gray-900 dark:bg-gray-800 dark:text-white">
+      <p>{t("loading")}</p>
+    </div>
+  );
+};
+
+export default LoadingMap;

app/[lang]/components/MapEvents.tsx

@@ -0,0 +1,31 @@
+import { useEffect } from "react";
+import { useSetAtom } from "jotai";
+import { mapBoundsAtom } from "@/app/atoms";
+import L from "leaflet";
+import { useMapEvent } from "react-leaflet";
+
+const MapEvents = () => {
+  const setMapBounds = useSetAtom(mapBoundsAtom);
+
+  const worldBounds = L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180));
+  const franceBounds = L.latLngBounds(
+    L.latLng(42.08, -5.12),
+    L.latLng(51.17, 9.53),
+  );
+
+  const map = useMapEvent("moveend", () => {
+    // Set the map bounds atoms when the user pans/zooms
+    setMapBounds(map.getBounds());
+  });
+
+  // viewport agnostic centering of France & max world bounds
+  useEffect(() => {
+    map.setView(franceBounds.getCenter(), map.getBoundsZoom(franceBounds));
+    map.setMaxBounds(worldBounds);
+    map.options.maxBoundsViscosity = 1.0; // Prevents going past bounds while dragging
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return null;
+};
+
+export default MapEvents;

app/[lang]/contactez-nous/ContactForm.tsx

@@ -1,70 +1,37 @@
 "use client";
 
-import { useState, FormEvent } from "react";
+import { useState } from "react";
 import { useTranslations } from "next-intl";
 
-import sendMail from "@/lib/sendMail";
-import { errorLog } from "@/utils/logger";
 import useContactForm from "@/hooks/useContactForm";
+import { handleEmailSubmit } from "@/handlers/formHandlers";
+
+import InfoMessage from "@/app/[lang]/components/InfoMessage";
 
 const ContactForm = () => {
   const t = useTranslations("Contact");
   const { values, handleChange, resetForm } = useContactForm();
+  const [isSending, setIsSending] = useState(false);
   const [responseMessage, setResponseMessage] = useState({
     isSuccessful: false,
     message: "",
   });
-  const [isSending, setIsSending] = useState(false);
-
-  const clearMessage = () => {
-    setTimeout(() => {
-      setResponseMessage({
-        isSuccessful: false,
-        message: "",
-      });
-    }, 10000);
-  };
-
-  const handleEmailSubmit = async (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    setIsSending(true);
-    try {
-      const response = await sendMail(values);
-      if (response.status === 250) {
-        setResponseMessage({
-          isSuccessful: true,
-          message: t("success"),
-        });
-
-        resetForm();
-        clearMessage();
-        setIsSending(false);
-      }
-    } catch (error) {
-      errorLog(error);
-      setResponseMessage({
-        isSuccessful: false,
-        message: t("failure"),
-      });
-      clearMessage();
-      setIsSending(false);
-    }
-  };
-
-  const infoMessage = (
-    <p
-      className={`${
-        responseMessage.isSuccessful ? "text-green-600" : "text-red-600"
-      } italic`}
-      data-test="info-message"
-    >
-      {responseMessage.message}
-    </p>
-  );
 
   return (
     <>
-      <form onSubmit={handleEmailSubmit} className="space-y-8">
+      <form
+        onSubmit={(e) =>
+          handleEmailSubmit(
+            e,
+            t,
+            setIsSending,
+            setResponseMessage,
+            values,
+            resetForm,
+          )
+        }
+        className="space-y-8"
+      >
         <div>
           <label
             htmlFor="email"
@@ -127,7 +94,7 @@ const ContactForm = () => {
         >
           {isSending ? t("sending") : t("sendButton")}
         </button>
-        {infoMessage}
+        <InfoMessage responseMessage={responseMessage} />
       </form>
     </>
   );

app/[lang]/tournois/TournamentMap.tsx

@@ -4,22 +4,12 @@ import { TimeControl } from "@/types";
 
 import { useMemo, useRef, useCallback, useEffect } from "react";
 import L, { LatLngLiteral, Marker, DomUtil } from "leaflet";
+import { MapContainer, TileLayer, LayerGroup } from "react-leaflet";
 import MarkerClusterGroup from "react-leaflet-cluster";
-import {
-  MapContainer,
-  TileLayer,
-  LayerGroup,
-  useMapEvent,
-} from "react-leaflet";
 import { FaAngleDoubleDown } from "react-icons/fa";
 import { useAtomValue, useSetAtom } from "jotai";
 import { countBy, groupBy } from "lodash";
 
-import "leaflet/dist/leaflet.css";
-import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
-import "leaflet-defaulticon-compatibility";
-import "leaflet.smooth_marker_bouncing";
-
 import {
   mapBoundsAtom,
   debouncedHoveredListTournamentIdAtom,
@@ -33,6 +23,13 @@ import Legend from "./Legend";
 import { TournamentMarker, TournamentMarkerRef } from "./TournamentMarker";
 import TimeControlFilters from "./TimeControlFilters";
 
+import MapEvents from "@/app/[lang]/components/MapEvents";
+
+import "leaflet/dist/leaflet.css";
+import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
+import "leaflet-defaulticon-compatibility";
+import "leaflet.smooth_marker_bouncing";
+
 // Declare a class type that adds in methods etc. defined by leaflet.smooth_marker_bouncing
 // to keep Typescript happy
 declare class BouncingMarker extends Marker {
@@ -46,30 +43,6 @@ declare class BouncingMarker extends Marker {
   };
 }
 
-const MapEvents = () => {
-  const setMapBounds = useSetAtom(mapBoundsAtom);
-
-  const worldBounds = L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180));
-  const franceBounds = L.latLngBounds(
-    L.latLng(42.08, -5.12),
-    L.latLng(51.17, 9.53),
-  );
-
-  const map = useMapEvent("moveend", () => {
-    // Set the map bounds atoms when the user pans/zooms
-    setMapBounds(map.getBounds());
-  });
-
-  // viewport agnostic centering of France & max world bounds
-  useEffect(() => {
-    map.setView(franceBounds.getCenter(), map.getBoundsZoom(franceBounds));
-    map.setMaxBounds(worldBounds);
-    map.options.maxBoundsViscosity = 1.0; // Prevents going past bounds while dragging
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-  return null;
-};
-
 const stopBouncingMarkers = () => {
   const markers =
     // @ts-ignore

app/[lang]/tournois/TournamentsDisplay.tsx

@@ -1,22 +1,17 @@
 "use client";
 
-import dynamic from "next/dynamic";
-import { useTranslations } from "next-intl";
-import { useHydrateAtoms } from "jotai/utils";
+type TournamentsDisplayProps = {
+  tournaments: Tournament[];
+};
 
 import { Tournament } from "@/types";
+
+import dynamic from "next/dynamic";
+import { useHydrateAtoms } from "jotai/utils";
 import { tournamentsAtom } from "@/app/atoms";
 
 import TournamentTable from "./TournamentTable";
-
-const LoadingMap = () => {
-  const t = useTranslations("Tournaments");
-  return (
-    <div className="grid h-content place-items-center bg-white text-gray-900 dark:bg-gray-800 dark:text-white">
-      <p>{t("loading")}</p>
-    </div>
-  );
-};
+import LoadingMap from "@/app/[lang]/components/LoadingMap";
 
 /**
  * Imports the tournament map component, ensuring CSR only.
@@ -27,10 +22,6 @@ const TournamentMap = dynamic(() => import("./TournamentMap"), {
   loading: LoadingMap,
 });
 
-type TournamentsDisplayProps = {
-  tournaments: Tournament[];
-};
-
 export default function TournamentsDisplay({
   tournaments,
 }: TournamentsDisplayProps) {

app/[lang]/tournois/page.tsx

@@ -20,6 +20,7 @@ export interface TournamentData {
   norm_tournament: boolean;
   date: string;
   coordinates: [number, number];
+  pending: boolean;
 }
 
 const tcMap: Record<TournamentData["time_control"], TimeControl> = {
@@ -110,6 +111,7 @@ const getTournaments = async () => {
         timeControl,
         latLng: { lat: t.coordinates[0], lng: t.coordinates[1] },
         norm: t.norm_tournament,
+        pending: t.pending,
       };
     });
   } catch (error) {
@@ -120,6 +122,5 @@ const getTournaments = async () => {
 
 export default async function Tournaments() {
   const tournaments = await getTournaments();
-
   return <TournamentsDisplay tournaments={tournaments} />;
 }