Projekt

Obecné

Profil

Stáhnout (2.91 KB) Statistiky
| Větev: | Tag: | Revize:
1 ff40cb89 Schwobik
import {Button, Paper} from '@mui/material'
2
import {Fragment, useEffect, useState} from 'react'
3
import { useDispatch, useSelector } from 'react-redux'
4
import { logout } from '../Auth/userSlice'
5
import { RootState } from '../redux/store'
6
import {TitlePageDto} from "../../swagger/data-contracts"
7
import axiosInstance from "../../api/api"
8
import ReactQuill from "react-quill"
9
import 'react-quill/dist/quill.snow.css'
10
import ContentLoading from "../Reusables/ContentLoading"
11
import {Link as RouterLink, useNavigate} from "react-router-dom"
12
import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos"
13
14
15
const apiError =
16
    'Error while fetching data from the server, please try again later.'
17
18
const EditHome = () => {
19
    const [content, setContent] = useState<TitlePageDto | undefined>(undefined)
20
    const [isContentLoading, setIsContentLoading] = useState(true)
21
    const [err, setErr] = useState<string | undefined>(undefined)
22
23
    const navigate = useNavigate()
24
25
    const updateContent = (updated: string) => {
26
        if (content) {
27
            content["content"] = updated
28
        }
29
    }
30
31
    const handleSubmit = () => {
32
        postData()
33
    }
34
35
    const postData = async () => {
36
        const {data, status} = await axiosInstance.post('/title-page', content)
37
        if (status != 200) {
38
            console.error("Title page data submitting failed.")
39
        }
40
    }
41
42
    const roles = useSelector(
43
        (state: RootState) => state.user.roles
44
    )
45
46
    // Fetch the item from the api after mounting the component
47
    useEffect(() => {
48
        // Function to fetch the item from the api
49
        const fetchItem = async () => {
50
            try {
51
                const { data, status } = await axiosInstance.get(
52
                    `/title-page`
53
                )
54
                if (status !== 200) {
55
                    setErr(apiError)
56
                    return
57
                }
58
59
                setContent(data)
60
                setIsContentLoading(false)
61
            } catch (err: any) {
62
                setErr(apiError)
63
            }
64
        }
65
66
        fetchItem()
67
    }, [])
68
69
    return (
70
        <Fragment>
71
            <Button
72
                startIcon={<ArrowBackIosIcon />}
73
                variant="contained"
74
                component={RouterLink}
75
                to="/"
76
                color="primary"
77
                sx={{ mb: 2 }}
78
            >
79
                Return To Catalog
80
            </Button>
81
            <Paper style={{ minHeight: '100vh' }} variant="outlined">
82
    {isContentLoading && !err ? <ContentLoading /> : null}
83
    {!isContentLoading && content ? (
84
        <div>
85
            <h1>Home</h1>
86 4d2f04f4 Schwobik
        <form>
87
            <Button type="button" onClick={handleSubmit}>Submit</Button>
88 ff40cb89 Schwobik
    <ReactQuill
89
        theme='snow'
90
        value={content["content"]}
91
        onChange={updateContent}
92
        style={{minHeight: '300px'}}
93
        />
94
        </form>
95
        </div>
96
    ) : null}
97
    </Paper>
98
    </Fragment>
99
)
100
}
101
102
export default EditHome