Revize dda6e56e

Send text query to the api

re #9629

frontend/src/features/TrackingTool/PlaintextUpload.tsx

@@ -1 +1 @@
 import {
     Button,
+    Dialog,
     DialogContent,
     DialogTitle,
     Stack,
     TextField,
 } from '@mui/material'
 import { useFormik } from 'formik'
-import { Fragment } from 'react'
-import ButtonOpenableDialog from '../Reusables/ButtonOpenableDialog'
+import { Fragment, FunctionComponent, useState } from 'react'
 import SendIcon from '@mui/icons-material/Send'
 import ClearIcon from '@mui/icons-material/Clear'
+import { PathDto } from '../../swagger/data-contracts'
+import axiosInstance from '../../api/api'
+import { useDispatch } from 'react-redux'
+import { showNotification } from '../Notification/notificationSlice'
+
+export interface PlaintextUploadProps {
+    setPaths: React.Dispatch<React.SetStateAction<PathDto | undefined>>
+}
+
+const PlaintextUpload: FunctionComponent<PlaintextUploadProps> = ({
+    setPaths,
+}) => {
+    const [submitButtonDisabled, setSubmitButtonDisabled] = useState(false)
+    const [open, setOpen] = useState(false) // controls whether the dialog is open
+
+    const dispatch = useDispatch()
 
-const PlaintextUpload = () => {
     const formik = useFormik({
         initialValues: {
             text: '',
         },
-        onSubmit: () => {
+        onSubmit: async () => {
+            let closeDialog = false
+            setSubmitButtonDisabled(true)
+            try {
+                const { data, status } = await axiosInstance.post('path', {
+                    text: formik.values.text,
+                })
+
+                if (status !== 200) {
+                    dispatch(
+                        showNotification({
+                            message:
+                                'Error while fetching map, please try again later.',
+                            severity: 'error',
+                        })
+                    )
+                } else {
+                    dispatch(
+                        showNotification({
+                            message: 'Map fetched successfully.',
+                            severity: 'success',
+                        })
+                    )
+                    setPaths(data)
+                    closeDialog = true
+                    console.log(data)
+                }
+            } catch (err: any) {
+                dispatch(showNotification)
+                closeDialog = true
+            }
+            setSubmitButtonDisabled(false)
+
+            if (closeDialog) {
+                onCloseDialog()
+            }
         },
     })
 
+    const onCloseDialog = () => {
+        formik.resetForm()
+        setOpen(false)
+    }
+
     const resetForm = () => {
         formik.resetForm()
     }
 
     return (
         <Fragment>
-            <ButtonOpenableDialog
-                buttonText="Plaintext"
-                buttonColor="primary"
-                buttonVariant="contained"
+            <Button variant="contained" onClick={() => setOpen(true)}>
+                Text
+            </Button>
+            <Dialog
+                open={open}
+                fullWidth={true}
+                onClose={onCloseDialog}
+                maxWidth="lg"
             >
                 <DialogTitle>Plaintext Input</DialogTitle>
                 <DialogContent>
-                    <form onSubmit={formik.handleChange}>
+                    <form onSubmit={formik.handleSubmit}>
                         <TextField
                             sx={{ my: 2 }}
                             fullWidth
@@ -58 +117 @@
                             >
                                 Clear
                             </Button>
-                            <Button type="submit" variant="contained" startIcon={<SendIcon />}>
+                            <Button
+                                type="submit"
+                                variant="contained"
+                                disabled={submitButtonDisabled}
+                                startIcon={<SendIcon />}
+                            >
                                 Submit
                             </Button>
                         </Stack>
                     </form>
                 </DialogContent>
-            </ButtonOpenableDialog>
+            </Dialog>
         </Fragment>
     )
 }