PNSPS-frontend-MaterialUI/src/pages/User/DetailsPage_Individual/index.js

// material-ui
import * as React from "react";

import {Grid, Typography} from '@mui/material';
import FileList from "../../../components/FileList"
import MainCard from "../../../components/MainCard";
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';
const LoadingComponent = Loadable(React.lazy(() => import('../../extra-pages/LoadingComponent')));
const UserInformationCard = Loadable(React.lazy(() => import('./UserInformationCard_Individual')));


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


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


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

    const loadData = ()=>{
        setLoding(true);
        HttpUtils.get({
            url: `${UrlUtils.GET_IND_USER_PATH}/${params.id}`,
            onSuccess: function(response){
                response.data["address"] = JSON.parse(response.data["address"]);
                response.data["mobileNumber"] = JSON.parse(response.data["mobileNumber"]);
                response.data["faxNo"] = JSON.parse(response.data["faxNo"]);

                let createDate = DateUtils.datetimeStr(response.data.created);
                let modifiedBy = DateUtils.datetimeStr(response.data.modified)+", "+response.data.modifiedBy;
                response.data["createDate"] = createDate;
                response.data["modifieDate"] = modifiedBy;
                response.data["verifiedStatus"] = response.data.verifiedBy? DateUtils.datetimeStr(response.data.verifiedDate)+", "+response.data.verifiedByName: "Not verified";
        
                response.data["country"] = response.data.address?.country;
                response.data["district"] = response.data.address?.district;
                response.data["addressLine1"] = response.data.address?.addressLine1;
                response.data["addressLine2"] = response.data.address?.addressLine2;
                response.data["addressLine3"] = response.data.address?.addressLine3;
        
                response.data["phoneNumber"] = response.data.mobileNumber?.phoneNumber;
                response.data["tel_countryCode"] = response.data.mobileNumber?.countryCode;
        
                response.data["faxNumber"] = response.data.faxNo?.faxNumber;
                response.data["fax_countryCode"] = response.data.faxNo?.countryCode;
        
                response.data["lastLoginDate"] = response.data.lastLogin?DateUtils.datetimeStr(response.data.lastLogin):"";

                setFormData(response.data);
            }
        });
    };


    React.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">Individual User Details</Typography>
                </Grid>
                {/*col 1*/}
                <Grid item xs={12} >
                    <Grid container>
                        <Grid item xs={12} md={12} lg={12}>
                            <UserInformationCard
                                formData={formData}
                                loadDataFun={loadData}
                            />
                        </Grid>
                        <Grid item xs={12} md={12} lg={12}>
                        <MainCard elevation={0} border={false} content={false}>
                        <Typography variant="h5" sx={{mt: 3, ml: 3, mb: 1}}>
                            Files
                        </Typography>
                            <FileList sx={{mt: 3, ml: 3, mb: 1}}
                                refId={params.id}
                                refType={"identification"}
                            />
                        </MainCard>
                    </Grid>
                    </Grid>
                </Grid>
                {/*col 2*/}
            </Grid>
    );
};


export default UserMaintainPage_Individual;