aswi2022code-of-duty-gitlab/frontend/src/features/TrackingTool/DraggableList/DraggableMarkerList.tsx @ 812b9f90

import { Paper } from '@mui/material'
import { useEffect, useState } from 'react'
import { DropResult } from 'react-beautiful-dnd'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '../../redux/store'
import { swapMapMarkerIndices } from '../trackingToolSlice'
import { PathVariant } from '../Map/pathUtils'
import DraggableList from './DraggableList'

const DraggableMarkerList = () => {
    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 = ({ destination, source }: DropResult) => {
        if (!destination || !source || destination.index === source.index) {
            return
        }

        dispatch(
            swapMapMarkerIndices({
                source: source.index,
                destination: destination.index,
            })
        )
    }

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

export default DraggableMarkerList