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

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

import {TabPanel, TabContext, TabList } from '@mui/lab';
import {useEffect, useState} from "react";
import {useNavigate} from "react-router-dom";
import * as React from "react";
import * as HttpUtils from "../../../utils/HttpUtils";
import * as UrlUtils from "../../../utils/ApiPathConst";

import Loadable from 'components/Loadable';
import { lazy } from 'react';
 const SubmittedTab = Loadable(lazy(() => import('./SubmittedTab')));
 const InProgressTab = Loadable(lazy(() => import('./InProgressTab')));
 const PendingPaymentTab = Loadable(lazy(() => import('./PendingPaymentTab')));
 const PendingPublishTab = Loadable(lazy(() => import('./PendingPublishTab')));
 const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
 const SearchTab = Loadable(lazy(() => import('./SearchTab')));


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

const PublicNotice = () => {
    const [submittedList, setSubmittedList]  = useState([]);
     const [inProgressList, setInProgressList]  = useState([]);
     const [pendingPaymentList, setPendingPaymentList]  = useState([]);
     const [pendingPublishList, setPendingPublishList]  = useState([]);
    const [isLoading, setLoding] = useState(true);
    const [selectedTab, setSelectedTab] = useState("1");
    const navigate=useNavigate();


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

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

    const loadData = ()=>{
        setLoding(true);
        HttpUtils.get({
            url: `${UrlUtils.GET_PUBLIC_NOTICE_LIST_ListByStatus}`,
            onSuccess: function(response){
                setSubmittedList(response["submitted"]);
                setInProgressList(response["inProgress"]);
                setPendingPaymentList(response["pendingPayment"]);
                setPendingPublishList(response["pendingPublish"]);
            }
        });
    };

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

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

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

    return (
        isLoading ?
            <LoadingComponent/>
            :
            <Grid container rowSpacing={4.5} columnSpacing={2.75}>
                <Grid item xs={12} sx={{mb: -2.25}}>
                    <Typography variant="h5">我的公共啟事</Typography>
                </Grid>
                <Grid item xs={12} sx={{mb: -2.25}}>
                    <Button variant="contained" onClick={()=>{onBtnClick()}}>申請公共啟事</Button>
                </Grid>
                {/*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={"已提交("+submittedList.length+")"} value="1" />
                    <Tab label={"處理中("+inProgressList.length+")"} value="2" />
                    <Tab label={"待付款("+pendingPaymentList.length+")"} value="3" />
                    <Tab label={"待發佈("+pendingPublishList.length+")"} value="4" />
                    <Tab label="搜尋申請記錄" value="5" />
                    </TabList>
                </Box>
                <TabPanel value="1">
                    <SubmittedTab
                        rows={submittedList}
                        reloadFunction={reloadPage}
                    />
                </TabPanel>
                <TabPanel value="2">
                    <InProgressTab
                        rows={inProgressList}
                        reloadFunction={reloadPage}
                    />
                </TabPanel>
                <TabPanel value="3">
                    <PendingPaymentTab
                        rows={pendingPaymentList}
                        reloadFunction={reloadPage}
                    />
                </TabPanel>
                <TabPanel value="4">
                    <PendingPublishTab
                        rows={pendingPublishList}
                        reloadFunction={reloadPage}
                    />
                </TabPanel>
                <TabPanel value="5">
                    <SearchTab
                        rows={pendingPublishList}
                        reloadFunction={reloadPage}
                    />
                </TabPanel>
                </TabContext>
                </Grid>
            </Grid>
    );
};


export default PublicNotice;