aswi2022code-of-duty-gitlab/frontend/src/features/TrackingTool/Upload/FileUpload.tsx @ 08854c45

import {
    Button,
    DialogContent,
    DialogTitle,
    Link,
    Stack,
    Typography,
} from '@mui/material'
import { useFormik } from 'formik'
import { Fragment, useState } from 'react'
import * as yup from 'yup'
import axiosInstance from '../../../api/api'
import ButtonOpenableDialog from '../../Reusables/ButtonOpenableDialog'
import { useDispatch } from 'react-redux'
import { sendTextForProcessing } from '../trackingToolThunks'
import SingleFileSelectionForm from '../../Reusables/SingleFileSelectionForm'
import AttachFileIcon from '@mui/icons-material/AttachFile'
import TextSnippetIcon from '@mui/icons-material/TextSnippet'

interface UploadValues {
    file?: File
}

const initialValues: UploadValues = {}

const FileUpload = () => {
    const dispatch = useDispatch()

    const [filename, setFilename] = useState<string | undefined>(undefined)
    const [fileProcessing, setFileProcessing] = useState(false)
    const [open, setOpen] = useState(false)

    const validationSchema = yup.object().shape({
        file: yup.mixed().required('File is required'),
    })

    const formik = useFormik({
        initialValues,
        validationSchema,
        onSubmit: async (values) => {
            setFileProcessing(true)
            const reader = new FileReader()
            reader.readAsText(values.file as File)
            reader.onload = async () => {
                dispatch(sendTextForProcessing(reader.result as string))
                setFileProcessing(false)
            }
        },
    })

    // Callback when user selects the file
    const onFileSelected = (event: any) => {
        const file = event.currentTarget.files[0]
        if (file) {
            setFilename(file.name)
            formik.setFieldValue('file', file)
        }
    }

    const onClose = () => {
        if (fileProcessing) {
            return
        }
        setFilename(undefined)
        formik.resetForm()
    }

    const onClearSelectedFile = () => {
        setFilename(undefined)
        formik.setFieldValue('file', undefined)
    }

    return (
        <ButtonOpenableDialog
            buttonText="File"
            buttonColor="primary"
            buttonVariant="contained"
            onCloseCallback={onClose}
            maxWidth="xs"
            open={open}
            setOpen={setOpen}
            startIcon={<AttachFileIcon />}
        >
            <DialogTitle>Upload New File</DialogTitle>
            <DialogContent>
                <SingleFileSelectionForm
                    onFileSelected={onFileSelected}
                    onClearSelectedFile={onClearSelectedFile}
                    filename={filename}
                    formik={formik}
                />
            </DialogContent>
        </ButtonOpenableDialog>
    )
}

export default FileUpload