1
|
import { DialogContent, DialogTitle } from '@mui/material'
|
2
|
import { useFormik } from 'formik'
|
3
|
import { useState } from 'react'
|
4
|
import { useDispatch } from 'react-redux'
|
5
|
import ButtonOpenableDialog from '../../Reusables/ButtonOpenableDialog'
|
6
|
import * as yup from 'yup'
|
7
|
import { showNotification } from '../../Notification/notificationSlice'
|
8
|
import SingleFileSelectionForm from '../../Reusables/SingleFileSelectionForm'
|
9
|
import { mergeWithCurrentPath } from '../trackingToolSlice'
|
10
|
import { parseGeoJsonToPathVariant } from './GeoJsonIo'
|
11
|
|
12
|
const GeoJsonImportDialog = () => {
|
13
|
const dispatch = useDispatch()
|
14
|
|
15
|
const [filename, setFilename] = useState<string | undefined>(undefined)
|
16
|
const [fileProcessing, setFileProcessing] = useState(false)
|
17
|
const [open, setOpen] = useState(false)
|
18
|
|
19
|
const validationSchema = yup.object().shape({
|
20
|
file: yup.mixed().required('File is required'),
|
21
|
})
|
22
|
|
23
|
const initialValues: { file?: File } = {
|
24
|
file: undefined,
|
25
|
}
|
26
|
|
27
|
// Callback when user selects the file
|
28
|
const onFileSelected = (event: any) => {
|
29
|
const file = event.currentTarget.files[0]
|
30
|
if (file) {
|
31
|
setFilename(file.name)
|
32
|
formik.setFieldValue('file', file)
|
33
|
}
|
34
|
}
|
35
|
|
36
|
const onClose = () => {
|
37
|
if (fileProcessing) {
|
38
|
return
|
39
|
}
|
40
|
setFilename(undefined)
|
41
|
formik.resetForm()
|
42
|
setOpen(false)
|
43
|
}
|
44
|
|
45
|
const onClearSelectedFile = () => {
|
46
|
setFilename(undefined)
|
47
|
formik.setFieldValue('file', undefined)
|
48
|
}
|
49
|
|
50
|
const formik = useFormik({
|
51
|
initialValues,
|
52
|
validationSchema,
|
53
|
onSubmit: async (values) => {
|
54
|
setFileProcessing(true)
|
55
|
const reader = new FileReader()
|
56
|
reader.readAsText(values.file as File)
|
57
|
reader.onload = async () => {
|
58
|
try {
|
59
|
const pathVariant = parseGeoJsonToPathVariant(
|
60
|
reader.result as string
|
61
|
)
|
62
|
// Merge current path variant with the new one
|
63
|
dispatch(mergeWithCurrentPath(pathVariant))
|
64
|
onClose()
|
65
|
} catch (e: any) {
|
66
|
dispatch(
|
67
|
showNotification({
|
68
|
message: e.message,
|
69
|
// message: 'Error importing GeoJson, the file has invalid format',
|
70
|
severity: 'error',
|
71
|
autohideSecs: 5,
|
72
|
})
|
73
|
)
|
74
|
}
|
75
|
setFileProcessing(false)
|
76
|
}
|
77
|
},
|
78
|
})
|
79
|
|
80
|
return (
|
81
|
<ButtonOpenableDialog
|
82
|
buttonText="Import"
|
83
|
buttonColor="primary"
|
84
|
buttonVariant="contained"
|
85
|
onCloseCallback={onClose}
|
86
|
maxWidth="xs"
|
87
|
open={open}
|
88
|
setOpen={setOpen}
|
89
|
>
|
90
|
<DialogTitle>Import Path</DialogTitle>
|
91
|
<DialogContent>
|
92
|
<SingleFileSelectionForm
|
93
|
onFileSelected={onFileSelected}
|
94
|
onClearSelectedFile={onClearSelectedFile}
|
95
|
filename={filename}
|
96
|
formik={formik}
|
97
|
/>
|
98
|
</DialogContent>
|
99
|
</ButtonOpenableDialog>
|
100
|
)
|
101
|
}
|
102
|
|
103
|
export default GeoJsonImportDialog
|