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  markers: Array<ReactNode>;
 9  focusedTravel?: string;
10  bounds: Array<LatLngExpression>;
11  setMap: (map: any) => void;
12  setMarkers: (markers: Array<ReactNode>) => void;
13  setFocusOnTravel: (travel?: TravelEntity) => void;
14  setBounds: (bounds: Array<LatLngExpression>) => void;
15};
16
17const useMapStore = create<State>((set, get) => ({
18  map: undefined,
19  markers: [],
20  focusedTravel: undefined,
21  bounds: [],
22  setMap: map => set({map}),
23  setMarkers: markers => set({markers}),
24  setFocusOnTravel: travel => {
25    const currentFocusId = get().focusedTravel;
26    if (!travel || travel.id === currentFocusId)
27      set({focusedTravel: undefined});
28    else {
29      set({focusedTravel: travel.id});
30      const lat = travel.attributes?.meeting_latitude;
31      const long = travel.attributes?.meeting_longitude;
32      if (lat && long) get().map?.panTo([lat, long]);
33    }
34  },
35  setBounds: bounds => {
36    set({bounds});
37  },
38}));
39
40export default useMapStore;