Filtering by zone

src/app/[locale]/(main)/clubs/ClubMap.tsx

@@ -1,22 +1,20 @@
 "use client";
 
-import { useCallback, useMemo } from "react";
+import { useMemo } from "react";
 
 import { useAtomValue } from "jotai";
-import L, { LatLngLiteral } from "leaflet";
 import "leaflet-defaulticon-compatibility";
 import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
 import "leaflet.smooth_marker_bouncing";
 import "leaflet/dist/leaflet.css";
-import { countBy, groupBy } from "lodash";
 
-import { clubsAtom } from "@/atoms";
+import { filteredClubsByZoneAtom } from "@/atoms";
 import { Map, MapMarker } from "@/components/Map";
 
 import { ClubMarker } from "./ClubMarker";
 
 const ClubMap = () => {
-  const clubs = useAtomValue(clubsAtom);
+  const clubs = useAtomValue(filteredClubsByZoneAtom);
 
   const markers: MapMarker[] = useMemo(
     () =>

src/app/[locale]/(main)/clubs/ClubTable.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect } from "react";
 
-import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import { useAtomValue, useSetAtom } from "jotai";
 import { useTranslations } from "next-intl";
 import { FaExternalLinkAlt } from "react-icons/fa";
 import { twMerge } from "tailwind-merge";
@@ -12,17 +12,15 @@ import {
   debouncedHoveredMapIdAtom,
   filteredClubsListAtom,
   hoveredMapIdAtom,
-  syncVisibleAtom,
 } from "@/atoms";
+import { RegionSelect } from "@/components/RegionSelect";
 import SearchBar from "@/components/SearchBar";
 import { useBreakpoint } from "@/hooks/tailwind";
 
 const ClubTable = () => {
   const t = useTranslations("Clubs");
-  const at = useTranslations("App");
 
   const filteredClubs = useAtomValue(filteredClubsListAtom);
-  const [syncVisible, setSyncVisible] = useAtom(syncVisibleAtom);
   const hoveredMapId = useAtomValue(hoveredMapIdAtom);
   const debouncedHoveredMapId = useAtomValue(debouncedHoveredMapIdAtom);
   const setHoveredListId = useSetAtom(debouncedHoveredListIdAtom);
@@ -45,18 +43,12 @@ const ClubTable = () => {
     >
       <div className="z-10 flex w-full flex-wrap items-center justify-between gap-3 p-3">
         <SearchBar />
-
-        <div className="flex flex-col gap-0 text-gray-900 dark:text-white">
-          <label>
-            <input
-              type="checkbox"
-              className="mr-2 h-4 w-4 rounded border-gray-400 text-primary focus:ring-primary"
-              checked={syncVisible}
-              onChange={() => setSyncVisible(!syncVisible)}
-            />
-            {t("syncWithMapCheckbox")}
-          </label>
-        </div>
+        <RegionSelect
+          classNameOverrides={{
+            container: () => "flex flex-1",
+          }}
+        />
+        <div className="flex flex-col gap-0 text-gray-900 dark:text-white"></div>
       </div>
 
       <div className="overflow-x-scroll bg-red-50">

src/app/[locale]/(main)/tournaments/Legend.tsx

@@ -5,14 +5,14 @@ import L from "leaflet";
 import { useTranslations } from "next-intl";
 import { useMap } from "react-leaflet";
 
-import { filteredTournamentsByTimeControlAtom } from "@/atoms";
+import { filteredTournamentsByTimeControlAndZoneAtom } from "@/atoms";
 import { TimeControlColours } from "@/constants";
 import { TimeControl } from "@/types";
 
 const Legend = () => {
   const at = useTranslations("App");
   const map = useMap();
-  const tournaments = useAtomValue(filteredTournamentsByTimeControlAtom);
+  const tournaments = useAtomValue(filteredTournamentsByTimeControlAndZoneAtom);
 
   const timeControls = useMemo(
     () =>

src/app/[locale]/(main)/tournaments/TournamentMap.tsx

@@ -10,7 +10,10 @@ import "leaflet.smooth_marker_bouncing";
 import "leaflet/dist/leaflet.css";
 import { countBy, groupBy } from "lodash";
 
-import { filteredTournamentsByTimeControlAtom, normsOnlyAtom } from "@/atoms";
+import {
+  filteredTournamentsByTimeControlAndZoneAtom,
+  normsOnlyAtom,
+} from "@/atoms";
 import { Map, MapMarker } from "@/components/Map";
 import { TimeControlColours } from "@/constants";
 import { generatePieSVG } from "@/lib/pie";
@@ -21,7 +24,7 @@ import TimeControlFilters from "./TimeControlFilters";
 import { TournamentMarker } from "./TournamentMarker";
 
 const TournamentMap = () => {
-  const tournaments = useAtomValue(filteredTournamentsByTimeControlAtom);
+  const tournaments = useAtomValue(filteredTournamentsByTimeControlAndZoneAtom);
   const normsOnly = useAtomValue(normsOnlyAtom);
 
   const filteredTournaments = useMemo(

src/app/[locale]/(main)/tournaments/TournamentTable.tsx

@@ -18,9 +18,11 @@ import {
   filteredTournamentsListAtom,
   hoveredMapIdAtom,
   normsOnlyAtom,
-  syncVisibleAtom,
+  regionFilterAtom,
 } from "@/atoms";
+import { RegionSelect } from "@/components/RegionSelect";
 import SearchBar from "@/components/SearchBar";
+import { Select } from "@/components/form/Select";
 import { useBreakpoint } from "@/hooks/tailwind";
 import useDatePickerWidth from "@/hooks/useDatePickerWidth";
 import { DatePickerDirection } from "@/types";
@@ -36,7 +38,6 @@ const TournamentTable = () => {
 
   const filteredTournaments = useAtomValue(filteredTournamentsListAtom);
 
-  const [syncVisible, setSyncVisible] = useAtom(syncVisibleAtom);
   const [normsOnly, setNormsOnly] = useAtom(normsOnlyAtom);
   const hoveredMapId = useAtomValue(hoveredMapIdAtom);
   const debouncedHoveredMapId = useAtomValue(debouncedHoveredMapIdAtom);
@@ -87,16 +88,6 @@ const TournamentTable = () => {
         />
 
         <div className="flex flex-col gap-0 text-gray-900 dark:text-white">
-          <label>
-            <input
-              type="checkbox"
-              className="mr-2 h-4 w-4 rounded border-gray-400 text-primary focus:ring-primary"
-              checked={syncVisible}
-              onChange={() => setSyncVisible(!syncVisible)}
-            />
-            {t("syncWithMapCheckbox")}
-          </label>
-
           <label>
             <input
               type="checkbox"
@@ -111,6 +102,8 @@ const TournamentTable = () => {
         <div className="hidden lg:block">
           <TimeControlFilters />
         </div>
+
+        <RegionSelect />
       </div>
 
       <div className="flex justify-center" ref={datePickerRef}>