1
|
import {
|
2
|
Button,
|
3
|
Dialog,
|
4
|
DialogContent,
|
5
|
DialogTitle,
|
6
|
Stack,
|
7
|
TextField,
|
8
|
} from '@mui/material'
|
9
|
import { useFormik } from 'formik'
|
10
|
import { Fragment, FunctionComponent, useEffect, useState } from 'react'
|
11
|
import SendIcon from '@mui/icons-material/Send'
|
12
|
import ClearIcon from '@mui/icons-material/Clear'
|
13
|
import { PathDto } from '../../swagger/data-contracts'
|
14
|
import axiosInstance from '../../api/api'
|
15
|
import { useDispatch, useSelector } from 'react-redux'
|
16
|
import { showNotification } from '../Notification/notificationSlice'
|
17
|
import { RootState } from '../redux/store'
|
18
|
import { sendTextForProcessing } from './trackingToolThunks'
|
19
|
import * as yup from 'yup'
|
20
|
import { resetDialogApiCallSuccess } from './trackingToolSlice'
|
21
|
|
22
|
const PlaintextUpload = () => {
|
23
|
const loading = useSelector(
|
24
|
(state: RootState) => state.trackingTool.isLoading
|
25
|
)
|
26
|
const [open, setOpen] = useState(false) // controls whether the dialog is open
|
27
|
|
28
|
// This controls whether to keep dialog open after sending the request to the API
|
29
|
const dialogApiCallSuccess = useSelector(
|
30
|
(state: RootState) => state.trackingTool.dialogApiCallSuccess
|
31
|
)
|
32
|
|
33
|
const dispatch = useDispatch()
|
34
|
|
35
|
const validationSchema = yup.object().shape({
|
36
|
text: yup.mixed().required('Text is required'),
|
37
|
})
|
38
|
|
39
|
const formik = useFormik({
|
40
|
initialValues: {
|
41
|
text: '',
|
42
|
},
|
43
|
validationSchema,
|
44
|
onSubmit: async () => {
|
45
|
// Dispatch the thunk
|
46
|
dispatch(sendTextForProcessing(formik.values.text))
|
47
|
},
|
48
|
})
|
49
|
|
50
|
const onCloseDialog = () => {
|
51
|
formik.resetForm()
|
52
|
setOpen(false)
|
53
|
}
|
54
|
|
55
|
const resetForm = () => {
|
56
|
formik.resetForm()
|
57
|
}
|
58
|
|
59
|
useEffect(() => {
|
60
|
if (!dialogApiCallSuccess) {
|
61
|
return
|
62
|
}
|
63
|
dispatch(resetDialogApiCallSuccess())
|
64
|
setOpen(false)
|
65
|
}, [dialogApiCallSuccess, dispatch])
|
66
|
|
67
|
return (
|
68
|
<Fragment>
|
69
|
<Button variant="contained" onClick={() => setOpen(true)}>
|
70
|
Text
|
71
|
</Button>
|
72
|
<Dialog
|
73
|
open={open}
|
74
|
fullWidth={true}
|
75
|
onClose={onCloseDialog}
|
76
|
maxWidth="lg"
|
77
|
>
|
78
|
<DialogTitle>Plaintext Input</DialogTitle>
|
79
|
<DialogContent>
|
80
|
<form onSubmit={formik.handleSubmit}>
|
81
|
<TextField
|
82
|
sx={{ my: 2 }}
|
83
|
fullWidth
|
84
|
multiline
|
85
|
label="Plaintext input"
|
86
|
rows={10}
|
87
|
name="text"
|
88
|
value={formik.values.text}
|
89
|
onChange={formik.handleChange}
|
90
|
/>
|
91
|
<Stack
|
92
|
alignItems="flex-end"
|
93
|
justifyContent="flex-end"
|
94
|
spacing={2}
|
95
|
direction="row"
|
96
|
>
|
97
|
<Button
|
98
|
variant="contained"
|
99
|
color="secondary"
|
100
|
onClick={resetForm}
|
101
|
startIcon={<ClearIcon />}
|
102
|
>
|
103
|
Clear
|
104
|
</Button>
|
105
|
<Button
|
106
|
type="submit"
|
107
|
variant="contained"
|
108
|
startIcon={<SendIcon />}
|
109
|
disabled={loading}
|
110
|
>
|
111
|
Submit
|
112
|
</Button>
|
113
|
</Stack>
|
114
|
</form>
|
115
|
</DialogContent>
|
116
|
</Dialog>
|
117
|
</Fragment>
|
118
|
)
|
119
|
}
|
120
|
|
121
|
export default PlaintextUpload
|