use-bulk-operate-file.tsx

Overview

The useBulkOperateFile hook provides a reusable interface to define bulk operations for a set of file items selected in a UI table or list. It offers a standardized way to handle common bulk actions such as moving or deleting multiple files at once. The hook integrates with selection state management, translation/localization, and file operation handlers, enabling seamless interaction within a file management system.

This hook returns an action list consisting of bulk operation items with labels, icons, and callbacks that can be wired directly to UI components such as buttons or menus.

Detailed Explanation

useBulkOperateFile Hook

function useBulkOperateFile({
  files,
  rowSelection,
  showMoveFileModal,
  setRowSelection,
}: {
  files: IFile[];
  rowSelection: RowSelectionState;
  setRowSelection: OnChangeFn<RowSelectionState>;
} & UseMoveDocumentShowType): {
  list: {
    id: string;
    label: string;
    icon: JSX.Element;
    onClick: () => void | Promise<void>;
  }[];
}

Parameters

• files (IFile[]):
  An array of file objects representing the available files in the current context. Each file conforms to the interface IFile, which describes the file's properties (not included in this file, but likely includes id, name, path, etc.).

• rowSelection (RowSelectionState):
  The current selection state of the rows/files, typically an object where keys are file identifiers and values are booleans indicating if the file is selected.

• setRowSelection (OnChangeFn<RowSelectionState>):
  A setter function to update the row selection state. This function is called to clear the selection after certain operations (e.g., after deleting files).

• showMoveFileModal ((ids: string[], show: boolean) => void from UseMoveDocumentShowType):
  A function to trigger the display of a modal dialog to move selected files. It accepts the IDs of selected files and a boolean to show or hide the modal.

Returns

• list (Array<{id, label, icon, onClick}>):
  An array of bulk operation objects, each representing a bulk action with:

  • id: A string identifier for the action.

  • label: A localized text label for UI display.

  • icon: A React JSX element representing the action icon.

  • onClick: A callback function executed when the action is invoked.

Usage Example

const { list } = useBulkOperateFile({
  files: myFiles,
  rowSelection: selectedRows,
  setRowSelection: setSelectedRows,
  showMoveFileModal: openMoveModal,
});

// In a component rendering bulk action buttons
return (
  <>
    {list.map(({ id, label, icon, onClick }) => (
      <button key={id} onClick={onClick} aria-label={label}>
        {icon} {label}
      </button>
    ))}
  </>
);

Implementation Details

• Selection Handling:
  The hook uses the imported useSelectedIds hook to derive an array of selected file IDs from the rowSelection state and the full list of files.

• Localization:
  The useTranslation hook from react-i18next localizes the action labels (common.move and common.delete).

• Bulk Actions Defined:

  1. Move:
     Opens a modal dialog passing the list of selected file IDs to allow the user to move files to another folder/location.

  2. Delete:
     Calls handleRemoveFile from the useHandleDeleteFile hook with the selected IDs, and if successful (indicated by a returned code 0), clears the selection by resetting rowSelection to an empty object.

• Icons:
  Icons are imported from the lucide-react library:

  • FolderInput icon for the move action.

  • Trash2 icon for the delete action.

Interaction With Other Parts of the Application

• File Data Model (IFile Interface):
  This hook expects file entities conforming to the IFile interface, which is likely defined in the database/file manager module, ensuring consistent data structure.

• Selection State (rowSelection):
  Works tightly with the table or list component's row selection state, typically managed by @tanstack/react-table.

• File Operations:

  • useHandleDeleteFile provides the implementation to delete files.

  • UseMoveDocumentShowType provides the mechanism to display the move file modal.

• UI Layer:
  The returned list array is designed to be plugged into UI components that render bulk action controls (buttons, menus, etc.), ensuring centralized business logic for bulk file operations.

Visual Diagram

componentDiagram
    component useBulkOperateFile {
        +files: IFile[]
        +rowSelection: RowSelectionState
        +setRowSelection: OnChangeFn<RowSelectionState>
        +showMoveFileModal(ids: string[], show: boolean)
        --
        +list: Array<{id, label, icon, onClick}>
    }

    component useSelectedIds {
        +selectedIds: string[]
    }

    component useHandleDeleteFile {
        +handleRemoveFile(ids: string[]): Promise<number>
    }

    component useTranslation {
        +t(key: string): string
    }

    useBulkOperateFile --> useSelectedIds : uses
    useBulkOperateFile --> useHandleDeleteFile : uses
    useBulkOperateFile --> useTranslation : uses
    useBulkOperateFile --> showMoveFileModal : calls
    useBulkOperateFile --> setRowSelection : calls

Summary

useBulkOperateFile is a concise yet powerful hook designed to encapsulate common bulk file operations in a file management UI. It abstracts selection processing, localization, and action execution, providing a straightforward interface to integrate bulk actions like move and delete into components managing file lists or tables. This modular approach promotes code reuse, separation of concerns, and maintainability in the file management system.