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

// material-ui
import {
    // Box,
    Stack,
    // Button,
    Grid, Typography
} from '@mui/material';
import MainCard from "components/MainCard";
import { useEffect, useState } from "react";
import * as React from "react";
import { getSearchCriteria } from "auth/utils";

//import LoadingComponent from "../extra-pages/LoadingComponent";
// import UserGroupSearchForm from "./UserGroupSearchForm";
// import UserGroupTable from "./UserGroupTable";
import Loadable from 'components/Loadable';
import { lazy } from 'react';
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
const UserGroupSearchForm = Loadable(lazy(() => import('./UserGroupSearchForm')));
const UserGroupTable = Loadable(lazy(() => import('./UserGroupTable')));
// import {useNavigate} from "react-router";
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'

const BackgroundHead = {
    backgroundImage: `url(${titleBackgroundImg})`,
    width: '100%',
    height: '100%',
    backgroundSize: 'contain',
    backgroundRepeat: 'no-repeat',
    backgroundColor: '#0C489E',
    backgroundPosition: 'right'
}
// ==============================|| DASHBOARD - DEFAULT ||============================== //

const UserGroupSearchPanel = () => {
    const [searchCriteria, setSearchCriteria] = useState({});
    const [onReady, setOnReady] = useState(false);
    const [onGridReady, setGridOnReady] = useState(false);

    useEffect(() => {
        if (Object.keys(getSearchCriteria(window.location.pathname)).length>0){
            setSearchCriteria(getSearchCriteria(window.location.pathname))
        }else{
            localStorage.setItem('searchCriteria',"")
            setSearchCriteria({})
        }
    }, []);

    useEffect(() => {
        setOnReady(true);
    }, [searchCriteria]);

    function applySearch(input) {
        setGridOnReady(true)
        setSearchCriteria(input);
        localStorage.setItem('searchCriteria', JSON.stringify({path:window.location.pathname,data:input}))
    }

    function applyGridOnReady(input) {
        setGridOnReady(input);
    }

    return (
        !onReady ?
            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                <Grid item>
                    <LoadingComponent />
                </Grid>
            </Grid>
            :
            <Grid container sx={{ minHeight: '87vh', backgroundColor: "backgroundColor.default"}} direction="column">
                <Grid item xs={12}>
                    <div style={BackgroundHead}>
                        <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>
                                View User Group
                            </Typography>
                        </Stack>
                    </div>
                </Grid>

                {/*row 1*/}
                <Grid item xs={12} md={12} lg={12} sx={{mb:-1}}>
                    <UserGroupSearchForm 
                        applySearch={applySearch}
                        onGridReady={onGridReady}
                        searchCriteria={searchCriteria}
                    />
                </Grid>
                {/*row 2*/}
                <Grid item xs={12} md={12} lg={12}>
                    <MainCard elevation={0}
                        border={false}
                        content={false}
                    >
                        <UserGroupTable
                            searchCriteria={searchCriteria}
                            applyGridOnReady={applyGridOnReady}
                            applySearch={applySearch}
                        />
                    </MainCard>
                </Grid>

            </Grid>

    );
};

export default UserGroupSearchPanel;