Feat: Deleting files in batches. #3221 (#7234)

### What problem does this PR solve?
Feat: Deleting files in batches. #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/hooks/use-file-request.ts

@@ -1,9 +1,18 @@
-import { IFolder } from '@/interfaces/database/file-manager';
+import {
+  IFetchFileListResult,
+  IFolder,
+} from '@/interfaces/database/file-manager';
 import fileManagerService from '@/services/file-manager-service';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { message } from 'antd';
+import { useDebounce } from 'ahooks';
+import { PaginationProps, message } from 'antd';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSearchParams } from 'umi';
+import {
+  useGetPaginationWithRouter,
+  useHandleSearchChange,
+} from './logic-hooks';
 import { useSetPaginationParams } from './route-hook';
 
 export const enum FileApiAction {
@@ -12,6 +21,7 @@ export const enum FileApiAction {
   MoveFile = 'moveFile',
   CreateFolder = 'createFolder',
   FetchParentFolderList = 'fetchParentFolderList',
+  DeleteFile = 'deleteFile',
 }
 
 export const useGetFolderId = () => {
@@ -136,3 +146,85 @@ export const useFetchParentFolderList = () => {
 
   return data;
 };
+
+export interface IListResult {
+  searchString: string;
+  handleInputChange: React.ChangeEventHandler<HTMLInputElement>;
+  pagination: PaginationProps;
+  setPagination: (pagination: { page: number; pageSize: number }) => void;
+  loading: boolean;
+}
+
+export const useFetchFileList = () => {
+  const { searchString, handleInputChange } = useHandleSearchChange();
+  const { pagination, setPagination } = useGetPaginationWithRouter();
+  const id = useGetFolderId();
+  const debouncedSearchString = useDebounce(searchString, { wait: 500 });
+
+  const { data, isFetching: loading } = useQuery<IFetchFileListResult>({
+    queryKey: [
+      FileApiAction.FetchFileList,
+      {
+        id,
+        debouncedSearchString,
+        ...pagination,
+      },
+    ],
+    initialData: { files: [], parent_folder: {} as IFolder, total: 0 },
+    gcTime: 0,
+    queryFn: async () => {
+      const { data } = await fileManagerService.listFile({
+        parent_id: id,
+        keywords: debouncedSearchString,
+        page_size: pagination.pageSize,
+        page: pagination.current,
+      });
+
+      return data?.data;
+    },
+  });
+
+  const onInputChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(
+    (e) => {
+      setPagination({ page: 1 });
+      handleInputChange(e);
+    },
+    [handleInputChange, setPagination],
+  );
+
+  return {
+    ...data,
+    searchString,
+    handleInputChange: onInputChange,
+    pagination: { ...pagination, total: data?.total },
+    setPagination,
+    loading,
+  };
+};
+
+export const useDeleteFile = () => {
+  const { setPaginationParams } = useSetPaginationParams();
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  const {
+    data,
+    isPending: loading,
+    mutateAsync,
+  } = useMutation({
+    mutationKey: [FileApiAction.DeleteFile],
+    mutationFn: async (params: { fileIds: string[]; parentId: string }) => {
+      const { data } = await fileManagerService.removeFile(params);
+      if (data.code === 0) {
+        message.success(t('message.deleted'));
+        setPaginationParams(1); // TODO: There should be a better way to paginate the request list
+        queryClient.invalidateQueries({
+          queryKey: [FileApiAction.FetchFileList],
+        });
+      }
+      return data.code;
+    },
+  });
+
+  return { data, loading, deleteFile: mutateAsync };
+};