fix: fetch file list by react-query #1306 (#1640)

### What problem does this PR solve?

fix: fetch file list by react-query #1306

### Type of change

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

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

@@ -1,10 +1,21 @@
+import { ResponseType } from '@/interfaces/database/base';
 import {
   IConnectRequestBody,
   IFileListRequestBody,
 } from '@/interfaces/request/file-manager';
-import { UploadFile } from 'antd';
-import { useCallback } from 'react';
-import { useDispatch, useSelector } from 'umi';
+import fileManagerService from '@/services/file-manager-service';
+import { useQuery } from '@tanstack/react-query';
+import { PaginationProps, UploadFile } from 'antd';
+import React, { useCallback } from 'react';
+import { useDispatch, useSearchParams, useSelector } from 'umi';
+import { useGetNextPagination, useHandleSearchChange } from './logic-hooks';
+
+export const useGetFolderId = () => {
+  const [searchParams] = useSearchParams();
+  const id = searchParams.get('folderId') as string;
+
+  return id ?? '';
+};
 
 export const useFetchFileList = () => {
   const dispatch = useDispatch();
@@ -22,6 +33,56 @@ export const useFetchFileList = () => {
   return fetchFileList;
 };
 
+export interface IListResult {
+  searchString: string;
+  handleInputChange: React.ChangeEventHandler<HTMLInputElement>;
+  pagination: PaginationProps;
+  setPagination: (pagination: { page: number; pageSize: number }) => void;
+}
+
+export const useFetchNextFileList = (): ResponseType<any> & IListResult => {
+  const { searchString, handleInputChange } = useHandleSearchChange();
+  const { pagination, setPagination } = useGetNextPagination();
+  const id = useGetFolderId();
+
+  const { data } = useQuery({
+    queryKey: [
+      'fetchFileList',
+      id,
+      pagination.current,
+      pagination.pageSize,
+      searchString,
+    ],
+    initialData: {},
+    queryFn: async () => {
+      const { data } = await fileManagerService.listFile({
+        parent_id: id,
+        keywords: searchString,
+        page_size: pagination.pageSize,
+        page: pagination.current,
+      });
+
+      return data;
+    },
+  });
+
+  const onInputChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(
+    (e) => {
+      setPagination({ page: 1 });
+      handleInputChange(e);
+    },
+    [handleInputChange, setPagination],
+  );
+
+  return {
+    ...data,
+    searchString,
+    handleInputChange: onInputChange,
+    pagination: { ...pagination, total: data?.data?.total },
+    setPagination,
+  };
+};
+
 export const useRemoveFile = () => {
   const dispatch = useDispatch();
 

web/src/hooks/logic-hooks.ts

@@ -71,6 +71,20 @@ export const useSetSelectedRecord = <T = IKnowledgeFile>() => {
   return { currentRecord, setRecord };
 };
 
+export const useHandleSearchChange = () => {
+  const [searchString, setSearchString] = useState('');
+
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      const value = e.target.value;
+      setSearchString(value);
+    },
+    [],
+  );
+
+  return { handleInputChange, searchString };
+};
+
 export const useChangeLanguage = () => {
   const { i18n } = useTranslation();
   const saveSetting = useSaveSetting();
@@ -85,6 +99,46 @@ export const useChangeLanguage = () => {
   return changeLanguage;
 };
 
+export const useGetNextPagination = () => {
+  const { t } = useTranslate('common');
+  const [{ page, pageSize }, setPagination] = useState({
+    page: 1,
+    pageSize: 10,
+  });
+
+  const onPageChange: PaginationProps['onChange'] = useCallback(
+    (pageNumber: number, pageSize: number) => {
+      setPagination({ page: pageNumber, pageSize });
+    },
+    [setPagination],
+  );
+
+  const setCurrentPagination = useCallback(
+    (pagination: { page: number; pageSize?: number }) => {
+      setPagination((p) => ({ ...p, ...pagination }));
+    },
+    [setPagination],
+  );
+
+  const pagination: PaginationProps = useMemo(() => {
+    return {
+      showQuickJumper: true,
+      total: 0,
+      showSizeChanger: true,
+      current: page,
+      pageSize: pageSize,
+      pageSizeOptions: [1, 2, 10, 20, 50, 100],
+      onChange: onPageChange,
+      showTotal: (total) => `${t('total')} ${total}`,
+    };
+  }, [t, onPageChange, page, pageSize]);
+
+  return {
+    pagination,
+    setPagination: setCurrentPagination,
+  };
+};
+
 export const useGetPagination = (
   total: number,
   page: number,

web/src/pages/file-manager/file-toolbar.tsx

@@ -19,17 +19,19 @@ import {
 } from 'antd';
 import { useMemo } from 'react';
 import {
-  useFetchDocumentListOnMount,
   useHandleBreadcrumbClick,
   useHandleDeleteFile,
-  useHandleSearchChange,
   useSelectBreadcrumbItems,
 } from './hooks';
 
-import { useSelectParentFolderList } from '@/hooks/file-manager-hooks';
+import {
+  IListResult,
+  useSelectParentFolderList,
+} from '@/hooks/file-manager-hooks';
 import styles from './index.less';
 
-interface IProps {
+interface IProps
+  extends Pick<IListResult, 'searchString' | 'handleInputChange'> {
   selectedRowKeys: string[];
   showFolderCreateModal: () => void;
   showFileUploadModal: () => void;
@@ -41,10 +43,10 @@ const FileToolbar = ({
   showFolderCreateModal,
   showFileUploadModal,
   setSelectedRowKeys,
+  searchString,
+  handleInputChange,
 }: IProps) => {
   const { t } = useTranslate('knowledgeDetails');
-  useFetchDocumentListOnMount();
-  const { handleInputChange, searchString } = useHandleSearchChange();
   const breadcrumbItems = useSelectBreadcrumbItems();
   const { handleBreadcrumbClick } = useHandleBreadcrumbClick();
   const parentFolderList = useSelectParentFolderList();

web/src/pages/file-manager/index.tsx

@@ -1,4 +1,4 @@
-import { useSelectFileList } from '@/hooks/file-manager-hooks';
+import { useFetchNextFileList } from '@/hooks/file-manager-hooks';
 import { IFile } from '@/interfaces/database/file-manager';
 import { formatDate } from '@/utils/date';
 import { Button, Flex, Space, Table, Tag, Typography } from 'antd';
@@ -6,7 +6,6 @@ import { ColumnsType } from 'antd/es/table';
 import ActionCell from './action-cell';
 import FileToolbar from './file-toolbar';
 import {
-  useGetFilesPagination,
   useGetRowSelection,
   useHandleConnectToKnowledge,
   useHandleCreateFolder,
@@ -30,7 +29,7 @@ const { Text } = Typography;
 
 const FileManager = () => {
   const { t } = useTranslate('fileManager');
-  const fileList = useSelectFileList();
+  // const fileList = useSelectFileList();
   const { rowSelection, setSelectedRowKeys } = useGetRowSelection();
   const loading = useSelectFileListLoading();
   const navigateToOtherFolder = useNavigateToOtherFolder();
@@ -64,8 +63,9 @@ const FileManager = () => {
     initialValue,
     connectToKnowledgeLoading,
   } = useHandleConnectToKnowledge();
-  const { pagination } = useGetFilesPagination();
-
+  // const { pagination } = useGetFilesPagination();
+  const { pagination, data, searchString, handleInputChange } =
+    useFetchNextFileList();
   const columns: ColumnsType<IFile> = [
     {
       title: t('name'),
@@ -151,13 +151,15 @@ const FileManager = () => {
   return (
     <section className={styles.fileManagerWrapper}>
       <FileToolbar
+        searchString={searchString}
+        handleInputChange={handleInputChange}
         selectedRowKeys={rowSelection.selectedRowKeys as string[]}
         showFolderCreateModal={showFolderCreateModal}
         showFileUploadModal={showFileUploadModal}
         setSelectedRowKeys={setSelectedRowKeys}
       ></FileToolbar>
       <Table
-        dataSource={fileList}
+        dataSource={data?.files}
         columns={columns}
         rowKey={'id'}
         rowSelection={rowSelection}