1import {useEffect, useRef} from 'react';
 2import {CircleMarker} from 'react-leaflet';
 3import useMapStore from '../../../stores/useMapStore';
 4import TravelPopup from './TravelPopup';
 5import {TravelEntity} from '../../../generated/graphql';
 6import theme from '../../../theme';
 7
 8interface Props {
 9  travel: TravelEntity;
10  focused: boolean;
11}
12
13const TravelMarker = ({travel, focused}: Props) => {
14  const {meeting_longitude, meeting_latitude} = travel.attributes;
15  const setFocusOnTravel = useMapStore(s => s.setFocusOnTravel);
16  const markerRef = useRef(null);
17
18  useEffect(() => {
19    if (focused) markerRef.current?.openPopup();
20    else markerRef.current?.closePopup();
21  }, [focused]);
22
23  const markerStyle = {
24    radius: 12,
25    fillColor: theme.palette.primary.main,
26    color: theme.palette.background.paper,
27    fillOpacity: 1,
28    opacity: 1,
29    weight: 3,
30  };
31
32  const onClick = () => {
33    setFocusOnTravel(travel);
34    const travelCard = document?.getElementById(travel.id);
35    travelCard?.scrollIntoView({behavior: 'smooth'});
36  };
37
38  return (
39    <CircleMarker
40      ref={markerRef}
41      {...markerStyle}
42      center={[meeting_latitude, meeting_longitude]}
43      eventHandlers={{
44        click: onClick,
45      }}
46    >
47      <TravelPopup travel={travel} />
48    </CircleMarker>
49  );
50};
51
52export default TravelMarker;