import moment, {Moment} from 'moment';
import {useEffect, useMemo} from 'react';
import useMapStore from '../../stores/useMapStore';
import dynamic from 'next/dynamic';
import {Event} from '../../generated/graphql';
const EventMarker = dynamic(() => import('../EventMarker'), {ssr: false});
const TravelMarker = dynamic(() => import('../TravelMarker'), {ssr: false});
interface Props {
event: Event & {id: string};
selectedDates: Moment[];
}
const useDisplayMarkers = ({event, selectedDates}: Props) => {
const setMarkers = useMapStore(s => s.setMarkers);
const setBounds = useMapStore(s => s.setBounds);
const focusedTravel = useMapStore(s => s.focusedTravel);
const travelsWithGeoloc = useMemo(() => {
const travels = event?.travels?.data || [];
const filteredTravels =
selectedDates.length >= 1
? travels.filter(travel => {
const departureDate = moment(travel?.attributes?.departureDate);
return selectedDates.some(date =>
date.isSame(departureDate, 'day')
);
})
: travels;
return filteredTravels.filter(
travel =>
travel.attributes.meeting_latitude &&
travel.attributes.meeting_longitude
);
}, [event, selectedDates]);
// Set markers
useEffect(() => {
let markers = [];
// Set event marker
const {latitude, longitude} = event || {};
if (latitude && longitude)
markers.push();
// Set travels markers
const travelMarkers = travelsWithGeoloc.map(travel => (
));
markers.push(...travelMarkers);
setMarkers(markers);
}, [event, travelsWithGeoloc, focusedTravel, setMarkers]);
// Set bounds
useEffect(() => {
let bounds = [];
// Set event bounds
const {latitude, longitude} = event || {};
if (latitude && longitude) bounds.push([latitude, longitude]);
// Set travels bounds
const travelCoords = travelsWithGeoloc.map(travel => [
travel.attributes.meeting_latitude,
travel.attributes.meeting_longitude,
]);
bounds.push(...travelCoords);
setBounds(bounds);
}, [event, travelsWithGeoloc, setBounds]);
};
export default useDisplayMarkers;