PNSPS-frontend-MaterialUI/src/pages/PublicNotice/Details_GLD/tabTableDetail/TabTable.js

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

import { TabPanel, TabContext, TabList } from '@mui/lab';
import * as React from "react";


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


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

const PublicNotice = ({applicationDetailData, proofList}) => {
    const [_proofList, setProofList] = React.useState([]);
    const [inProgressList,] = React.useState([]);
    const [onReady,setOnReady] = React.useState(false);
    const [selectedTab, setSelectedTab] = React.useState("1");
    // const navigate = useNavigate();
    const [statusHistoryList, setStatusHistoryList] = React.useState([]);

    const reloadPage = () => {
        window.location.reload(false);
    }

    React.useEffect(() => {
        if (Object.keys(applicationDetailData).length > 0) {
            setStatusHistoryList(applicationDetailData.statusHistoryList);
        }
    }, [applicationDetailData]);

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

    React.useEffect(() => {
        //if state data are ready and assign to different field
        if (statusHistoryList.length > 0) {
            setOnReady(true);
        }
    }, [statusHistoryList]);

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

    const handleChange = (event, newValue) => {
        setSelectedTab(newValue);
    }

    // const onBtnClick = () => {
    //     navigate('/publicNotice/apply')
    // }

    return (
        !onReady ?
            <LoadingComponent />
            :
            <Grid container sx={{minHeight: '40vh'}}>
                {/*col 2*/}
                <Grid item xs={12}>
                    <TabContext value={selectedTab}>
                        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                            <TabList onChange={handleChange} aria-label="lab API tabs example">
                                <Tab label={"Proof(" + (_proofList?.length?_proofList?.length:0) + ")"} value="1" />
                                <Tab label={"Payment(" + inProgressList.length + ")"} value="2" />
                                <Tab label={"Status History(" + statusHistoryList.length + ")"} value="3" />
                            </TabList>
                        </Box>
                        <TabPanel value="1">
                            <ProofTab
                                rows={_proofList}
                                reloadFunction={reloadPage}
                            />
                        </TabPanel>
                        <TabPanel value="2">
                            <BaseGrid
                                rows={inProgressList}
                                reloadFunction={reloadPage}
                            />
                        </TabPanel>
                        <TabPanel value="3">
                            <StatusHistoryTab
                                rows={statusHistoryList}
                                reloadFunction={reloadPage}
                            />
                        </TabPanel>
                    </TabContext>
                </Grid>
            </Grid>
    );
};


export default PublicNotice;