fix: update worker by fetchData

src/hooks/use-table-fetch.ts

@@ -1,3 +1,4 @@
+import { WatchEventType } from '@/config';
 import { TABLE_SORT_DIRECTIONS } from '@/config/settings';
 import useSetChunkRequest from '@/hooks/use-chunk-request';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
@@ -38,6 +39,7 @@ export default function useTableFetch<T>(
     events?: EventsType[];
     defaultQueryParams?: Record<string, any>;
     isInfiniteScroll?: boolean;
+    updateManually?: boolean;
   } & WatchConfig
 ) {
   const {
@@ -50,7 +52,8 @@ export default function useTableFetch<T>(
     defaultData = [],
     events = ['UPDATE', 'DELETE'],
     defaultQueryParams = {},
-    isInfiniteScroll = false
+    isInfiniteScroll = false,
+    updateManually
   } = options;
   const pollingRef = useRef<any>(null);
   const chunkRequedtRef = useRef<any>(null);
@@ -104,27 +107,6 @@ export default function useTableFetch<T>(
 
   const debounceSetExtraStatus = _.debounce(setExtraStatus, 3000);
 
-  const updateHandler = (list: any) => {
-    _.each(list, (data: any) => {
-      updateChunkedList(data);
-    });
-  };
-
-  const createModelsChunkRequest = async (params?: any) => {
-    if (!API || !watch) return;
-    chunkRequedtRef.current?.current?.cancel?.();
-    try {
-      const query = _.omit(params || queryParams, ['page', 'perPage']);
-
-      chunkRequedtRef.current = setChunkRequest({
-        url: `${API}?${qs.stringify(_.pickBy(query, (val: any) => !!val))}`,
-        handler: updateHandler
-      });
-    } catch (error) {
-      // ignore
-    }
-  };
-
   const fetchData = async (
     params?: { query: Record<string, any>; loadmore?: boolean },
     polling = false
@@ -205,6 +187,40 @@ export default function useTableFetch<T>(
     }
   };
 
+  const debounceFetchData = _.debounce(fetchData, 300);
+
+  const updateHandler = (list: any) => {
+    let shouldUpdate = false;
+    _.each(list, (data: any) => {
+      updateChunkedList(data);
+    });
+    shouldUpdate = list.some(
+      (data: any) =>
+        data.type === WatchEventType.DELETE ||
+        data.type === WatchEventType.CREATE
+    );
+
+    if (shouldUpdate && updateManually && dataSource.loadend) {
+      shouldUpdate = false;
+      debounceFetchData();
+    }
+  };
+
+  const createModelsChunkRequest = async (params?: any) => {
+    if (!API || !watch) return;
+    chunkRequedtRef.current?.current?.cancel?.();
+    try {
+      const query = _.omit(params || queryParams, ['page', 'perPage']);
+
+      chunkRequedtRef.current = setChunkRequest({
+        url: `${API}?${qs.stringify(_.pickBy(query, (val: any) => !!val))}`,
+        handler: updateHandler
+      });
+    } catch (error) {
+      // ignore
+    }
+  };
+
   const fetchAPIWithPolling = async (params: any) => {
     if (!polling || watch || !fetchAPI) return;
 
@@ -368,6 +384,7 @@ export default function useTableFetch<T>(
     modalRef,
     extraStatus,
     TABLE_SORT_DIRECTIONS,
+    debounceFetchData,
     setQueryParams,
     handleDelete,
     handleDeleteBatch,

src/pages/resources/components/workers.tsx

@@ -57,10 +57,10 @@ const Workers: React.FC<{
   } = useTableFetch<ListItem>({
     fetchAPI: queryWorkersList,
     deleteAPI: deleteWorker,
-    events: ['UPDATE', 'DELETE', 'INSERT'],
     contentForDelete: 'resources.worker',
     watch: true,
     API: WORKERS_API,
+    updateManually: true,
     defaultQueryParams: {
       cluster_id: clusterId
     }