aswi2022code-of-duty-gitlab/frontend/src/features/Bibliography/EditBibliography.tsx @ ae770857

import {Button, Paper} from '@mui/material'
import {Fragment, useEffect, useState} from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { logout } from '../Auth/userSlice'
import { RootState } from '../redux/store'
import {SourcesDto} from "../../swagger/data-contracts"
import axiosInstance from "../../api/api"
import ReactQuill from "react-quill"
import 'react-quill/dist/quill.snow.css'
import ContentLoading from "../Reusables/ContentLoading"
import {Link as RouterLink, useNavigate} from "react-router-dom"
import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos"


const apiError =
    'Error while fetching data from the server, please try again later.'

const EditBibliography = () => {
    const [sources, setSources] = useState<SourcesDto | undefined>(undefined)
    const [isContentLoading, setIsContentLoading] = useState(true)
    const [err, setErr] = useState<string | undefined>(undefined)

    const navigate = useNavigate()

    const updateContent = (updated: string) => {
        if (sources) {
            sources["sources"] = updated
        }
    }

    const handleSubmit = () => {
        postData()
    }

    const postData = async () => {
        const {data, status} = await axiosInstance.post('/sources', sources)
        if (status != 200) {
            console.error("Sources page data submitting failed.")
        }
    }

    const roles = useSelector(
        (state: RootState) => state.user.roles
    )

    // Fetch the item from the api after mounting the component
    useEffect(() => {
        // Function to fetch the item from the api
        const fetchItem = async () => {
            try {
                const { data, status } = await axiosInstance.get(
                    `/sources`
                )
                if (status !== 200) {
                    setErr(apiError)
                    return
                }

                setSources(data)
                setIsContentLoading(false)
            } catch (err: any) {
                setErr(apiError)
            }
        }

        fetchItem()
    }, [])

    return (
        <Fragment>
            <Button
                startIcon={<ArrowBackIosIcon />}
                variant="contained"
                component={RouterLink}
                to="/sources"
                color="primary"
                sx={{ mb: 2 }}
            >
                Return To Bibliography
            </Button>
            <Paper style={{ minHeight: '100vh' }} variant="outlined">
    {isContentLoading && !err ? <ContentLoading /> : null}
    {!isContentLoading && sources ? (
        <form>
            <Button type="button" onClick={handleSubmit}>Submit</Button>
            <ReactQuill
                theme='snow'
                value={sources["sources"]}
                onChange={updateContent}
                style={{minHeight: '300px'}}
                />
        </form>
    ) : null}
    </Paper>
    </Fragment>
)
}

export default EditBibliography