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

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 formData = new FormData()
            // @ts-ignore
            formData.append("file", values.file)

            const {data, status} = await axiosInstance.post(
               '/external-catalog-items',
               formData,
                {headers: {
                'Content-Type': 'multipart/form-data'
                }}
            )
            if (status !== 200) {
                console.log("Error in updating catalog")
            }
            console.log("ex cat post status: " + status)

        },
    })

    // 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 }}>
                        Please upload CSV file from CIGS available at https://zenodo.org/record/5642899#.YoeJLXXP1hE
                        (please check version, there might be newer).
                    </Typography>
                    <Typography sx={{ mb: 3 }}>
                        Files from Pleiades (available at https://pleiades.stoa.org/
                        , downloads at http://atlantides.org/downloads/pleiades/dumps/
                        ), ANE (available at https://www.lingfil.uu.se/research/assyriology/earth/
                        , downloads at https://zenodo.org/record/6384045
                        ) and GeoNames (available at https://www.geonames.org/
                        ) will be added automatically.
                    </Typography>
                    <SingleFileSelectionForm
                        onFileSelected={onFileSelected}
                        onClearSelectedFile={onClearSelectedFile}
                        filename={filename}
                        formik={formik}
                    />
                </Container>
            </Paper>
            ) : <NotAuthorized />}
        </Fragment>
    )
}

export default ExternalSources