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

// material-ui
import {
    Grid,
    Typography,
    Stack,
    // Button
} from '@mui/material';
import MainCard from "../../../components/MainCard";
import { useEffect, useState } from "react";
import axios from "axios";
import { GLD_USER_PATH } from "../../../utils/ApiPathConst";
import * as React from "react";

import Loadable from 'components/Loadable';
import { lazy } from 'react';
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
const SearchForm = Loadable(lazy(() => import('./UserSearchForm')));
const EventTable = Loadable(lazy(() => import('./UserTable')));
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 UserSettingPage = () => {
    const [record, setRecord] = useState([]);
    const [searchCriteria, setSearchCriteria] = useState({});
    const [onReady, setOnReady] = useState(false);
    const [changelocked, setChangeLocked] = React.useState(false);

    React.useLayoutEffect(() => {
        getUserList();
    }, [changelocked]);

    useEffect(() => {
        if (record.length > 0) {
            setOnReady(true);
        }
    }, [record]);

    React.useLayoutEffect(() => {
        getUserList();
    }, [searchCriteria]);

    function getUserList() {
        axios.get(`${GLD_USER_PATH}`,
            { params: searchCriteria }
        )
            .then((response) => {
                if (response.status === 200) {
                    setRecord(response.data);
                }
            })
            .catch(error => {
                console.log(error);
                return false;
            });
    }

    function applySearch(input) {
        setSearchCriteria(input);
    }

    return (
        !onReady ?
            <LoadingComponent />
            :
            <Grid container sx={{ minHeight: '90vh', 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">View GLD User</Typography>
                        </Stack>
                    </div>
                </Grid>

                {/*row 1*/}
                <Grid item xs={12} md={12} lg={12}>
                    <SearchForm applySearch={applySearch} />
                </Grid>
                {/*row 2*/}
                <Grid item xs={12} md={12} lg={12}>
                    <MainCard elevation={0}
                        border={false}
                        content={false}
                    >
                        <EventTable
                            recordList={record}
                            setChangeLocked={setChangeLocked}
                        />
                    </MainCard>
                </Grid>

            </Grid>

    );
};

export default UserSettingPage;