Replace 1h KO with a catch all category - display only when required

app/[lang]/tournois/Legend.tsx

@@ -1,12 +1,27 @@
 import { useMap } from "react-leaflet";
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { useTranslations } from "next-intl";
 import L from "leaflet";
+import { useAtomValue } from "jotai";
+
 import { TimeControl } from "@/types";
+import { filteredTournamentsByTimeControlAtom } from "@/app/atoms";
 
 const Legend = () => {
   const t = useTranslations("Tournaments");
   const map = useMap();
+  const tournaments = useAtomValue(filteredTournamentsByTimeControlAtom);
+
+  const timeControls = useMemo(
+    () =>
+      [
+        { tc: TimeControl.Classic, colour: "#00ac39" },
+        { tc: TimeControl.Rapid, colour: "#0086c7" },
+        { tc: TimeControl.Blitz, colour: "#cec348" },
+        { tc: TimeControl.Other, colour: "#d10c3e" },
+      ].filter(({ tc }) => tournaments.some((t) => t.timeControl === tc)),
+    [tournaments]
+  );
 
   useEffect(() => {
     if (map) {
@@ -19,30 +34,28 @@ const Legend = () => {
           "style",
           "background: white; color: black; border: 2px solid grey; border-radius: 6px; padding: 10px;"
         );
-        div.innerHTML = `<ul>
+
-            <li><span style='background:#00ac39; display: block; height: 16px; width: 30px; border: 1px solid #999; float: left; margin-right: 5px'></span>${t(
+        div.innerHTML = `
+          <ul>
+            ${timeControls
+              .map(
+                ({ tc, colour }) => `
+                  <li>
+                    <span class="block h-4 w-7 border border-[#999] float-left mr-1" style="background: ${colour}"></span>${t(
                   "timeControlEnum",
-              { tc: TimeControl.Classic }
+                  { tc }
-            )}</li>
+                )}
-            <li><span style='background:#0086c7; display: block; height: 16px; width: 30px; border: 1px solid #999; float: left; margin-right: 5px'></span>${t(
+                  </li>
-              "timeControlEnum",
+                `
-              { tc: TimeControl.Rapid }
+              )
-            )}</li>
+              .join("")}
-            <li><span style='background:#cec348; display: block; height: 16px; width: 30px; border: 1px solid #999; float: left; margin-right: 5px'></span>${t(
-              "timeControlEnum",
-              { tc: TimeControl.Blitz }
-            )}</li>
-            <li><span style='background:#d10c3e; display: block; height: 16px; width: 30px; border: 1px solid #999; float: left; margin-right: 5px'></span>${t(
-              "timeControlEnum",
-              { tc: TimeControl.KO }
-            )}</li>
           </ul>`;
         return div;
       };
 
       legend.addTo(map);
     }
-  }, [map, t]);
+  }, [map, t, timeControls]);
   return null;
 };
 

app/[lang]/tournois/TimeControlFilters.tsx

@@ -1,35 +1,43 @@
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 
-import { classicAtom, rapidAtom, blitzAtom, oneHourKOAtom } from "@/app/atoms";
+import {
+  classicAtom,
+  rapidAtom,
+  blitzAtom,
+  otherAtom,
+  tournamentsAtom,
+} from "@/app/atoms";
 import { useTranslations } from "next-intl";
 import { TimeControl } from "@/types";
 
 const TimeControlFilters = () => {
   const t = useTranslations("Tournaments");
+  const tournaments = useAtomValue(tournamentsAtom);
+
   const classic = useAtom(classicAtom);
   const rapid = useAtom(rapidAtom);
   const blitz = useAtom(blitzAtom);
-  const oneHourKO = useAtom(oneHourKOAtom);
+  const other = useAtom(otherAtom);
 
   const checkboxes = [
-    { title: t("timeControlEnum", { tc: TimeControl.Classic }), atom: classic },
+    { tc: TimeControl.Classic, atom: classic },
-    { title: t("timeControlEnum", { tc: TimeControl.Rapid }), atom: rapid },
+    { tc: TimeControl.Rapid, atom: rapid },
-    { title: t("timeControlEnum", { tc: TimeControl.Blitz }), atom: blitz },
+    { tc: TimeControl.Blitz, atom: blitz },
-    { title: t("timeControlEnum", { tc: TimeControl.KO }), atom: oneHourKO },
+    { tc: TimeControl.Other, atom: other },
-  ];
+  ].filter(({ tc }) => tournaments.some((t) => t.timeControl === tc));
 
   return (
     <div className="flex flex-wrap gap-3">
-      {checkboxes.map((cb, i) => (
+      {checkboxes.map(({ tc, atom }, i) => (
         <div key={i} className="text-gray-900 dark:text-white">
           <label>
             <input
               type="checkbox"
               className="mr-2"
-              checked={cb.atom[0]}
+              checked={atom[0]}
-              onChange={() => cb.atom[1](!cb.atom[0])}
+              onChange={() => atom[1](!atom[0])}
             />
-            {cb.title}
+            {t("timeControlEnum", { tc })}
           </label>
         </div>
       ))}

app/[lang]/tournois/TournamentMap.tsx

@@ -27,7 +27,7 @@ import {
   classicAtom,
   rapidAtom,
   blitzAtom,
-  oneHourKOAtom,
+  otherAtom,
 } from "@/app/atoms";
 
 import Legend from "./Legend";
@@ -249,7 +249,7 @@ export default function TournamentMap() {
   const classic = useAtomValue(classicAtom);
   const rapid = useAtomValue(rapidAtom);
   const blitz = useAtomValue(blitzAtom);
-  const other = useAtomValue(oneHourKOAtom);
+  const other = useAtomValue(otherAtom);
 
   useEffect(() => {
     if (hoveredListTournamentId === null) {
@@ -300,7 +300,7 @@ export default function TournamentMap() {
           <TimeControlGroup timeControl={TimeControl.Blitz} colour="yellow" />
         )}
         {other && (
-          <TimeControlGroup timeControl={TimeControl.KO} colour="red" />
+          <TimeControlGroup timeControl={TimeControl.Other} colour="red" />
         )}
       </MapContainer>
 

app/[lang]/tournois/TournamentMarker.tsx

@@ -29,7 +29,7 @@ export const TournamentMarker = forwardRef<
         ? -0.01
         : tournament.timeControl === TimeControl.Blitz
         ? 0.01
-        : tournament.timeControl === TimeControl.KO
+        : tournament.timeControl === TimeControl.Other
         ? 0.02
         : 0),
   });

app/[lang]/tournois/page.tsx

@@ -14,7 +14,7 @@ export interface TournamentData {
   department: string;
   tournament: string;
   url: string;
-  time_control: "Cadence Lente" | "Rapide" | "Blitz" | "1h KO";
+  time_control: "Cadence Lente" | "Rapide" | "Blitz" | string;
   date: string;
   coordinates: [number, number];
 }
@@ -23,7 +23,6 @@ const tcMap: Record<TournamentData["time_control"], TimeControl> = {
   "Cadence Lente": TimeControl.Classic,
   Rapide: TimeControl.Rapid,
   Blitz: TimeControl.Blitz,
-  "1h KO": TimeControl.KO,
 };
 
 const getTournaments = async () => {
@@ -57,7 +56,7 @@ const getTournaments = async () => {
     return data.map<Tournament>((t) => ({
       ...t,
       _id: t._id.toString(),
-      timeControl: tcMap[t.time_control],
+      timeControl: tcMap[t.time_control] ?? TimeControl.Other,
       latLng: { lat: t.coordinates[0], lng: t.coordinates[1] },
     }));
   } catch (error) {

app/atoms.ts

@@ -12,7 +12,7 @@ export const searchStringAtom = atom('');
 export const classicAtom = atom(true);
 export const rapidAtom = atom(true);
 export const blitzAtom = atom(true);
-export const oneHourKOAtom = atom(true);
+export const otherAtom = atom(true);
 
 export const {
   currentValueAtom: hoveredMapTournamentIdAtom,
@@ -29,13 +29,13 @@ export const filteredTournamentsByTimeControlAtom = atom((get) => {
   const classic = get(classicAtom);
   const rapid = get(rapidAtom);
   const blitz = get(blitzAtom);
-  const oneHourKO = get(oneHourKOAtom);
+  const other = get(otherAtom);
 
   return tournaments.filter(tournament =>
     (tournament.timeControl === TimeControl.Classic && classic) ||
     (tournament.timeControl === TimeControl.Rapid && rapid) ||
     (tournament.timeControl === TimeControl.Blitz && blitz) ||
-    (tournament.timeControl === TimeControl.KO && oneHourKO));
+    (tournament.timeControl === TimeControl.Other && other));
 });
 
 export const filteredTournamentsListAtom = atom((get) => {

css/marker-cluster.css

@@ -22,10 +22,10 @@
     background-color: rgba(202, 196, 39, 0.6)
 }
 
-.marker-cluster-KO {
+.marker-cluster-Other {
     background-color: rgba(211, 67, 84, 0.6);
 }
 
-.marker-cluster-KO div {
+.marker-cluster-Other div {
     background-color: rgba(203, 41, 60, 0.6);
 }

messages/en.json

@@ -35,7 +35,7 @@
     "tournament": "Tournament",
     "timeControl": "Time Control",
     "approx": "Géo-localisation is approximative",
-    "timeControlEnum": "{tc, select, Classic {Classic} Rapid {Rapid} Blitz {Blitz} KO {1h KO} other {{tc}}}",
+    "timeControlEnum": "{tc, select, Classic {Classic} Rapid {Rapid} Blitz {Blitz} Other {Other} other {{tc}}}",
     "clearButton": "Clear"
   },
 

messages/fr.json

@@ -35,7 +35,7 @@
     "tournament": "Tournois",
     "timeControl": "Cadence",
     "approx": "Géolocalisation approximative",
-    "timeControlEnum": "{tc, select, Classic {Cadence Lente} Rapid {Rapide} Blitz {Blitz} KO {1h KO} other {{tc}}}",
+    "timeControlEnum": "{tc, select, Classic {Cadence Lente} Rapid {Rapide} Blitz {Blitz} Other {Autres} other {{tc}}}",
     "clearButton": "Effacer"
   },
 

types.ts

@@ -4,7 +4,7 @@ export enum TimeControl {
   Classic = "Classic",
   Rapid = "Rapid",
   Blitz = "Blitz",
-  KO = "KO",
+  Other = "Other",
 };
 
 export interface Tournament {