From d8a5b4393a0038bb9d3a8a52911b0c554cd5cfea Mon Sep 17 00:00:00 2001 From: Timothy Armes Date: Fri, 7 Jul 2023 09:42:05 +0200 Subject: [PATCH] Replace 1h KO with a catch all category - display only when required --- app/[lang]/tournois/Legend.tsx | 53 ++++++++++++++-------- app/[lang]/tournois/TimeControlFilters.tsx | 32 ++++++++----- app/[lang]/tournois/TournamentMap.tsx | 6 +-- app/[lang]/tournois/TournamentMarker.tsx | 2 +- app/[lang]/tournois/page.tsx | 5 +- app/atoms.ts | 6 +-- css/marker-cluster.css | 4 +- messages/en.json | 2 +- messages/fr.json | 2 +- types.ts | 2 +- 10 files changed, 67 insertions(+), 47 deletions(-) diff --git a/app/[lang]/tournois/Legend.tsx b/app/[lang]/tournois/Legend.tsx index 8fbd361..50a2b5f 100644 --- a/app/[lang]/tournois/Legend.tsx +++ b/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 = ``; + + div.innerHTML = ` + `; return div; }; legend.addTo(map); } - }, [map, t]); + }, [map, t, timeControls]); return null; }; diff --git a/app/[lang]/tournois/TimeControlFilters.tsx b/app/[lang]/tournois/TimeControlFilters.tsx index 2e7bed6..fcb17a6 100644 --- a/app/[lang]/tournois/TimeControlFilters.tsx +++ b/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 }, - { title: t("timeControlEnum", { tc: TimeControl.Rapid }), atom: rapid }, - { title: t("timeControlEnum", { tc: TimeControl.Blitz }), atom: blitz }, - { title: t("timeControlEnum", { tc: TimeControl.KO }), atom: oneHourKO }, - ]; + { tc: TimeControl.Classic, atom: classic }, + { tc: TimeControl.Rapid, atom: rapid }, + { tc: TimeControl.Blitz, atom: blitz }, + { tc: TimeControl.Other, atom: other }, + ].filter(({ tc }) => tournaments.some((t) => t.timeControl === tc)); return (
- {checkboxes.map((cb, i) => ( + {checkboxes.map(({ tc, atom }, i) => (
))} diff --git a/app/[lang]/tournois/TournamentMap.tsx b/app/[lang]/tournois/TournamentMap.tsx index bc47b02..4d7aa52 100644 --- a/app/[lang]/tournois/TournamentMap.tsx +++ b/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() { )} {other && ( - + )} diff --git a/app/[lang]/tournois/TournamentMarker.tsx b/app/[lang]/tournois/TournamentMarker.tsx index b50d0d0..9360f65 100644 --- a/app/[lang]/tournois/TournamentMarker.tsx +++ b/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), }); diff --git a/app/[lang]/tournois/page.tsx b/app/[lang]/tournois/page.tsx index 2263876..f17d899 100644 --- a/app/[lang]/tournois/page.tsx +++ b/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 = { "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((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) { diff --git a/app/atoms.ts b/app/atoms.ts index c27e431..81b1313 100644 --- a/app/atoms.ts +++ b/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) => { diff --git a/css/marker-cluster.css b/css/marker-cluster.css index ca08d45..0d4ac5e 100644 --- a/css/marker-cluster.css +++ b/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); } diff --git a/messages/en.json b/messages/en.json index 82b090f..16a6638 100644 --- a/messages/en.json +++ b/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" }, diff --git a/messages/fr.json b/messages/fr.json index e614871..ba75e76 100644 --- a/messages/fr.json +++ b/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" }, diff --git a/types.ts b/types.ts index 54152ad..5d56ced 100644 --- a/types.ts +++ b/types.ts @@ -4,7 +4,7 @@ export enum TimeControl { Classic = "Classic", Rapid = "Rapid", Blitz = "Blitz", - KO = "KO", + Other = "Other", }; export interface Tournament {