1import moment, {Moment} from 'moment';
 2import {useEffect, useMemo} from 'react';
 3import useMapStore from '../../stores/useMapStore';
 4import dynamic from 'next/dynamic';
 5import {Event} from '../../generated/graphql';
 6
 7const EventMarker = dynamic(() => import('../EventMarker'), {ssr: false});
 8const TravelMarker = dynamic(() => import('../TravelMarker'), {ssr: false});
 9
10interface Props {
11  event: Event & {id: string};
12  selectedDates: Moment[];
13}
14
15const useDisplayMarkers = ({event, selectedDates}: Props) => {
16  const setMarkers = useMapStore(s => s.setMarkers);
17  const setBounds = useMapStore(s => s.setBounds);
18  const focusedTravel = useMapStore(s => s.focusedTravel);
19
20  const travelsWithGeoloc = useMemo(() => {
21    const travels = event?.travels?.data || [];
22    const filteredTravels =
23      selectedDates.length >= 1
24        ? travels.filter(travel => {
25            const departureDate = moment(travel?.attributes?.departureDate);
26            return selectedDates.some(date =>
27              date.isSame(departureDate, 'day')
28            );
29          })
30        : travels;
31
32    return filteredTravels.filter(
33      travel =>
34        travel.attributes.meeting_latitude &&
35        travel.attributes.meeting_longitude
36    );
37  }, [event, selectedDates]);
38
39  // Set markers
40  useEffect(() => {
41    let markers = [];
42
43    // Set event marker
44    const {latitude, longitude} = event || {};
45    if (latitude && longitude)
46      markers.push(<EventMarker key="event" event={event} />);
47
48    // Set travels markers
49    const travelMarkers = travelsWithGeoloc.map(travel => (
50      <TravelMarker
51        key={travel.id}
52        travel={travel}
53        focused={focusedTravel === travel.id}
54      />
55    ));
56    markers.push(...travelMarkers);
57
58    setMarkers(markers);
59  }, [event, travelsWithGeoloc, focusedTravel, setMarkers]);
60
61  // Set bounds
62  useEffect(() => {
63    let bounds = [];
64
65    // Set event bounds
66    const {latitude, longitude} = event || {};
67    if (latitude && longitude) bounds.push([latitude, longitude]);
68
69    // Set travels bounds
70    const travelCoords = travelsWithGeoloc.map(travel => [
71      travel.attributes.meeting_latitude,
72      travel.attributes.meeting_longitude,
73    ]);
74    bounds.push(...travelCoords);
75
76    setBounds(bounds);
77  }, [event, travelsWithGeoloc, setBounds]);
78};
79
80export default useDisplayMarkers;