From bf2ea04d02656d199d9f04459e53210c207a4620 Mon Sep 17 00:00:00 2001 From: balibabu Date: Mon, 22 Jul 2024 19:29:20 +0800 Subject: [PATCH] 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 | 67 ++++++++++++++++++++- web/src/hooks/logic-hooks.ts | 54 +++++++++++++++++ web/src/pages/file-manager/file-toolbar.tsx | 14 +++-- web/src/pages/file-manager/index.tsx | 14 +++-- 4 files changed, 134 insertions(+), 15 deletions(-) diff --git a/web/src/hooks/file-manager-hooks.ts b/web/src/hooks/file-manager-hooks.ts index ce3465336..004c055f2 100644 --- a/web/src/hooks/file-manager-hooks.ts +++ b/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; + pagination: PaginationProps; + setPagination: (pagination: { page: number; pageSize: number }) => void; +} + +export const useFetchNextFileList = (): ResponseType & 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 = 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(); diff --git a/web/src/hooks/logic-hooks.ts b/web/src/hooks/logic-hooks.ts index 9378a3a56..430f59563 100644 --- a/web/src/hooks/logic-hooks.ts +++ b/web/src/hooks/logic-hooks.ts @@ -71,6 +71,20 @@ export const useSetSelectedRecord = () => { return { currentRecord, setRecord }; }; +export const useHandleSearchChange = () => { + const [searchString, setSearchString] = useState(''); + + const handleInputChange = useCallback( + (e: React.ChangeEvent) => { + 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, diff --git a/web/src/pages/file-manager/file-toolbar.tsx b/web/src/pages/file-manager/file-toolbar.tsx index c6052de06..74db2ea07 100644 --- a/web/src/pages/file-manager/file-toolbar.tsx +++ b/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 { 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(); diff --git a/web/src/pages/file-manager/index.tsx b/web/src/pages/file-manager/index.tsx index 8eb9a14d5..398a39dd2 100644 --- a/web/src/pages/file-manager/index.tsx +++ b/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 = [ { title: t('name'), @@ -151,13 +151,15 @@ const FileManager = () => { return (