PNSPS-frontend-MaterialUI/src/pages/PublicNotice/ApplyForm/index.js

// material-ui
import * as React from "react";
import * as HttpUtils from "utils/HttpUtils";
import * as UrlUtils from "utils/ApiPathConst";
import * as FormatUtils from "utils/FormatUtils";
import * as DateUtils from "utils/DateUtils";
import { useIntl } from "react-intl";

import {
    Grid,
    Radio,
    FormControlLabel
} from '@mui/material';

import Loadable from 'components/Loadable';
import { lazy } from 'react';
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
const PublicNoticeApplyForm = Loadable(lazy(() => import('./PublicNoticeApplyForm')));


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

const ApplyForm = () => {
    const [userData, setUserData] = React.useState(null);
    const [gazetteIssueList, setGazetteIssueList] = React.useState([]);

    const [selections, setSelection] = React.useState([]);
    const [isLoading, setLoding] = React.useState(true);

    const intl = useIntl();
    const { locale } = intl;

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

    const loadUserData = () => {
        setLoding(true);
        HttpUtils.get({
            url: `${UrlUtils.GET_PUBLIC_NOTICE_getApplyUser}`,
            onSuccess: function (response) {
                response["tel_countryCode"] = response?.contactTelNo?.countryCode;
                response["phoneNumber"] = response?.contactTelNo?.phoneNumber;
                response["fax_countryCode"] = response?.contactFaxNo?.countryCode;
                response["faxNumber"] = response?.contactFaxNo?.faxNumber;
                response["issueId"] = response?.gazetteIssueList[0].id;
                response["remarks"] = "";

                var selection = [];
                for (var i = 0; i < response?.gazetteIssueList?.length; i++) {
                    let data = response.gazetteIssueList[i];
                    //let label = getIssueLabel(data);
                    selection.push(<FormControlLabel value={data.id} control={<Radio />} label={getIssueLabel(data)} />);
                }
                setGazetteIssueList(response?.gazetteIssueList);
                setSelection(selection);
                setUserData(response);
            }
        });
    };

    React.useEffect(() => {
        if(gazetteIssueList?.length>0){
            var selection = [];
            for (var i = 0; i < gazetteIssueList?.length; i++) {
                let data = gazetteIssueList[i];
                let label = getIssueLabel(data);
                selection.push(<FormControlLabel value={data.id} control={<Radio />} label={label} />);
            }
            setSelection(selection);
        }
    }, [locale]);

    const getIssueLabel=(data)=> {
        let issueYear = data.issueYear
        let volume = data.volume;
        let issueNo = data.issueNo;
        let issueDate = data.issueDate;
        if (locale === 'zh-HK') {
            return issueYear
                + " 第" + volume + "卷,"
                + " 第" + issueNo + "期,"
                + " " + DateUtils.dateFormat(issueDate, "YYYY年MM月DD日")
                + " (" + DateUtils.getWeekdayStr_ZH(issueDate) + ")";
        } else if (locale === 'zh-CN') {
            return issueYear
                + " 第" + volume + "卷,"
                + " 第" + issueNo + "期,"
                + " " + DateUtils.dateFormat(issueDate, "YYYY年MM月DD日")
                + " (" + DateUtils.getWeekdayStr_CN(issueDate) + ")";
        }
        return issueYear
            + " Vol. " + FormatUtils.zeroPad(volume, 3)
            + ", No. " + FormatUtils.zeroPad(issueNo, 2)
            + ", " + DateUtils.dateFormat(issueDate, "D MMM YYYY (ddd)");
    }


    React.useEffect(() => {
        if (userData !== null) setLoding(false);
    }, [userData]);

    return (
        isLoading ?
            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                <Grid item>
                    <LoadingComponent />
                </Grid>
            </Grid>
            :
            <PublicNoticeApplyForm
                loadedData={userData}
                _selections={selections}
                gazetteIssueList = {gazetteIssueList}
            />
    );
};


export default ApplyForm;