Projekt

Obecné

Profil

Stáhnout (2.85 KB) Statistiky
| Větev: | Tag: | Revize:
1
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 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

    
20
const Home = () => {
21
    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
    const roles = useSelector(
32
        (state: RootState) => state.user.roles
33
    )
34

    
35
    const isAdmin = roles.includes("ROLE_ADMIN")
36

    
37
    // Fetch the item from the api after mounting the component
38
    useEffect(() => {
39
        // Function to fetch the item from the api
40
        console.log("useEffect called")
41
        const fetchItem = async () => {
42
            try {
43
                const { data, status } = await axiosInstance.get(
44
                    `/title-page`
45
                )
46
                if (status !== 200) {
47
                    setErr(apiError)
48
                    return
49
                }
50

    
51
                setContent(data)
52
                setIsContentLoading(false)
53
            } catch (err: any) {
54
                setErr(apiError)
55
            }
56
        }
57
        fetchItem()
58
    }, [roles])
59

    
60
    return (
61
        <Fragment>
62
            <Paper style={{ minHeight: '100vh' }} variant="outlined">
63
                {isContentLoading && !err ? <ContentLoading /> : null}
64
                {!isContentLoading && content ? (
65
                    <div>
66
                        <h1>Home</h1>
67
                        {formatHtmlStringToReactDom(content["content"] as string)}
68
                    </div>
69
                ) : null}
70
                {isAdmin ? (
71
                        <Button
72
                            startIcon={<EditIcon />}
73
                            variant="contained"
74
                            component={RouterLink}
75
                            to="/editHome"
76
                            color="primary"
77
                            sx={{ mb: 2 }}
78
                        >
79
                            Edit
80
                        </Button>
81

    
82
                ) : null}
83
            </Paper>
84
        </Fragment>
85
    )
86
}
87

    
88
export default Home
(2-2/2)