LFFE-2 update table component and remove fetchurl from every where in usage of mutate

src/core/components/DataTable.jsx

@@ -9,15 +9,6 @@ import useRequest from "@/lib/app/hooks/useRequest";
 
 function DataTable(props) {
     const requestServer = useRequest({auth: true})
-    const fetcher = (...args) => {
-        return requestServer(args, 'get', {
-            pending: false, success: {notification: {show: false}}
-        }).then((response) => {
-            setRowCount(response.data.meta.totalRowCount);
-            return response.data.data;
-        }).catch(() => {
-        })
-    };
     const t = useTranslations();
     const {languageApp, languageList} = useLanguage();
     const [columnFilters, setColumnFilters] = useState([]);
@@ -60,9 +51,18 @@ function DataTable(props) {
         return url;
     }, [props.tableUrl, columnFilters, columnFilterFns, pagination, sorting, props.columns,]);
 
-    const {data, isValidating, mutate} = useSWR(fetchUrl, fetcher, {
-        revalidateIfStale: false, revalidateOnFocus: false, revalidateOnReconnect: false
-    });
+    const {data, isValidating, mutate} = useSWR(fetchUrl, (...args) =>
+            requestServer(args, 'get', {
+                pending: false,
+                success: {notification: {show: false}}
+            }).then((response) => response.data).catch(() => {
+            })
+        , {
+            revalidateIfStale: false,
+            revalidateOnFocus: false,
+            revalidateOnReconnect: true,
+            keepPreviousData: true
+        });
 
     useEffect(() => {
         setupdateTime(moment().format("HH:mm | jYYYY/jM/jD"));
@@ -70,7 +70,7 @@ function DataTable(props) {
 
     return (<MaterialReactTable
         localization={tableLocalization}
-        data={data ?? []}
+        data={data?.data ?? []}
         manualFiltering
         manualPagination
         manualSorting
@@ -105,8 +105,8 @@ function DataTable(props) {
         positionToolbarAlertBanner="bottom"
         renderTopToolbarCustomActions={({table}) => (<>
             {props.enableCustomToolbar /* send condition */ ?
-                <props.CustomToolbar fetchUrl={fetchUrl}
-                                     mutate={mutate}/> /* send component */ : <span></span>}
+                <props.CustomToolbar
+                    mutate={mutate}/> /* send component */ : <span></span>}
         </>)}
         renderBottomToolbarCustomActions={({table}) => (<>
             {props.enableLastUpdate /* send condition */ ? (<Typography
@@ -127,7 +127,7 @@ function DataTable(props) {
         }}
         positionActionsColumn={"last"}
         enableRowActions={props.enableRowActions}
-        renderRowActions={({row}) => <props.TableRowAction fetchUrl={fetchUrl} mutate={mutate} row={row}/>}
+        renderRowActions={({row}) => <props.TableRowAction mutate={mutate} row={row}/>}
         {...props}
     />);
 }