Projekt

Obecné

Profil

Stáhnout (3 KB) Statistiky
| Větev: | Tag: | Revize:
1 4d2f04f4 Schwobik
import {Button, Container, Paper} from '@mui/material'
2 ff40cb89 Schwobik
import {Fragment, useEffect, useState} from 'react'
3 fc79a8cb Vaclav Honzik
import { useDispatch, useSelector } from 'react-redux'
4
import { logout } from '../Auth/userSlice'
5
import { RootState } from '../redux/store'
6 ff40cb89 Schwobik
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 EditHome from "./EditHome"
12
import {Link as RouterLink, useNavigate} from "react-router-dom"
13
import EditIcon from '@mui/icons-material/Edit'
14
import { formatHtmlStringToReactDom } from "../../utils/formatting/HtmlUtils"
15
16
17
const apiError =
18
    'Error while fetching data from the server, please try again later.'
19 fc79a8cb Vaclav Honzik
20 c7d2ced1 Václav Honzík
const Home = () => {
21 ff40cb89 Schwobik
    const [content, setContent] = useState<TitlePageDto | undefined>(undefined)
22
    const [isContentLoading, setIsContentLoading] = useState(true)
23
    const [err, setErr] = useState<string | undefined>(undefined)
24
25
    let navigate = useNavigate()
26
    const openEditHomePage = () => {
27
        let path = 'editHome'
28
        navigate(path)
29
    }
30
31 4d2f04f4 Schwobik
    const isAdmin = useSelector(
32
        (state: RootState) => state.user.roles.includes("ROLE_ADMIN")
33 ff40cb89 Schwobik
    )
34
    // Fetch the item from the api after mounting the component
35
    useEffect(() => {
36
        // Function to fetch the item from the api
37
        const fetchItem = async () => {
38
            try {
39
                const { data, status } = await axiosInstance.get(
40
                    `/title-page`
41
                )
42
                if (status !== 200) {
43
                    setErr(apiError)
44
                    return
45
                }
46
47
                setContent(data)
48
                setIsContentLoading(false)
49
            } catch (err: any) {
50
                setErr(apiError)
51
            }
52
        }
53
        fetchItem()
54 4d2f04f4 Schwobik
    }, [])
55 ff40cb89 Schwobik
56 fc79a8cb Vaclav Honzik
    return (
57 456b0111 Vaclav Honzik
        <Fragment>
58 4d2f04f4 Schwobik
            <Paper style={{ minHeight: '80vh', display:'flex', justifyContent: 'space-between', flexDirection:'column'}} variant="outlined">
59 ff40cb89 Schwobik
                {isContentLoading && !err ? <ContentLoading /> : null}
60
                {!isContentLoading && content ? (
61 4d2f04f4 Schwobik
                    <Container>
62 ff40cb89 Schwobik
                        <h1>Home</h1>
63
                        {formatHtmlStringToReactDom(content["content"] as string)}
64 4d2f04f4 Schwobik
                    </Container>
65 ff40cb89 Schwobik
                ) : null}
66
67 4d2f04f4 Schwobik
                {isAdmin ? (
68
                    <Container sx={{ mb: 3 }} >
69
                            <Button
70
                                startIcon={<EditIcon />}
71
                                variant="contained"
72
                                component={RouterLink}
73
                                to="/editHome"
74
                                color="primary"
75
                                sx={{ mb: 2 }}
76
                            >
77
                                Edit
78
                            </Button>
79
                    </Container>
80 ff40cb89 Schwobik
                ) : null}
81
            </Paper>
82 456b0111 Vaclav Honzik
        </Fragment>
83 fc79a8cb Vaclav Honzik
    )
84 c7d2ced1 Václav Honzík
}
85
86 fc79a8cb Vaclav Honzik
export default Home