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,