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

import { Checkbox, FormControlLabel, Stack, Typography } from '@mui/material'
import { useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '../../redux/store'
import { updateDisplayedPath } from '../trackingToolSlice'
import { MapPointType } from '../trackingToolUtils'

// Component which controls what type of map points are enabled and disabled
const MapPointToggleables = () => {
    const dispatch = useDispatch()
    const path = useSelector((state: RootState) => state.trackingTool.displayedPath)

    // keep track of the state of the checkboxes
    const [enableMap, setEnableMap] = useState({
        [MapPointType.LocalCatalog]: true,
        [MapPointType.FromCoordinates]: true,
        [MapPointType.GeoJson]: true,
        [MapPointType.ExternalCatalog]: true,
    })

    // Disables specific feature
    const toggleFeature = (feature: MapPointType) => {
        if (!path) {
            return
        }
        setEnableMap({ ...enableMap, [feature]: !enableMap[feature] })
        const newPath = path.map((point) => {
            // if the point is the feature we are disabling, set it to as so, skip otherwise
            if (point.type === feature) {
                return {
                    ...point,
                    hidden: enableMap[point.type],
                    addToPath: !enableMap[point.type] ? true : point.addToPath,
                }
            }

            return point
        })
        dispatch(updateDisplayedPath(newPath))
    }

    return (
        <Stack direction="column">
            <Stack direction="row" justifyItems="space-between">
                <Typography align="left" variant="h6" sx={{ mr: 1 }}>
                    From file
                </Typography>
                <FormControlLabel
                    control={
                        <Checkbox
                            checked={enableMap[MapPointType.GeoJson]}
                            onChange={() => toggleFeature(MapPointType.GeoJson)}
                        />
                    }
                    label="Show All"
                />
            </Stack>
            <Stack direction="row" justifyItems="space-between">
                <Typography align="left" variant="h6" sx={{ mr: 1 }}>
                    From local catalog
                </Typography>
                <FormControlLabel
                    control={
                        <Checkbox
                            checked={enableMap[MapPointType.LocalCatalog]}
                            onChange={() =>
                                toggleFeature(MapPointType.LocalCatalog)
                            }
                        />
                    }
                    label="Show All"
                />
            </Stack>
            <Stack direction="row" justifyItems="space-between">
                <Typography align="left" variant="h6" sx={{ mr: 1 }}>
                    From coordinates
                </Typography>
                <FormControlLabel
                    control={
                        <Checkbox
                            checked={enableMap[MapPointType.FromCoordinates]}
                            onChange={() =>
                                toggleFeature(MapPointType.FromCoordinates)
                            }
                        />
                    }
                    label="Show All"
                />
            </Stack>
            <Stack direction="row" justifyItems="space-between">
                <Typography align="left" variant="h6" sx={{ mr: 1 }}>
                    From external catalog
                </Typography>
                <FormControlLabel
                    control={
                        <Checkbox
                            checked={enableMap[MapPointType.ExternalCatalog]}
                            onChange={() =>
                                toggleFeature(MapPointType.ExternalCatalog)
                            }
                        />
                    }
                    label="Show All"
                />
            </Stack>
        </Stack>
    )
}

export default MapPointToggleables