user

src/pages/User/SearchPage/UserTable.js

@@ -5,50 +5,55 @@ import {useEffect} from "react";
 import {useNavigate} from "react-router-dom";
 import { useTheme } from '@mui/material/styles';
 import Checkbox from '@mui/material/Checkbox';
-import * as UrlUtils from "../../../utils/ApiPathConst";
 import * as HttpUtils from '../../../utils/HttpUtils';
+import { GLD_USER_PATH, GET_USER_LOCK, GET_USER_UNLOCK } from "utils/ApiPathConst";
 import { notifyLockSuccess, notifyUnlockSuccess , clickableLink} from 'utils/CommonFunction';
 
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function UserTable({recordList,setChangeLocked}) {
-    const [rows, setRows] = React.useState(recordList);
+export default function UserTable({searchCriteria}) {
+    const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria);
+    const [reloadTime, setReloadTime] = React.useState(new Date());
     const theme = useTheme();
 
     const navigate = useNavigate()
 
     useEffect(() => {
-        setRows(recordList);
-    }, [recordList]);
+        set_searchCriteria(searchCriteria);
+    }, [searchCriteria]);
+
+    useEffect(() => {
+        searchCriteria.reloadTime = reloadTime;
+        set_searchCriteria(searchCriteria);
+    }, [reloadTime]);
 
     const handleLock = (params) => () => {
-        setChangeLocked(false)
+        // setChangeLocked(false)
         if (params.row.locked==true){
             doUnlock(params.id)
         }else{
             doLock(params.id)
-            setRows(recordList);
         }
     }
 
     const doLock = (id) => {
         HttpUtils.get({
-            url: UrlUtils.GET_USER_LOCK+"/"+id,
+            url: GET_USER_LOCK+"/"+id,
             onSuccess: function(){
-                setRows(recordList);
-                setChangeLocked(true)
+                //setChangeLocked(true)
                 notifyLockSuccess()
+                setReloadTime(new Date());
             }
         }); 
     };
 
     const doUnlock = (id) => {
         HttpUtils.get({
-            url: UrlUtils.GET_USER_UNLOCK+"/"+id,
+            url: GET_USER_UNLOCK+"/"+id,
             onSuccess: function(){
-                setRows(recordList);
-                setChangeLocked(true)
+                //setChangeLocked(true)
                 notifyUnlockSuccess()
+                setReloadTime(new Date());
             }
         }); 
     };
@@ -128,11 +133,14 @@ export default function UserTable({recordList,setChangeLocked}) {
     return (
         <div style={{height: "fit-content", width: '100%'}}>
             <FiDataGrid
-                rows={rows}
                 columns={columns}
                 customPageSize={5}
                 onRowDoubleClick={handleRowDoubleClick}
                 getRowHeight={() => 'auto'}
+                doLoad={{
+                    url: GLD_USER_PATH,
+                    params: _searchCriteria,
+                }}
             />
         </div>
     );

src/pages/User/SearchPage/index.js

@@ -7,8 +7,6 @@ import {
 } 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';
@@ -30,39 +28,37 @@ const BackgroundHead = {
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const UserSettingPage = () => {
-    const [record, setRecord] = useState([]);
+    // const [record, setRecord] = useState([]);
     const [searchCriteria, setSearchCriteria] = useState({});
     const [onReady, setOnReady] = useState(false);
-    const [changelocked, setChangeLocked] = React.useState(false);
+    //const [changelocked, setChangeLocked] = React.useState(false);
 
-    React.useLayoutEffect(() => {
-        getUserList();
-    }, [changelocked]);
+    // React.useLayoutEffect(() => {
+    //     getUserList();
+    // }, [changelocked]);
 
     useEffect(() => {
-        if (record.length > 0) {
-            setOnReady(true);
-        }
-    }, [record]);
-
-    React.useLayoutEffect(() => {
-        getUserList();
+        setOnReady(true);
     }, [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;
-            });
-    }
+    // 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);
@@ -96,8 +92,8 @@ const UserSettingPage = () => {
                         content={false}
                     >
                         <EventTable
-                            recordList={record}
-                            setChangeLocked={setChangeLocked}
+                            searchCriteria={searchCriteria}
+                            // setChangeLocked={setChangeLocked}
                         />
                     </MainCard>
                 </Grid>