fix: test chunk by @tanstack/react-query #1306 (#1719)

### What problem does this PR solve?

fix: test chunk by @tanstack/react-query #1306

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/hooks/file-manager-hooks.ts

@@ -7,7 +7,10 @@ import { PaginationProps, UploadFile, message } from 'antd';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSearchParams } from 'umi';
-import { useGetNextPagination, useHandleSearchChange } from './logic-hooks';
+import {
+  useGetPaginationWithRouter,
+  useHandleSearchChange,
+} from './logic-hooks';
 import { useSetPaginationParams } from './route-hook';
 
 export const useGetFolderId = () => {
@@ -27,7 +30,7 @@ export interface IListResult {
 
 export const useFetchFileList = (): ResponseType<any> & IListResult => {
   const { searchString, handleInputChange } = useHandleSearchChange();
-  const { pagination, setPagination } = useGetNextPagination();
+  const { pagination, setPagination } = useGetPaginationWithRouter();
   const id = useGetFolderId();
 
   const { data, isFetching: loading } = useQuery({

web/src/hooks/knowledge-hooks.ts

@@ -1,11 +1,19 @@
 import { useShowDeleteConfirm } from '@/hooks/common-hooks';
-import { IKnowledge } from '@/interfaces/database/knowledge';
+import { ResponsePostType } from '@/interfaces/database/base';
+import { IKnowledge, ITestingResult } from '@/interfaces/database/knowledge';
 import i18n from '@/locales/config';
 import kbService from '@/services/knowledge-service';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  useIsMutating,
+  useMutation,
+  useMutationState,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query';
 import { message } from 'antd';
 import { useCallback, useEffect } from 'react';
 import { useDispatch, useSearchParams, useSelector } from 'umi';
+import { useSetPaginationParams } from './route-hook';
 
 export const useKnowledgeBaseId = (): string => {
   const [searchParams] = useSearchParams();
@@ -217,41 +225,65 @@ export const useUpdateKnowledge = () => {
 
 //#region Retrieval testing
 
-export const useTestChunkRetrieval = () => {
-  const dispatch = useDispatch();
+export const useTestChunkRetrieval = (): ResponsePostType<ITestingResult> & {
+  testChunk: (...params: any[]) => void;
+} => {
   const knowledgeBaseId = useKnowledgeBaseId();
+  const { page, size: pageSize } = useSetPaginationParams();
 
-  const testChunk = useCallback(
-    (values: any) => {
-      dispatch({
-        type: 'testingModel/testDocumentChunk',
-        payload: {
-          ...values,
-          kb_id: knowledgeBaseId,
-        },
-      });
-    },
-    [dispatch, knowledgeBaseId],
-  );
-
-  return testChunk;
-};
-
-export const useTestNextChunkRetrieval = () => {
   const {
     data,
     isPending: loading,
     mutateAsync,
   } = useMutation({
-    mutationKey: ['testChunk'],
-    mutationFn: async (canvasIds: string[]) => {
-      const { data } = await kbService.retrieval_test({ canvasIds });
+    mutationKey: ['testChunk'], // This method is invalid
+    mutationFn: async (values: any) => {
+      const { data } = await kbService.retrieval_test({
+        ...values,
+        kb_id: knowledgeBaseId,
+        page,
+        size: pageSize,
+      });
       if (data.retcode === 0) {
+        const res = data.data;
+        return {
+          chunks: res.chunks,
+          documents: res.doc_aggs,
+          total: res.total,
+        };
       }
-      return data?.data ?? [];
+      return (
+        data?.data ?? {
+          chunks: [],
+          documents: [],
+          total: 0,
+        }
+      );
     },
   });
 
-  return { data, loading, testChunk: mutateAsync };
+  return {
+    data: data ?? { chunks: [], documents: [], total: 0 },
+    loading,
+    testChunk: mutateAsync,
+  };
+};
+
+export const useChunkIsTesting = () => {
+  return useIsMutating({ mutationKey: ['testChunk'] }) > 0;
+};
+
+export const useSelectTestingResult = (): ITestingResult => {
+  const data = useMutationState({
+    filters: { mutationKey: ['testChunk'] },
+    select: (mutation) => {
+      return mutation.state.data;
+    },
+  });
+  return (data.at(-1) ?? {
+    chunks: [],
+    documents: [],
+    total: 0,
+  }) as ITestingResult;
 };
 //#endregion

web/src/hooks/logic-hooks.ts

@@ -95,7 +95,7 @@ export const useChangeLanguage = () => {
   return changeLanguage;
 };
 
-export const useGetNextPagination = () => {
+export const useGetPaginationWithRouter = () => {
   const { t } = useTranslate('common');
   const {
     setPaginationParams,
@@ -136,29 +136,32 @@ export const useGetNextPagination = () => {
   };
 };
 
-export const useGetPagination = (
-  total: number,
-  page: number,
-  pageSize: number,
-  onPageChange: PaginationProps['onChange'],
-) => {
+export const useGetPagination = () => {
+  const [pagination, setPagination] = useState({ page: 1, pageSize: 10 });
   const { t } = useTranslate('common');
 
-  const pagination: PaginationProps = useMemo(() => {
+  const onPageChange: PaginationProps['onChange'] = useCallback(
+    (pageNumber: number, pageSize: number) => {
+      setPagination({ page: pageNumber, pageSize });
+    },
+    [],
+  );
+
+  const currentPagination: PaginationProps = useMemo(() => {
     return {
       showQuickJumper: true,
-      total,
+      total: 0,
       showSizeChanger: true,
-      current: page,
-      pageSize: pageSize,
+      current: pagination.page,
+      pageSize: pagination.pageSize,
       pageSizeOptions: [1, 2, 10, 20, 50, 100],
       onChange: onPageChange,
       showTotal: (total) => `${t('total')} ${total}`,
     };
-  }, [t, onPageChange, page, pageSize, total]);
+  }, [t, onPageChange, pagination]);
 
   return {
-    pagination,
+    pagination: currentPagination,
   };
 };