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

// material-ui
import {
    Grid
} from '@mui/material';
import MainCard from "../../components/MainCard";
import SearchForm from "./UserSearchForm";
import EventTable from "./UserTable";
import {useEffect, useState} from "react";
import axios from "axios";
import {apiPath} from "../../auth/utils";
import {GET_USER_PATH} from "../../utils/ApiPathConst";

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


const UserSettingPage = () => {

    const [record,setRecord] = useState([]);
    const [searchCriteria, setSearchCriteria] = useState({});
    const [sortedRecord, setSortedRecord] = useState([]);

    useEffect(() => {
        axios.get(`${apiPath}${GET_USER_PATH}`)
            .then((response) => {
                if (response.status === 200) {
                    setRecord(response.data);
                    setSortedRecord(response.data);
                }
            })
            .catch(error => {
                console.log(error);
                return false;
            });
    }, [])

    const filterSearchName = (array) => {
        return array.filter((item) => item.name.toLowerCase().includes(searchCriteria.eventName));
    };

    const filterSearchType = (array) => {
        return array.filter((item) => item.category.includes(searchCriteria.type));
    };

    function sortData(record) {
        let sortedRecord = record;
        sortedRecord = filterSearchName(sortedRecord);
        sortedRecord = filterSearchType(sortedRecord);
        return sortedRecord;
    }

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

    useEffect(() => {
        //console.log(searchCriteria);
        if (Object.keys(searchCriteria).length !== 0) {
            const tempSortedRecord = sortData(record);
            console.log(tempSortedRecord);
            setSortedRecord(tempSortedRecord);
        } else {
            setSortedRecord(record);
        }
    }, [searchCriteria]);

    return (
        <Grid container rowSpacing={4.5} columnSpacing={2.75}>
            {/*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={sortedRecord}
                    />
                </MainCard>
            </Grid>

        </Grid>

    );
};

export default UserSettingPage;