aswi2022code-of-duty-gitlab/frontend/src/features/TrackingTool/Map/MapMarker.tsx @ c0b66eaf

import L, { LatLngTuple, Marker as MarkerPOJO } from 'leaflet'
import { FunctionComponent, ReactNode, useMemo, useRef, useState } from 'react'
import { Marker } from 'react-leaflet'
import {
    getMapPointIcon,
    MapPoint,
} from '../trackingToolUtils'

export interface MapMarkerProps {
    position: LatLngTuple
    children?: ReactNode
    mapPoint: MapPoint
    color?: 'external' | 'disabled' | 'localCatalog'
    updatePositionCallbackFn: (position: LatLngTuple) => void // Callback function to notify MapPath to rerender the path
}

// Custom Map Marker component
const MapMarker: FunctionComponent<MapMarkerProps> = ({
    position,
    children,
    updatePositionCallbackFn,
    mapPoint,
}) => {
    const [currentPosition, setCurrentPosition] = useState(position)
    const markerRef = useRef<MarkerPOJO | null>(null)
    const eventHandlers = useMemo(
        () => ({
            dragend: () => {
                const marker = markerRef.current
                console.log(markerRef)
                if (!marker) {
                    return
                }
                const latlng = marker.getLatLng()
                setCurrentPosition([latlng.lat, latlng.lng])
                updatePositionCallbackFn([latlng.lat, latlng.lng])
            },
        }),
        [updatePositionCallbackFn]
    )

    return (
        <Marker
            draggable={true}
            position={currentPosition}
            icon={getMapPointIcon(mapPoint)}
            eventHandlers={eventHandlers}
            ref={markerRef}
        >
            {children}
        </Marker>
    )
}

export default MapMarker