Filtering by zone

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}>