Sync list to map (#42)

This commit is contained in:
Timothy Armes
2023-07-05 13:36:12 +02:00
parent 1715b1646b
commit deace43225
8 changed files with 48 additions and 10 deletions
+14 -2
View File
@@ -1,10 +1,13 @@
import { Tournament } from '@/types';
import { atom } from 'jotai';
import { LatLngBounds } from 'leaflet';
import atomWithDebounce from "@/utils/atomWithDebounce";
export const tournamentsAtom = atom<Tournament[]>([]);
export const searchStringAtom = atom('');
export const mapBoundsAtom = atom<LatLngBounds | null>(null);
export const syncVisibleAtom = atom(true);
export const {
currentValueAtom: hoveredMapTournamentIdAtom,
@@ -18,7 +21,16 @@ export const {
export const filteredTournamentsAtom = atom((get) => {
const tournaments = get(tournamentsAtom);
const searchString = get(searchStringAtom).trim();
const mapBounds = get(mapBoundsAtom);
const syncVisible = get(syncVisibleAtom);
if (searchString === '') return tournaments;
return tournaments.filter((t) => t.town.includes(searchString.toUpperCase()))
// When searching, we search all the tournament, regardless of the map display
if (searchString !== '')
return tournaments.filter((t) => t.town.includes(searchString.toUpperCase()))
// If we not syncing to the map, return all tournaments
if (mapBounds === null || !syncVisible) return tournaments;
// Filter by those in the current map bounds
return tournaments.filter(tournament => mapBounds.contains({ lat: tournament.coordinates[0], lng: tournament.coordinates[1]}))
})