Revize ff40cb89

Formating of Home page
re #9714

frontend/src/features/Home/Home.tsx

@@ -1 @@
-import { Button } from '@mui/material'
-import { Fragment } from 'react'
+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 {TitlePageDto} 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 EditHome from "./EditHome"
+import {Link as RouterLink, useNavigate} from "react-router-dom"
+import EditIcon from '@mui/icons-material/Edit'
+import { formatHtmlStringToReactDom } from "../../utils/formatting/HtmlUtils"
+
+
+const apiError =
+    'Error while fetching data from the server, please try again later.'
 
 const Home = () => {
+    const [content, setContent] = useState<TitlePageDto | undefined>(undefined)
+    const [isContentLoading, setIsContentLoading] = useState(true)
+    const [err, setErr] = useState<string | undefined>(undefined)
+
+    let navigate = useNavigate()
+    const openEditHomePage = () => {
+        let path = 'editHome'
+        navigate(path)
+    }
+
+    const roles = useSelector(
+        (state: RootState) => state.user.roles
+    )
+
+    const isAdmin = roles.includes("ROLE_ADMIN")
+
+    // Fetch the item from the api after mounting the component
+    useEffect(() => {
+        // Function to fetch the item from the api
+        console.log("useEffect called")
+        const fetchItem = async () => {
+            try {
+                const { data, status } = await axiosInstance.get(
+                    `/title-page`
+                )
+                if (status !== 200) {
+                    setErr(apiError)
+                    return
+                }
+
+                setContent(data)
+                setIsContentLoading(false)
+            } catch (err: any) {
+                setErr(apiError)
+            }
+        }
+        fetchItem()
+    }, [roles])
+
     return (
         <Fragment>
-            <h1>Home</h1>
+            <Paper style={{ minHeight: '100vh' }} variant="outlined">
+                {isContentLoading && !err ? <ContentLoading /> : null}
+                {!isContentLoading && content ? (
+                    <div>
+                        <h1>Home</h1>
+                        {formatHtmlStringToReactDom(content["content"] as string)}
+                    </div>
+                ) : null}
+                {isAdmin ? (
+                        <Button
+                            startIcon={<EditIcon />}
+                            variant="contained"
+                            component={RouterLink}
+                            to="/editHome"
+                            color="primary"
+                            sx={{ mb: 2 }}
+                        >
+                            Edit
+                        </Button>
+
+                ) : null}
+            </Paper>
         </Fragment>
     )
 }