use-rename-dataset.ts

Overview

The use-rename-dataset.ts file defines a custom React hook named useRenameDataset that encapsulates the logic and state management required to rename a dataset within the application. It provides a clean interface to manage the visibility of the rename modal dialog, hold the current dataset state being renamed, and handle the asynchronous update request to persist the new dataset name.

This hook is primarily intended for use within React components that need to allow users to rename datasets, abstracting away the details of modal state handling and API communication.

Detailed Explanation

useRenameDataset Hook

export const useRenameDataset = () => { ... }

Purpose

useRenameDataset manages the state and behaviors related to renaming a dataset entity (IKnowledge). It coordinates UI modal visibility, dataset selection, and the update operation.

State and Hooks Used

• dataset (IKnowledge): Holds the current dataset object selected for renaming.

• datasetRenameVisible (boolean): Indicates whether the rename modal is visible.

• showDatasetRenameModal (function): Function to show the rename modal.

• hideDatasetRenameModal (function): Function to hide the rename modal.

• saveKnowledgeConfiguration (async function): Function that updates the dataset configuration on the server.

• loading (boolean): Indicates if the rename operation is in progress.

Returned Object

The hook returns an object containing:

Methods inside useRenameDataset

onDatasetRenameOk

const onDatasetRenameOk = useCallback(
  async (name: string) => { ... },
  [saveKnowledgeConfiguration, dataset, hideDatasetRenameModal],
);

• Parameters:

  • name: The new name string to assign to the dataset.

• Returns: Promise<void>

• Behavior:

  • Constructs an update payload by omitting certain immutable or irrelevant properties from the current dataset object (id, update_time, nickname, tenant_avatar, tenant_id).

  • Replaces the dataset identifier key with kb_id set to dataset.id.

  • Calls saveKnowledgeConfiguration to persist the changes.

  • If the update is successful (ret.code === 0), it hides the rename modal.

• Usage Example:

  await onDatasetRenameOk('New Dataset Name');
  

handleShowDatasetRenameModal

const handleShowDatasetRenameModal = useCallback(
  async (record: IKnowledge) => { ... },
  [showDatasetRenameModal],
);

• Parameters:

  • record: An IKnowledge dataset object to rename.

• Returns: void

• Behavior:

  • Sets the internal dataset state to the passed dataset.

  • Shows the rename modal dialog.

• Usage Example:

  handleShowDatasetRenameModal(selectedDataset);
  

Important Implementation Details

• State Management: Uses React's useState for managing the currently selected dataset.

• Modal State Hook: Utilizes a custom hook useSetModalState for managing modal visibility, likely providing standard modal open/close utilities.

• Update Hook: Uses useUpdateKnowledge with a parameter true, suggesting it might be configured for optimistic updates or specific behavior for knowledge entities.

• Data Sanitization: Uses Lodash's omit function to exclude certain properties from the dataset before sending the update request. This protects immutable fields from being overwritten.

• Callback Memoization: Uses useCallback to memoize handlers to avoid unnecessary re-renders or effect dependencies.

• Error Handling: The hook implicitly handles errors by checking the response code from saveKnowledgeConfiguration, though it does not expose error details directly.

Interaction with Other Parts of the System

• Hooks:

  • useSetModalState (from '@/hooks/common-hooks'): Manages modal dialog state.

  • useUpdateKnowledge (from '@/hooks/use-knowledge-request'): Provides API interaction for updating knowledge/dataset configurations.

• Interfaces:

  • IKnowledge (from '@/interfaces/database/knowledge'): TypeScript interface defining the shape of a dataset object.

• Utility:

  • omit (from 'lodash'): Used to filter out specific fields from the dataset object before sending it to the API.

• Typical Usage:

  • This hook would be used by UI components that render dataset rename modals/dialogs and need to handle user input and submission.

  • The component calls showDatasetRenameModal to open the modal for a given dataset.

  • The modal uses initialDatasetName to pre-fill the input.

  • On confirmation, onDatasetRenameOk is called to persist the new name.

  • datasetRenameLoading can be used to show a spinner or disable inputs during network requests.

Visual Diagram

flowchart TD
    A[useRenameDataset Hook] --> B[State: dataset (IKnowledge)]
    A --> C[Modal State: datasetRenameVisible]
    A --> D[Modal Controls: showDatasetRenameModal, hideDatasetRenameModal]
    A --> E[Update Hook: saveKnowledgeConfiguration]
    A --> F[Handlers: onDatasetRenameOk, handleShowDatasetRenameModal]

    F -->|on confirm rename| E
    F -->|on show modal| D
    D --> C
    B --> F

Explanation:

• The main hook manages various pieces of state (dataset, datasetRenameVisible).

• It exposes modal controls to show/hide the rename dialog.

• On rename confirmation, it calls the update hook to save changes.

• The flowchart shows how state and handlers interact within the hook.

Summary

useRenameDataset is a focused React hook designed to streamline the process of renaming dataset entities in the application. By abstracting modal state management and API communication, it enables UI components to provide a smooth user experience with minimal boilerplate code. Its design follows React best practices, leveraging hooks and memoization, and integrates seamlessly with the application's knowledge management backend.

Example Usage in a React Component

import React from 'react';
import { useRenameDataset } from './use-rename-dataset';

const DatasetRenameModal = () => {
  const {
    datasetRenameVisible,
    hideDatasetRenameModal,
    showDatasetRenameModal,
    onDatasetRenameOk,
    initialDatasetName,
    datasetRenameLoading,
  } = useRenameDataset();

  // UI and form logic here...

  return (
    <Modal visible={datasetRenameVisible} onCancel={hideDatasetRenameModal}>
      <RenameForm
        initialName={initialDatasetName}
        loading={datasetRenameLoading}
        onSubmit={onDatasetRenameOk}
      />
    </Modal>
  );
};

This example demonstrates how a modal component can leverage the hook to control its visibility, initial state, and submit logic.