Projekt

Obecné

Profil

Stáhnout (2.96 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 {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
        console.log("updateContent: " + updated)
27
        if (content) {
28
            content["content"] = updated
29
        }
30
    }
31

    
32
    const handleSubmit = () => {
33
        postData()
34
    }
35

    
36
    const postData = async () => {
37
        const {data, status} = await axiosInstance.post('/title-page', content)
38
        if (status != 200) {
39
            console.error("Title page data submitting failed.")
40
        }
41
    }
42

    
43
    const roles = useSelector(
44
        (state: RootState) => state.user.roles
45
    )
46

    
47
    // Fetch the item from the api after mounting the component
48
    useEffect(() => {
49
        // Function to fetch the item from the api
50
        const fetchItem = async () => {
51
            try {
52
                const { data, status } = await axiosInstance.get(
53
                    `/title-page`
54
                )
55
                if (status !== 200) {
56
                    setErr(apiError)
57
                    return
58
                }
59

    
60
                setContent(data)
61
                setIsContentLoading(false)
62
            } catch (err: any) {
63
                setErr(apiError)
64
            }
65
        }
66

    
67
        fetchItem()
68
    }, [])
69

    
70
    return (
71
        <Fragment>
72
            <Button
73
                startIcon={<ArrowBackIosIcon />}
74
                variant="contained"
75
                component={RouterLink}
76
                to="/"
77
                color="primary"
78
                sx={{ mb: 2 }}
79
            >
80
                Return To Catalog
81
            </Button>
82
            <Paper style={{ minHeight: '100vh' }} variant="outlined">
83
    {isContentLoading && !err ? <ContentLoading /> : null}
84
    {!isContentLoading && content ? (
85
        <div>
86
            <h1>Home</h1>
87
        <form onSubmit={handleSubmit}>
88
    <input type="submit" value="Submit" />
89
    <ReactQuill
90
        theme='snow'
91
        value={content["content"]}
92
        onChange={updateContent}
93
        style={{minHeight: '300px'}}
94
        />
95
        </form>
96
        </div>
97
    ) : null}
98
    </Paper>
99
    </Fragment>
100
)
101
}
102

    
103
export default EditHome
(1-1/2)