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

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

//import LoadingComponent from "../extra-pages/LoadingComponent";
//import SearchForm from "./UserSearchForm_Individual";
//import EventTable from "./UserTable_Individual";
import Loadable from 'components/Loadable';
import { lazy } from 'react';
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
const SearchForm = Loadable(lazy(() => import('./UserSearchForm_Individual')));
const EventTable = Loadable(lazy(() => import('./UserTable_Individual')));
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 UserSearchPage_Individual = () => {

    const [record,setRecord] = useState([]);
    const [searchCriteria, setSearchCriteria] = useState({});
    const [onReady, setOnReady] = useState(false);

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

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

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

    function getUserList(){
        HttpUtils.get({
            url: GET_IND_USER_PATH,
            params: searchCriteria,
            onSuccess: function(responseData){
                setRecord(responseData);
            }
        });
    }

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

    return (
        !onReady ?
            <LoadingComponent/>
            :
        <Grid container>
        <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 Individual 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}
                    />
                </MainCard>
            </Grid>

        </Grid>

    );
};

export default UserSearchPage_Individual;