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

import { Paper } from '@mui/material'
import { useEffect, useState, 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 { PathVariant } from '../trackingToolUtils'
import DragDropCtxWrapper from './DragDropCtxWrapper'

const MapPointDraggableList = () => {
    const dispatch = useDispatch()

    // List of all paths
    const paths = useSelector(
        (state: RootState) => state.trackingTool.pathVariants
    )

    // Primary path index - i.e. the selected path
    const primaryPathIdx = useSelector(
        (state: RootState) => state.trackingTool.primaryPathIdx
    )

    // Selected path as local state
    const [path, setPath] = useState<PathVariant | undefined>()

    // Set localstate path whenever it changes in the store
    useEffect(() => {
        if (!paths || paths.length < primaryPathIdx) {
            setPath(undefined)
            return
        }

        setPath(paths[primaryPathIdx])
    }, [paths, primaryPathIdx])

    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