aswi2022code-of-duty-gitlab/frontend/src/features/TrackingTool/Upload/GeoJsonExportButton.tsx @ a7ae217f

import { Button } from '@mui/material'
import { useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
import { RootState } from '../../redux/store'
import { isMapPointDisplayable, PathVariant } from '../pathUtils'
import { exportAsGeoJsonString } from './GeoJsonIo'

const GeoJsonExportButton = () => {
    const [path, setPath] = useState<PathVariant | undefined>(undefined)
    const primaryPathIdx = useSelector(
        (state: RootState) => state.trackingTool.primaryPathIdx
    )
    const pathVariants = useSelector(
        (state: RootState) => state.trackingTool.pathVariants
    )
    useEffect(() => {
        if (
            !pathVariants ||
            pathVariants.length === 0 ||
            pathVariants.length <= primaryPathIdx
        ) {
            setPath(undefined)
            return
        }

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

    const exportPath = () => {
        if (!path) {
            return
        }

        const exportPath = path.filter(
            (vertex) => isMapPointDisplayable(vertex) && vertex.active
        )
        const exportPathString = exportAsGeoJsonString(exportPath)
        const blob = new Blob([exportPathString], { type: 'application/json' })
        const url = window.URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', 'path.json')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
    }

    return (
        <Button variant="contained" onClick={exportPath}>
            Export
        </Button>
    )
}

export default GeoJsonExportButton