frontend/stores/useMapStore.ts (view raw)
1import {ReactNode} from 'react';
2import {type LatLngExpression} from 'leaflet';
3import {CircleMarkerProps} from 'react-leaflet';
4import {create} from 'zustand';
5import {Travel} from '../generated/graphql';
6
7type State = {
8 map?: any;
9 preventUpdateKey: string;
10 center: LatLngExpression;
11 markers: Array<CircleMarkerProps & {popup: ReactNode, double: boolean}>;
12 focusedTravel?: string;
13 setMap: (map: any) => void;
14 setPreventUpdateKey: (preventUpdateKey: string) => void;
15 setCenter: (center: LatLngExpression) => void;
16 setMarkers: (markers: Array<CircleMarkerProps & {popup: ReactNode}>) => void;
17 setFocusOnTravel: (travel?: Travel & {id: string}) => void;
18};
19
20const useMapStore = create<State>((set, get) => ({
21 map: undefined,
22 preventUpdateKey: '',
23 center: [0, 0],
24 markers: [],
25 focusedTravel: undefined,
26 setMap: map => set({map}),
27 setPreventUpdateKey: preventUpdateKey => set({preventUpdateKey}),
28 setCenter: center => set({center}),
29 setMarkers: markers => set({markers}),
30 setFocusOnTravel: travel => {
31 if (!travel) {
32 set({focusedTravel: undefined});
33 } else {
34 set({focusedTravel: travel.id});
35 const lat = travel.meeting_latitude;
36 const long = travel.meeting_longitude;
37 if (lat && long) get().map?.panTo([lat, long]);
38 }
39 },
40}));
41
42export default useMapStore;