frontend/containers/TravelMarker/index.tsx (view raw)
1import {useRef} from 'react';
2import {CircleMarker} from 'react-leaflet';
3import {useTheme} from '@mui/material';
4import useMapStore from '../../stores/useMapStore';
5import TravelPopup from './TravelPopup';
6import {Travel} from '../../generated/graphql';
7
8interface Props {
9 travel: Travel & {id: string};
10 focused: boolean;
11}
12
13const TravelMarker = ({travel, focused}: Props) => {
14 const {meeting_longitude, meeting_latitude} = travel;
15 const {setFocusOnTravel} = useMapStore();
16 const markerRef = useRef(null);
17 const theme = useTheme();
18 const marker = markerRef.current;
19
20 if (marker && focused) {
21 marker.openPopup();
22 }
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;