PNSPS-frontend-MaterialUI/src/pages/OrganizationDetailPage/index.js

// material-ui
import {Grid, Typography} from '@mui/material';
import {useEffect, useState} from "react";
import * as React from "react";
import * as HttpUtils from "../../utils/HttpUtils";
import {useParams} from "react-router-dom";
import * as UrlUtils from "../../utils/ApiPathConst";
import * as DateUtils from "../../utils/DateUtils";

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


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


const OrganizationDetailPage = () => {
    const params = useParams();
    const [formData, setFormData]  = useState({})
    const [isLoading, setLoding] = useState(true);


    useEffect(()=>{
        console.log(formData);
        loadData();
    },[]);

    const loadData = ()=>{
        setLoding(true);
        if(params.id>0){        
            HttpUtils.get({
                url: UrlUtils.GET_ORG_PATH+"/"+params.id,
                onSuccess: function(response){
                    response.data["country"] = response.data.addressTemp?.country;
                    response.data["district"] = response.data.addressTemp?.district;
                    response.data["addressLine1"] = response.data.addressTemp?.addressLine1;
                    response.data["addressLine2"] = response.data.addressTemp?.addressLine2;
                    response.data["addressLine3"] = response.data.addressTemp?.addressLine3;
                    
                    response.data["phoneNumber"] = response.data.contactTel?.phoneNumber;
                    response.data["tel_countryCode"] = response.data.contactTel?.countryCode;

                    response.data["faxNumber"] = response.data.faxNo?.faxNumber;
                    response.data["fax_countryCode"] = response.data.faxNo?.countryCode;

                    response.data["brExpiryDate"] = response.data.brExpiryDate?DateUtils.dateStr(response.data.brExpiryDate): "";
                    setFormData(response.data)
                }
            });
        }
    };


    useEffect(() => {
       setLoding(false);
    }, [formData]);

    return (
        isLoading ?
            <LoadingComponent/>
            :
            <Grid container rowSpacing={4.5} columnSpacing={2.75}>
                <Grid item xs={12} sx={{mb: -2.25}}>
                    <Typography variant="h5" >Organization Details</Typography>
                </Grid>
                {/*col 1*/}
                <Grid item xs={12} >
                    <Grid container>
                        <Grid item xs={12} md={12} lg={12}>
                            <InfoCard
                                userData={formData}
                                loadDataFun={loadData}
                                id={params.id}
                            />
                        </Grid>

                    </Grid>
                </Grid>
                {/*col 2*/}
            </Grid>
    );
};


export default OrganizationDetailPage;