aswi2022code-of-duty-gitlab/frontend/src/features/ExternalSources/ExternalSources.tsx @ 6d8ac067

import {Button, Container, Paper, Typography} from '@mui/material'
import {Fragment, useEffect, useState} from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '../redux/store'
import axiosInstance from "../../api/api"
import 'react-quill/dist/quill.snow.css'
import NotAuthorized from "../NotAuthorized/NotAuthorized"
import SingleFileSelectionForm from "../Reusables/SingleFileSelectionForm"
import * as yup from "yup"
import {useFormik} from "formik"


interface UploadValues {
    file?: File
}

const initialValues: UploadValues = {}


const ExternalSources = () => {

    const [filename, setFilename] = useState<string | undefined>(undefined)
    const [fileProcessing, setFileProcessing] = 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 () => {
                const {data, status} = await axiosInstance.post(
                   '/external-catalog-item',
                   { file: reader.result as string }
                )
                if (status !== 200) {
                    console.log("Error in updating catalog")
                }
            }
        },
    })

    // 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)
    }


    const isAdmin = useSelector(
        (state: RootState) => state.user.roles.includes("ROLE_ADMIN")
    )
    const handleClick = () => {

    }

    return (
        <Fragment>
            <Typography variant="h3" sx={{ mb: 2 }} fontWeight="bold">
                External Sources
            </Typography>
            {isAdmin ? (
            <Paper style={{ minHeight: '80vh' }} variant="outlined">
                <Container sx={{ mt: 4 }}>
                    <Typography sx={{ mb: 2 }}>
                        Select file with sources from ... source and then click submit to update all external sources.
                    </Typography>
                    <SingleFileSelectionForm
                        onFileSelected={onFileSelected}
                        onClearSelectedFile={onClearSelectedFile}
                        filename={filename}
                        formik={formik}
                    />
                </Container>
            </Paper>
            ) : <NotAuthorized />}
        </Fragment>
    )
}

export default ExternalSources