PNSPS-frontend-MaterialUI/src/pages/PublicNotice/Details_Public/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';
import {useIntl} from "react-intl";
const LoadingComponent = Loadable(lazy(() => import('pages/extra-pages/LoadingComponent')));
const ProofTab = Loadable(lazy(() => import('./ProofTab')));
const PaymentTab = Loadable(lazy(() => import('./PaymentTab')));


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

const PublicNotice = ({ proofList, paymentList }) => {
    const [_proofList, setProofList] = React.useState([]);
    const [_paymentList, setPaymentList] = React.useState([]);
    const [onReady, setOnReady] = React.useState(false);
    const [selectedTab, setSelectedTab] = React.useState("1");
    const intl = useIntl();

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


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

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

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

    return (
        !onReady ?
            <LoadingComponent />
            :
            <Grid container>
                {/*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={
                                    intl.formatMessage({id: 'proofRecord'}) + "(" + _proofList.length + ") "} value="1"
                                />
                                <Tab label={ intl.formatMessage({id: 'paymentHistory'}) +"(" + _paymentList.length + ") "} value="2" />
                                
                            </TabList>
                        </Box>
                        <TabPanel value="1">
                            <ProofTab
                                rows={_proofList}
                                reloadFunction={reloadPage}
                            />
                        </TabPanel>
                        <TabPanel value="2">
                            <PaymentTab
                                rows={_paymentList}
                                reloadFunction={reloadPage}
                            />
                        </TabPanel>
                    </TabContext>
                </Grid>
            </Grid>
    );
};


export default PublicNotice;