aswi2022code-of-duty-gitlab/frontend/src/features/TrackingTool/PlaintextUpload.tsx @ b70813cb

import {
    Button,
    Dialog,
    DialogContent,
    DialogTitle,
    Stack,
    TextField,
} from '@mui/material'
import { useFormik } from 'formik'
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 formik = useFormik({
        initialValues: {
            text: '',
        },
        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()
            }
        },
    })

    const onCloseDialog = () => {
        formik.resetForm()
        setOpen(false)
    }

    const resetForm = () => {
        formik.resetForm()
    }

    return (
        <Fragment>
            <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.handleSubmit}>
                        <TextField
                            sx={{ my: 2 }}
                            fullWidth
                            multiline
                            label="Plaintext input"
                            rows={10}
                            name="text"
                            value={formik.values.text}
                            onChange={formik.handleChange}
                        />
                        <Stack
                            alignItems="flex-end"
                            justifyContent="flex-end"
                            spacing={2}
                            direction="row"
                        >
                            <Button
                                variant="contained"
                                color="secondary"
                                onClick={resetForm}
                                startIcon={<ClearIcon />}
                            >
                                Clear
                            </Button>
                            <Button
                                type="submit"
                                variant="contained"
                                disabled={submitButtonDisabled}
                                startIcon={<SendIcon />}
                            >
                                Submit
                            </Button>
                        </Stack>
                    </form>
                </DialogContent>
            </Dialog>
        </Fragment>
    )
}

export default PlaintextUpload