aswi2022code-of-duty-gitlab/frontend/src/features/TrackingTool/Upload/GeoJsonImportDialog.tsx @ 7aa6893d

import { Button, Dialog, DialogContent, DialogTitle } from '@mui/material'
import { useFormik } from 'formik'
import { Fragment, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '../../redux/store'
import ButtonOpenableDialog from '../../Reusables/ButtonOpenableDialog'
import { PathVariant } from '../pathUtils'
import * as yup from 'yup'
import { showNotification } from '../../Notification/notificationSlice'
import SingleFileSelectionForm from '../../Reusables/SingleFileSelectionForm'
import { mergeWithCurrentPath } from '../trackingToolSlice'
import { parseGeoJsonToPathVariant } from './GeoJsonIo'

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

    const [filename, setFilename] = useState<string | undefined>(undefined)
    const [fileProcessing, setFileProcessing] = useState(false)
    const [open, setOpen] = useState(false)

    const validationSchema = yup.object().shape({
        file: yup.mixed().required('File is required'),
    })

    const initialValues: { file?: File } = {
        file: undefined,
    }

    // Callback when user selects the file
    const onFileSelected = (event: any) => {
        const file = event.currentTarget.files[0]
        if (file) {
            setFilename(file.name)
            formik.setFieldValue('file', file)
        }
    }

    const onClose = () => {
        if (fileProcessing) {
            return
        }
        setFilename(undefined)
        formik.resetForm()
        setOpen(false)
    }

    const onClearSelectedFile = () => {
        setFilename(undefined)
        formik.setFieldValue('file', undefined)
    }

    const formik = useFormik({
        initialValues,
        validationSchema,
        onSubmit: async (values) => {
            setFileProcessing(true)
            const reader = new FileReader()
            reader.readAsText(values.file as File)
            reader.onload = async () => {
                try {
                    const pathVariant = parseGeoJsonToPathVariant(reader.result as string)
                    console.log(pathVariant)
                    // Merge current path variant with the new one
                    dispatch(mergeWithCurrentPath(pathVariant))
                    onClose()
                } catch (e: any) {
                    dispatch(
                        showNotification({
                            message: e.message,
                            // message: 'Error importing GeoJson, the file has invalid format',
                            severity: 'error',
                            autohideSecs: 5,
                        })
                    )
                }
                setFileProcessing(false)
            }
        },
    })

    return (
        <ButtonOpenableDialog
            buttonText="Import"
            buttonColor="primary"
            buttonVariant="contained"
            onCloseCallback={onClose}
            maxWidth="xs"
            open={open}
            setOpen={setOpen}
        >
            <DialogTitle>Import Path</DialogTitle>
            <DialogContent>
                <SingleFileSelectionForm
                    onFileSelected={onFileSelected}
                    onClearSelectedFile={onClearSelectedFile}
                    filename={filename}
                    formik={formik}
                />
            </DialogContent>
        </ButtonOpenableDialog>
    )
}

export default GeoJsonImportDialog