Add Tournament 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} />;
 }