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