From c27fffd1b2be71e1d1ac82a4cd2120ac51cff477 Mon Sep 17 00:00:00 2001 From: Owen Rees Date: Sat, 30 Aug 2025 22:51:53 +0200 Subject: [PATCH] Implement region based filtering of clubs replace cancel button with X use search params instead of path fix routes for filtering clubs by URL, add loading map spinner, remove useEffect normalised region name in url will set filter search region by url params add i8n to region filtering use jotai useSetAtom select value becomes the name of the region on selection fix geojson types fix region names apply same regional filtering logic to tournaments that we have for clubs type fixes for GeoJson Feature basic filtering of clubs by region working remove comments two column layout change text colours accept undefined in region data state selecting a region from modal sets state with region data of Feature type. Types currently not all correct. by region filter satisfies types, with no functionality yet remove unused imports add region option in dropdown rename file to reflect its function json file for region names comment out analytics script for testing loading upgrade mongo unformat file to keep line count small add json of French regions coordinates upgrade next to last v14 --- package.json | 4 +- public/worker-HdKwD-lqJRl7cDKBZAxT4.js | 1 + .../[locale]/(main)/clubs/ClubsDisplay.tsx | 32 ++++- src/app/[locale]/layout.tsx | 8 +- src/atoms.ts | 52 ++++++- src/components/RegionSelect.tsx | 81 ++++++++--- src/components/RegionSelectModal.tsx | 96 +++++++++++++ src/messages/en.json | 7 +- src/messages/fr.json | 7 +- src/resources/regionNames.json | 17 +++ src/resources/regionsGeoJson.json | 1 + yarn.lock | 136 +++++++++--------- 12 files changed, 339 insertions(+), 103 deletions(-) create mode 100644 public/worker-HdKwD-lqJRl7cDKBZAxT4.js create mode 100644 src/components/RegionSelectModal.tsx create mode 100644 src/resources/regionNames.json create mode 100644 src/resources/regionsGeoJson.json diff --git a/package.json b/package.json index f15f2d0..6dce232 100644 --- a/package.json +++ b/package.json @@ -35,8 +35,8 @@ "leaflet.markercluster": "^1.5.3", "leaflet.smooth_marker_bouncing": "3.0.3", "lodash": "^4.17.21", - "mongodb": "^6.4.0", - "next": "^14.0.4", + "mongodb": "^6.19.0", + "next": "^14.2.3", "next-auth": "^5.0.0-beta.16", "next-intl": "^3.3.2", "next-pwa": "^5.6.0", diff --git a/public/worker-HdKwD-lqJRl7cDKBZAxT4.js b/public/worker-HdKwD-lqJRl7cDKBZAxT4.js new file mode 100644 index 0000000..8587849 --- /dev/null +++ b/public/worker-HdKwD-lqJRl7cDKBZAxT4.js @@ -0,0 +1 @@ +self.__WB_DISABLE_DEV_LOGS=!0; \ No newline at end of file diff --git a/src/app/[locale]/(main)/clubs/ClubsDisplay.tsx b/src/app/[locale]/(main)/clubs/ClubsDisplay.tsx index 0ad39cf..cdde87c 100644 --- a/src/app/[locale]/(main)/clubs/ClubsDisplay.tsx +++ b/src/app/[locale]/(main)/clubs/ClubsDisplay.tsx @@ -1,10 +1,15 @@ "use client"; +import { Feature, GeoJsonProperties, MultiPolygon, Polygon } from "geojson"; +import { useSetAtom } from "jotai"; import { useHydrateAtoms } from "jotai/utils"; import dynamic from "next/dynamic"; +import { useSearchParams } from "next/navigation"; -import { clubsAtom } from "@/atoms"; +import { clubsAtom, regionFilterAtom } from "@/atoms"; import LoadingMap from "@/components/LoadingMap"; +import regionNames from "@/resources/regionNames.json"; +import regionGeoJson from "@/resources/regionsGeoJson.json"; import { Club } from "@/types"; import ClubTable from "./ClubTable"; @@ -24,6 +29,31 @@ const ClubMap = dynamic(() => import("./ClubMap"), { export default function ClubsDisplay({ clubs }: ClubsDisplayProps) { useHydrateAtoms([[clubsAtom, clubs]]); + const setRegionFilter = useSetAtom(regionFilterAtom); + + const searchParams = useSearchParams(); + const regionSearchParam = searchParams.get("region"); + + if (regionSearchParam) { + const matchedRegion = regionNames.name.find( + (name) => + name + .toLowerCase() + .replaceAll(" ", "-") + .normalize("NFD") + .replace(/[\u0300-\u036f]/g, "") === regionSearchParam.toLowerCase(), + ); + + const regionData = regionGeoJson.features.find( + (f) => f.properties.nom === matchedRegion, + ); + + if (regionData) { + setRegionFilter( + regionData as Feature, + ); + } + } return (
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx index a18ba03..b6d554f 100644 --- a/src/app/[locale]/layout.tsx +++ b/src/app/[locale]/layout.tsx @@ -80,10 +80,10 @@ export default async function RootLayout({