hooks.ts

Overview

The hooks.ts file provides a collection of custom React hooks designed to manage key UI and state behaviors related to file and folder operations within a web application. Primarily, these hooks facilitate:

• Retrieving folder identifiers from URL parameters.

• Managing selection state of files in tables.

• Handling file renaming workflows including modal visibility and rename requests.

• Managing connections between files and knowledge bases with modal dialogs.

• Navigating via breadcrumb clicks.

These hooks encapsulate complex state management and UI interaction logic, promoting reusability and separation of concerns within the app's file manager and knowledge base modules.

Detailed Explanation of Exports

1. useGetFolderId

Purpose:
Extracts the current folder ID from the URL search parameters.

Parameters: None

Returns:

• string — The folder ID retrieved from the URL query parameter folderId. Returns an empty string if not present.

Usage Example:

const folderId = useGetFolderId();
console.log(`Current folder ID is: ${folderId}`);

Implementation Details:
Uses React Router's useSearchParams hook to read the folderId from the URL.

2. useGetRowSelection

Purpose:
Manages selection state for rows in a file table, including disabling selection of files originating from the 'knowledgebase' source.

Parameters: None

Returns:
An object with:

• rowSelection: Ant Design's TableRowSelection<IFile> configuration object for table row selection.

• setSelectedRowKeys: React state setter function for selected row keys.

Usage Example:

const { rowSelection, setSelectedRowKeys } = useGetRowSelection();

<Table rowSelection={rowSelection} dataSource={files} />

Implementation Details:

• Uses React's useState to track selected row keys.

• Disables checkboxes for files where source_type === 'knowledgebase'.

• Updates selection state on user interaction.

3. useRenameCurrentFile

Purpose:
Manages the file renaming process, including modal dialog visibility, current file state, and API calls to rename files.

Parameters: None

Returns:
An object containing:

• fileRenameLoading: boolean indicating if rename operation is in progress.

• initialFileName: string initial name of the file to be renamed.

• onFileRenameOk(name: string): Promise<void> — callback to trigger renaming.

• fileRenameVisible: boolean for modal visibility.

• hideFileRenameModal: function to hide the rename modal.

• showFileRenameModal(record: IFile): function to show the modal for a specific file.

Usage Example:

const {
  fileRenameLoading,
  initialFileName,
  onFileRenameOk,
  fileRenameVisible,
  hideFileRenameModal,
  showFileRenameModal,
} = useRenameCurrentFile();

// To open modal for a file
showFileRenameModal(file);

// To submit rename
await onFileRenameOk('newFileName');

Implementation Details:

• Uses useState to hold the current file selected for renaming.

• Uses a modal toggle hook useSetModalState to control modal visibility.

• Calls an async renameFile method from imported hooks.

• Closes modal only if rename operation returns success code (0).

4. useHandleConnectToKnowledge

Purpose:
Handles the connection of a file to one or more knowledge bases, managing modal visibility, state, and API interaction.

Parameters: None

Returns:
An object containing:

• initialConnectedIds: string[] initial knowledge base IDs linked to the file.

• connectToKnowledgeLoading: boolean loading state of connection operation.

• onConnectToKnowledgeOk(knowledgeIds: string[]): Promise<number> — triggers connection API call.

• connectToKnowledgeVisible: boolean modal visibility.

• hideConnectToKnowledgeModal: function to hide modal.

• showConnectToKnowledgeModal(record: IFile): function to show modal for a given file.

Usage Example:

const {
  initialConnectedIds,
  connectToKnowledgeLoading,
  onConnectToKnowledgeOk,
  connectToKnowledgeVisible,
  hideConnectToKnowledgeModal,
  showConnectToKnowledgeModal,
} = useHandleConnectToKnowledge();

// Show modal for file
showConnectToKnowledgeModal(file);

// Connect file to knowledge bases
const resultCode = await onConnectToKnowledgeOk(['kb1', 'kb2']);

Implementation Details:

• Maintains the current file record in state.

• Memoizes initial knowledge base IDs extracted from kbs_info property.

• Calls async connectFileToKnowledge API.

• Closes modal on success (return code 0).

5. useHandleBreadcrumbClick

Purpose:
Provides a handler to navigate to a specified path when a breadcrumb item is clicked.

Parameters: None

Returns:
An object:

• handleBreadcrumbClick(path?: string): void — navigates to the given path if provided.

Usage Example:

const { handleBreadcrumbClick } = useHandleBreadcrumbClick();

<Breadcrumb.Item onClick={() => handleBreadcrumbClick('/folder/123')}>
  Folder 123
</Breadcrumb.Item>

Implementation Details:

• Uses useNavigate from umi to programmatically navigate.

• Safe guards against undefined paths.

Important Implementation Details and Algorithms

• Modal State Management:
  Multiple hooks leverage a reusable useSetModalState hook (imported) that exposes visible, showModal, and hideModal to manage modal dialogs consistently across rename and connect-to-knowledge workflows.

• Async Operations with Feedback:
  Rename and connect operations use async callbacks with loading states and conditional modal hiding based on success response codes (0).

• Selection Control Logic:
  The row selection hook disables selection for files that come from a 'knowledgebase' source, helping enforce UI rules without external intervention.

• Memoization:
  The knowledge base IDs are memoized to avoid unnecessary recalculations or re-renders when the current file record changes.

Interaction with Other Parts of the System

• Imports:

  • useSetModalState from common hooks manages modal visibility.

  • useConnectToKnowledge and useRenameFile from file-manager-hooks provide API interfaces for file operations.

  • IFile interface models file data structure.

  • Ant Design's Table selection types (TableRowSelection) are used for UI integration.

  • React Router (useNavigate, useSearchParams) and Umi integration for routing/navigation.

• UI Components:
  The hooks are designed to be consumed in React components responsible for rendering file lists, modals for renaming files, connecting files to knowledge bases, and breadcrumbs.

• State Management:
  The hooks encapsulate local state management for UI states (modal visibility, selected rows) and coordinate asynchronous API calls, isolating those concerns from UI components.

Mermaid Diagram

The file is a utility/hooks module without classes but contains multiple hooks (functions). A flowchart is suitable to illustrate their relationships and main responsibilities.

flowchart TD
  A[useGetFolderId] -->|provides| B[folderId string]

  C[useGetRowSelection] -->|manages| D[selectedRowKeys & rowSelection]

  E[useRenameCurrentFile] -->|manages| F[file state]
  E -->|controls| G[Rename Modal visibility]
  E -->|calls| H[renameFile API]

  I[useHandleConnectToKnowledge] -->|manages| J[file record state]
  I -->|controls| K[Connect Modal visibility]
  I -->|calls| L[connectFileToKnowledge API]

  M[useHandleBreadcrumbClick] -->|provides| N[navigate function]

  style A fill:#BBDEFB,stroke:#0D47A1,stroke-width:1px
  style C fill:#C8E6C9,stroke:#1B5E20,stroke-width:1px
  style E fill:#FFCCBC,stroke:#BF360C,stroke-width:1px
  style I fill:#D1C4E9,stroke:#4A148C,stroke-width:1px
  style M fill:#FFF9C4,stroke:#F57F17,stroke-width:1px

Summary

The hooks.ts file centralizes key reusable hooks that handle folder identification, file selection, renaming workflows, knowledge base connections, and navigation interactions. The encapsulated logic improves maintainability and consistency in UI behavior across the file manager and knowledge base integration parts of the application. The file relies on external API hooks and modal state hooks to coordinate asynchronous operations and user interface state.

This modular design enables developers to build complex UI components with minimal boilerplate, focusing on rendering and user experience.