complete datatable getting data with swr

src/core/components/DataTable/Main.js

@@ -3,81 +3,16 @@ import { useMaterialReactTable } from "material-react-table";
 import { FA_DATATABLE_LOCALIZATION } from "./localization/fa/datatable";
 import useTableSetting from "@/lib/hooks/useTableSetting";
 import { flattenArrayOfObjects } from "@/core/utils/flattenArrayOfObjects";
-import Toolbar from "@/components/home/Toolbar";
 import useDataTable from "@/lib/hooks/useDataTable";
 import { useMemo, useState } from "react";
-
-const data = [
-    {
-        name: {
-            firstName: "امین",
-            lastName: "قاسمپور",
-        },
-        address: "فلان جا",
-        city: "تهران",
-        state: "بررسی شده",
-        price: "20",
-        updated_at: "2024/05/02",
-        company: "همراه اول",
-        area: "منطقه 5",
-    },
-    {
-        name: {
-            firstName: "امیر حسین",
-            lastName: "محمودی",
-        },
-        address: "فلان جا",
-        city: "تهران",
-        state: "تکمیل شده",
-        price: "27",
-        updated_at: "2024/05/02",
-        company: "وایتل",
-        area: "منطقه 27",
-    },
-    {
-        name: {
-            firstName: "یاسمن",
-            lastName: "علی اکبری",
-        },
-        address: "فلان جا",
-        city: "شیراز",
-        state: "بررسی شده",
-        price: "32",
-        updated_at: "2024/05/02",
-        company: "ایرانسل",
-        area: "منطقه 23",
-    },
-    {
-        name: {
-            firstName: "حمیدرضا",
-            lastName: "رنجبرپور",
-        },
-        address: "فلان جا",
-        city: "اصفهان",
-        state: "بررسی شده",
-        price: "45",
-        updated_at: "2024/05/02",
-        company: "ایرانول",
-        area: "منطقه 21",
-    },
-    {
-        name: {
-            firstName: "محمد",
-            lastName: "جلالی",
-        },
-        address: "فلان جا",
-        city: "رشت",
-        state: "درحال بررسی",
-        price: "8",
-        updated_at: "2024/05/02",
-        company: "فیلیمو",
-        area: "منطقه 8",
-    },
-];
+import useRequest from "@/lib/hooks/useRequest";
+import useSWR from "swr";
 
 const DataTable_Main = (props) => {
+    const request = useRequest();
+    const isEmptyObject = (obj) => obj && Object.keys(obj).length === 0 && obj.constructor === Object;
     const { filterData, sortData, setSortData } = useDataTable();
-    const { table_url, user_id, page_name, table_name, columns, initialStateProps } = props;
+    const { need_filter, table_url, user_id, page_name, table_name, columns, initialStateProps, TableToolbar } = props;
     const flatColumns = flattenArrayOfObjects(columns, "columns");
     const { settingStore, hideAction } = useTableSetting();
     const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
@@ -95,15 +30,31 @@ const DataTable_Main = (props) => {
         const params = new URLSearchParams();
         params.set("start", `${pagination.pageIndex * pagination.pageSize}`);
         params.set("size", pagination.pageSize);
-        params.set("filters", JSON.stringify(filterData ?? []));
+        params.set("filters", JSON.stringify(isEmptyObject(filterData) ? [] : [filterData]));
         params.set("sorting", JSON.stringify(sortData));
         return `${table_url}?${params}`;
     }, [table_url, filterData, pagination, columns]);
 
+    const fetcher = async (url) => {
+        try {
+            const response = await request(url);
+            return response.data;
+        } catch (error) {
+            throw error;
+        }
+    };
+
+    const { data, isValidating, mutate } = useSWR(fetchUrl, fetcher, {
+        revalidateIfStale: true,
+        revalidateOnFocus: false,
+        revalidateOnReconnect: true,
+        keepPreviousData: true,
+    });
+
     const table = useMaterialReactTable({
         localization: FA_DATATABLE_LOCALIZATION,
         columns,
-        data: data,
+        data: data?.data ?? [],
         initialState: {
             density: "compact",
             columnVisibility: settingStore?.[user_id]?.[page_name]?.[table_name]?.["hides"],
@@ -111,6 +62,7 @@ const DataTable_Main = (props) => {
             ...initialStateProps,
         },
         state: {
+            showProgressBars: isValidating,
             columnVisibility: settingStore?.[user_id]?.[page_name]?.[table_name]?.["hides"],
             sorting: sortData,
             pagination,
@@ -146,7 +98,7 @@ const DataTable_Main = (props) => {
         onSortingChange: onSortingChange,
         renderTopToolbarCustomActions: ({ table }) => (
             <>
-                <Toolbar columns={flatColumns} />
+                <TableToolbar mutate={mutate} />
             </>
         ),
         ...props,
@@ -154,6 +106,7 @@ const DataTable_Main = (props) => {
 
     return (
         <DataTable_Paper
+            need_filter={need_filter}
             table={table}
             columns={flatColumns}
             user_id={user_id}