CFE-24 Merge branch 'bugfix/CFE-24_datatable' into 'develop'

src/core/components/DataTable.jsx

@@ -9,56 +9,45 @@ 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([]);
     const [sorting, setSorting] = useState([]);
     const [pagination, setPagination] = useState({pageIndex: 0, pageSize: 10});
-    const [rowCount, setRowCount] = useState(0);
     const [columnFilterFns, setColumnFilterFns] = useState(() => {
         let output = {};
         const list = props.columns.map((item) =>
             item.enableColumnFilter ? {[item.id]: item.filterFn} : {[item.id]: ""}
         );
-        for (var key in list) {
-            var nestedObj = list[key];
-            for (var nestedKey in nestedObj) {
+        for (const key in list) {
+            const nestedObj = list[key];
+            for (const nestedKey in nestedObj) {
                 output[nestedKey] = nestedObj[nestedKey];
             }
         }
         return output;
     });
 
-    const [updateTime, setupdateTime] = useState(
+    const [updateTime, setUpdateTime] = useState(
         moment().format("HH:mm | jYYYY/jM/jD")
     );
 
     const tableLocalization = useMemo(
         () =>
-            languageList.find((item) => item.key == languageApp).tableLocalization,
+            languageList.find((item) => item.key === languageApp).tableLocalization,
         [languageApp, languageList]
     );
 
     const fetchUrl = useMemo(() => {
-        const url = new URL(props.tableUrl);
-        url.searchParams.set(
+        const params = new URLSearchParams();
+        params.set(
             "start",
             `${pagination.pageIndex * pagination.pageSize}`
         );
         const filters = columnFilters.map((filter) => {
             let datatype;
             for (const i in props.columns) {
-                if (props.columns[i].id == filter.id) {
+                if (props.columns[i].id === filter.id) {
                     datatype = props.columns[i].datatype;
                 }
             }
@@ -68,10 +57,10 @@ function DataTable(props) {
                 datatype: datatype,
             };
         });
-        url.searchParams.set("size", pagination.pageSize);
-        url.searchParams.set("filters", JSON.stringify(filters ?? []));
-        url.searchParams.set("sorting", JSON.stringify(sorting ?? []));
-        return url;
+        params.set("size", pagination.pageSize);
+        params.set("filters", JSON.stringify(filters ?? []));
+        params.set("sorting", JSON.stringify(sorting ?? []));
+        return `${props.tableUrl}?${params}`;
     }, [
         props.tableUrl,
         columnFilters,
@@ -81,20 +70,27 @@ function DataTable(props) {
         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"));
+        setUpdateTime(moment().format("HH:mm | jYYYY/jM/jD"));
     }, [isValidating, languageApp]);
 
     return (
         <MaterialReactTable
             localization={tableLocalization}
-            data={data ?? []}
+            data={data?.data ?? []}
             manualFiltering
             manualPagination
             manualSorting
@@ -125,7 +121,7 @@ function DataTable(props) {
             }}
             enableColumnFilterModes
             muiTablePaperProps={{elevation: 0}}
-            rowCount={rowCount}
+            rowCount={data?.meta.totalRowCount}
             onColumnFilterFnsChange={setColumnFilterFns}
             onColumnFiltersChange={setColumnFilters}
             onPaginationChange={setPagination}
@@ -134,7 +130,7 @@ function DataTable(props) {
             renderTopToolbarCustomActions={({table}) => (
                 <>
                     {props.enableCustomToolbar /* send condition */
-                        ? <props.CustomToolbar fetchUrl={fetchUrl} mutate={mutate} /> /* send component */
+                        ? <props.CustomToolbar fetchUrl={fetchUrl} mutate={mutate}/> /* send component */
                         : "<span></span>"}
                 </>
             )}
@@ -159,6 +155,7 @@ function DataTable(props) {
                 </>
             )}
             state={{
+                showProgressBars: isValidating,
                 columnFilters,
                 columnFilterFns,
                 pagination,