Revize 8c57f958

refactor to use Redux instead of localstate

re #9629

frontend/src/features/TrackingTool/PlaintextUpload.tsx

@@ -7 +7 @@
     TextField,
 } from '@mui/material'
 import { useFormik } from 'formik'
-import { Fragment, FunctionComponent, useState } from 'react'
+import { Fragment, FunctionComponent, useEffect, 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 { useDispatch, useSelector } from 'react-redux'
 import { showNotification } from '../Notification/notificationSlice'
+import { RootState } from '../redux/store'
+import { sendTextForProcessing } from './trackingToolThunks'
+import * as yup from 'yup'
+import { resetDialogApiCallSuccess } from './trackingToolSlice'
 
-export interface PlaintextUploadProps {
-    setPaths: React.Dispatch<React.SetStateAction<PathDto | undefined>>
-}
-
-const PlaintextUpload: FunctionComponent<PlaintextUploadProps> = ({
-    setPaths,
-}) => {
-    const [submitButtonDisabled, setSubmitButtonDisabled] = useState(false)
+const PlaintextUpload = () => {
+    const loading = useSelector(
+        (state: RootState) => state.trackingTool.isLoading
+    )
     const [open, setOpen] = useState(false) // controls whether the dialog is open
 
+    // This controls whether to keep dialog open after sending the request to the API
+    const dialogApiCallSuccess = useSelector(
+        (state: RootState) => state.trackingTool.dialogApiCallSuccess
+    )
+
     const dispatch = useDispatch()
 
+    const validationSchema = yup.object().shape({
+        text: yup.mixed().required('Text is required'),
+    })
+
     const formik = useFormik({
         initialValues: {
             text: '',
         },
+        validationSchema,
         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
-                }
-            } catch (err: any) {
-                dispatch(showNotification)
-                closeDialog = true
-            }
-            setSubmitButtonDisabled(false)
-
-            if (closeDialog) {
-                onCloseDialog()
-            }
+            // Dispatch the thunk
+            dispatch(sendTextForProcessing(formik.values.text))
         },
     })
 
@@ -78 +56 @@
         formik.resetForm()
     }
 
+    useEffect(() => {
+        if (!dialogApiCallSuccess) {
+            return
+        }
+        dispatch(resetDialogApiCallSuccess())
+        setOpen(false)
+    }, [dialogApiCallSuccess, dispatch])
+
     return (
         <Fragment>
             <Button variant="contained" onClick={() => setOpen(true)}>
@@ -119 +105 @@
                             <Button
                                 type="submit"
                                 variant="contained"
-                                disabled={submitButtonDisabled}
                                 startIcon={<SendIcon />}
+                                disabled={loading}
                             >
                                 Submit
                             </Button>