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