PNSPS-frontend-MaterialUI/src/pages/Message/Details/index.js

// material-ui
import {
    Grid,
    Typography,
    Stack,
    Button,
} from '@mui/material';

import * as React from "react";
import * as HttpUtils from "utils/HttpUtils";
import * as UrlUtils from "utils/ApiPathConst";
import * as DateUtils from "utils/DateUtils";
import { useParams, useNavigate } from "react-router-dom";

import Loadable from 'components/Loadable';
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));

import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
import { FormattedMessage } from "react-intl";
import usePageTitle from 'components/usePageTitle';
import { PRIMARY_CONTAINED_BUTTON_SX } from 'themes/colorConst';
import SafeHtml from 'components/SafeHtml';

const BackgroundHead = {
    backgroundImage: `url(${titleBackgroundImg})`,
    width: '100%',
    height: '100%',
    backgroundSize: 'contain',
    backgroundRepeat: 'no-repeat',
    backgroundColor: '#0C489E',
    backgroundPosition: 'right'
}

// ==============================|| DASHBOARD - DEFAULT ||============================== //

const Index = () => {
    usePageTitle("msgDetails");
    
    const params = useParams();
    const navigate = useNavigate()

    const [record, setRecord] = React.useState();
    const [onReady, setOnReady] = React.useState(false);

    React.useEffect(() => {
        loadForm();
    }, []);

    React.useEffect(() => {
        setOnReady(true);
    }, [record]);


    const loadForm = () => {
        if (params.id > 0) {
            HttpUtils.get({
                url: UrlUtils.GET_MSG_DETAILS + "/" + params.id,
                onSuccess: (responseData) => {
                    if (!responseData?.sentDate) {
                        navigate("/");
                    }
                    setRecord(responseData);
                }
            });
        }
    }

    return (
        !onReady ?
            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                <Grid item>
                    <LoadingComponent />
                </Grid>
            </Grid>
            :
            (
                <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
                    <Grid item xs={12} width="100%">
                        <div style={BackgroundHead} width="100%">
                            <Stack direction="row" height='70px'>
                                <Typography component="h1" ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>
                                    <FormattedMessage id="msgDetails" />
                                </Typography>
                            </Stack>
                        </div>
                    </Grid>
                    {/*row 1*/}
                    <Grid item xs={12} md={12} >
                        <Grid container justifyContent="flex-start" alignItems="center" >
                            <center>
                                <Grid item xs={12} md={12} sx={{p:2}} >
                                    <Typography component="h2" variant="h3" sx={{ textAlign: "left", borderBottom: "1px solid black" }}>
                                    {record?.subject}
                                    </Typography>
                                    <Typography sx={{p:1}} align="justify">{DateUtils.datetimeStr(record?.sentDate)}</Typography>
                                    <Typography component="div" variant="body1" sx={{ p: 4, textAlign: "left", bgcolor: "#f8f8f8" }} align="justify">
                                        <SafeHtml html={record?.content} />
                                    </Typography>

                                    <Typography component="h3" variant="h4" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
                                        <Button
                                            component="span"
                                            variant="contained"
                                            size="large"
                                            sx={{ m: 4, ...PRIMARY_CONTAINED_BUTTON_SX }}
                                            onClick={() => {
                                                navigate(-1);
                                            }}
                                        >
                                            <FormattedMessage id="back" />
                                        </Button>
                                    </Typography>
                                </Grid>
                            </center>
                        </Grid>
                    </Grid>
                    {/*row 2*/}
                </Grid >


            )


    );
};

export default Index;