use-move-file.ts

Overview

The use-move-file.ts file defines a custom React hook named useHandleMoveFile that encapsulates the logic required to move one or multiple files within a file management UI context. This hook manages modal visibility for the move operation, handles the move request via an API hook, and maintains state related to the files being moved and whether the move is a bulk operation.

This hook is designed to be integrated into React components that require file moving functionality, providing a clean interface to open/close the move modal, execute the move operation, and manage related UI states such as loading indicators.

Detailed Explanation

useHandleMoveFile Hook

useHandleMoveFile({
  clearRowSelection,
}: Pick<UseRowSelectionType, 'clearRowSelection'>)

Purpose

• Provides state management and handlers for moving files.

• Controls modal visibility for the "move file" dialog.

• Executes the move file operation via an API hook.

• Manages selection state cleanup after a successful bulk move.

Parameters

• clearRowSelection: A function (passed from an external hook UseRowSelectionType) that clears any selected rows/files in the UI. This is particularly useful after a bulk move to reset the selection state.

Returned Object

The hook returns the following properties and functions:

Internal State & Variables

• moveFileVisible, hideMoveFileModal, showMoveFileModal: Controlled by the useSetModalState hook, responsible for modal visibility.

• moveFile and loading: From the useMoveFile hook, handles the actual file move API request and loading state.

• sourceFileIds: State array holding the IDs of files to be moved.

• isBulkRef: A React ref to track whether the current move operation is a bulk move (multiple files) or single file.

Methods

onMoveFileOk

async function onMoveFileOk(targetFolderId: string): Promise<number>

• Parameters: targetFolderId - The destination folder's ID where files should be moved.

• Returns: A number status code from the move operation (commonly 0 indicating success).

• Behavior:

  • Calls moveFile API with src_file_ids (source files) and dest_file_id (destination folder).

  • If the move is successful (ret === 0):

    • If it was a bulk move (isBulkRef.current === true), clears the selected rows/files via clearRowSelection.

    • Hides the move file modal.

  • Returns the API call result for further handling.

handleShowMoveFileModal

function handleShowMoveFileModal(ids: string[], isBulk = false): void

• Parameters:

  • ids: Array of file IDs to move.

  • isBulk: Boolean indicating if the move is bulk or single (default false).

• Behavior:

  • Sets the isBulkRef ref accordingly.

  • Updates the sourceFileIds state with the passed IDs.

  • Shows the move file modal.

Usage Example

import React from 'react';
import { useHandleMoveFile } from './use-move-file';
import { useRowSelection } from '@/hooks/logic-hooks/use-row-selection';

const FileMoveComponent = () => {
  const { clearRowSelection } = useRowSelection();
  const {
    moveFileVisible,
    showMoveFileModal,
    hideMoveFileModal,
    onMoveFileOk,
    moveFileLoading,
  } = useHandleMoveFile({ clearRowSelection });

  const onUserInitiatedMove = () => {
    // For example, move selected files
    showMoveFileModal(['fileId1', 'fileId2'], true);
  };

  const onConfirmMove = async (targetFolderId: string) => {
    const result = await onMoveFileOk(targetFolderId);
    if (result === 0) {
      // Move successful
    }
  };

  return (
    <>
      {/* UI components that trigger move modal */}
      {moveFileVisible && (
        <MoveFileModal
          loading={moveFileLoading}
          onOk={onConfirmMove}
          onCancel={hideMoveFileModal}
        />
      )}
      <button onClick={onUserInitiatedMove}>Move Files</button>
    </>
  );
};

Important Implementation Details

• Modal State Management: Uses a custom hook useSetModalState to handle modal visibility cleanly, abstracting away the toggling logic.

• API Interaction: Delegates file move requests to useMoveFile, which presumably wraps the API calls related to file operations.

• Bulk vs Single Move Handling: Uses a React useRef (isBulkRef) to track if the current move operation involves multiple files, which influences whether the selection should be cleared post-operation.

• Performance: Uses useCallback extensively to memoize functions that control the modal and move operations, avoiding unnecessary re-renders or recreations of these functions.

• State Isolation: The hook maintains its own state (sourceFileIds) isolated from external components, promoting encapsulation.

Interaction with Other Parts of the System

• useSetModalState Hook: Provides modal visibility state and handlers, likely a common utility hook used across the application for modal dialogs.

• useRowSelection Hook: External hook managing the selection state of rows/files in UI components. The clearRowSelection method is injected into this hook to reset selection upon bulk moves.

• useMoveFile Hook: Handles the actual move file API request and loading status, abstracting backend interaction.

• UI Components: This hook is intended to be consumed by React components that display file lists and modals for moving files.

Type Exports

• UseMoveDocumentReturnType: The return type of useHandleMoveFile, useful for typing variables or props that consume this hook.

• UseMoveDocumentShowType: A partial type exposing only the showMoveFileModal method, which can be used when only the modal triggering functionality is needed.

Mermaid Diagram

This flowchart illustrates the main functions in the useHandleMoveFile hook and their relationships:

flowchart TD
    A[useHandleMoveFile Hook] --> B[useSetModalState]
    A --> C[useMoveFile]
    A --> D[sourceFileIds State]
    A --> E[isBulkRef Ref]

    subgraph ModalControl
        B --> moveFileVisible["moveFileVisible (boolean)"]
        B --> showMoveFileModal["showMoveFileModal()"]
        B --> hideMoveFileModal["hideMoveFileModal()"]
    end

    subgraph MoveOperation
        C --> moveFile["moveFile()"]
        C --> loading["loading (boolean)"]
    end

    A --> F[handleShowMoveFileModal(ids[], isBulk)]
    A --> G[onMoveFileOk(targetFolderId)]

    F -->|sets| E
    F -->|sets| D
    F -->|calls| B.showMoveFileModal

    G -->|calls| C.moveFile
    G -->|on success| B.hideMoveFileModal
    G -->|if bulk| clearRowSelection

    classDef hook fill:#f9f,stroke:#333,stroke-width:1px;
    class A hook;

Summary

The use-move-file.ts file provides a focused and reusable React hook for handling the "move file" functionality in a file management system. It cleanly abstracts modal management, API interaction, and state handling related to moving files, supporting both single and bulk operations. The hook integrates with other system hooks such as modal state management and file selection state, allowing for composability and maintainability in complex UI workflows.