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

import {
    Button,
    DialogContent,
    DialogTitle,
    Stack,
    TextField,
} from '@mui/material'
import { useFormik } from 'formik'
import { Fragment, useEffect, useState } from 'react'
import SendIcon from '@mui/icons-material/Send'
import ClearIcon from '@mui/icons-material/Clear'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '../../redux/store'
import { sendTextForProcessing } from '../trackingToolThunks'
import * as yup from 'yup'
import { resetDialogApiCallSuccess } from '../trackingToolSlice'
import ButtonOpenableDialog from '../../Reusables/ButtonOpenableDialog'
import TextSnippetIcon from '@mui/icons-material/TextSnippet'

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'),
    })

    // Form control
    const formik = useFormik({
        initialValues: {
            text: '',
        },
        validationSchema,
        onSubmit: async () => {
            // Dispatch the thunk
            dispatch(sendTextForProcessing(formik.values.text))
        },
    })

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

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

    useEffect(() => {
        if (!dialogApiCallSuccess) {
            return
        }
        dispatch(resetDialogApiCallSuccess())
        setOpen(false)
    }, [dialogApiCallSuccess, dispatch])

    return (
        <Fragment>
            <ButtonOpenableDialog
                open={open}
                setOpen={setOpen}
                maxWidth="lg"
                buttonColor="primary"
                buttonVariant="contained"
                buttonText="Text"
                startIcon={<TextSnippetIcon />}
                onCloseCallback={onCloseDialog}
            >
                <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"
                                startIcon={<SendIcon />}
                                disabled={loading}
                            >
                                Submit
                            </Button>
                        </Stack>
                    </form>
                </DialogContent>
            </ButtonOpenableDialog>
        </Fragment>
    )
}

export default PlaintextUpload