aswi2022code-of-duty-gitlab/frontend/src/features/TrackingTool/Controls/MapPointDraggableList.tsx @ 48690561

import { Paper } from '@mui/material'
import { useCallback } from 'react'
import { DropResult } from 'react-beautiful-dnd'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '../../redux/store'
import { moveMarkerToDestination } from '../trackingToolSlice'
import DragDropCtxWrapper from './DragDropCtxWrapper'

const MapPointDraggableList = () => {
    const dispatch = useDispatch()
    const path = useSelector(
        (state: RootState) => state.trackingTool.displayedPath
    )
    const onDragEnd = useCallback(
        ({ destination, source }: DropResult) => {
            if (!destination || !source || destination.index === source.index) {
                return
            }

            dispatch(
                moveMarkerToDestination({
                    source: source.index,
                    destination: destination.index,
                })
            )
        },
        [dispatch]
    )

    return (
        <Paper variant="outlined">
            <DragDropCtxWrapper items={path ?? []} onDragEnd={onDragEnd} />
        </Paper>
    )
}

export default MapPointDraggableList