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

import { Paper } from '@mui/material'
import { Fragment, useCallback } from 'react'
import { DropResult } from 'react-beautiful-dnd'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '../../redux/store'
import { changeMarkerIdx } 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(
                changeMarkerIdx({
                    source: source.index,
                    destination: destination.index,
                })
            )
        },
        [dispatch]
    )

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

export default MapPointDraggableList