feat: add watch api in cluster

src/hooks/use-watch-list.ts

@@ -0,0 +1,83 @@
+import useSetChunkRequest from '@/hooks/use-chunk-request';
+import useUpdateChunkedList from '@/hooks/use-update-chunk-list';
+import { request } from '@umijs/max';
+import { useMemoizedFn } from 'ahooks';
+import _ from 'lodash';
+import { useEffect, useRef, useState } from 'react';
+
+export default function useWatchList<T = Record<string, any>>(API: string) {
+  const watchAPI = API;
+  const [watchDataList, setWatchDataList] = useState<T[]>([]);
+  const chunkRequestRef = useRef<any>(null);
+  const listRequestTokenRef = useRef<any>(null);
+
+  const { setChunkRequest, createAxiosToken } = useSetChunkRequest();
+
+  const { updateChunkedList, cacheDataListRef: cacheWatchDataListRef } =
+    useUpdateChunkedList({
+      dataList: watchDataList,
+      limit: 100,
+      setDataList: setWatchDataList
+    });
+
+  const updateWatchDataListHandler = (list: any) => {
+    // filter the data
+    _.each(list, (data: any) => {
+      updateChunkedList(data);
+    });
+  };
+
+  const createWatchChunkRequest = useMemoizedFn(async () => {
+    chunkRequestRef.current?.current?.cancel?.();
+    try {
+      chunkRequestRef.current = setChunkRequest({
+        url: `${watchAPI}`,
+        params: {},
+        handler: updateWatchDataListHandler
+      });
+    } catch (error) {
+      // ignore
+    }
+  });
+
+  const queryAllDataList = async (
+    params: Global.SearchParams,
+    options?: any
+  ) => {
+    return request<Global.PageResponse<T>>(watchAPI, {
+      params,
+      method: 'GET',
+      cancelToken: options?.token
+    });
+  };
+
+  const getAllDataList = useMemoizedFn(async () => {
+    try {
+      listRequestTokenRef.current?.cancel?.();
+      listRequestTokenRef.current = createAxiosToken();
+      const params = {
+        page: 1,
+        perPage: 100
+      };
+      const res: any = await queryAllDataList(params, {
+        token: listRequestTokenRef.current.token
+      });
+      cacheWatchDataListRef.current = res.items || [];
+      setWatchDataList(res.items || []);
+    } catch (error) {
+      // ignore
+    }
+  });
+
+  useEffect(() => {
+    createWatchChunkRequest();
+    return () => {
+      chunkRequestRef.current?.cancel?.();
+      listRequestTokenRef.current?.cancel?.();
+    };
+  }, []);
+
+  return {
+    watchDataList
+  };
+}