use-delete-graph.ts

Overview

The use-delete-graph.ts file defines a custom React hook named useDeleteKnowledgeGraph. This hook encapsulates the logic required to delete a knowledge graph entity from the system and then navigate the user back to the relevant dataset page after successful deletion. It integrates network or backend operations (via useRemoveKnowledgeGraph), navigation controls (via useNavigatePage), and URL parameter extraction (via useParams from umi).

This hook is intended to be used within React components where knowledge graph deletion functionality is needed, providing a clean and reusable interface for triggering the deletion and handling post-deletion navigation.

Detailed Explanation

useDeleteKnowledgeGraph()

Description

A custom React hook that manages the deletion of a knowledge graph and subsequent navigation to the dataset view page. It returns a handler function to perform the deletion and a loading state indicator.

Returns

An object containing:

• handleDeleteKnowledgeGraph: () => Promise<void>

  • An async function that triggers the deletion process.

  • On successful deletion (indicated when the removal function returns 0), it navigates the user to the dataset page identified by the current URL parameter.

• loading: boolean

  • A boolean flag indicating if the deletion operation is currently in progress.

Usage Example

import React from 'react';
import { useDeleteKnowledgeGraph } from './use-delete-graph';

function DeleteGraphButton() {
  const { handleDeleteKnowledgeGraph, loading } = useDeleteKnowledgeGraph();

  return (
    <button onClick={handleDeleteKnowledgeGraph} disabled={loading}>
      {loading ? 'Deleting...' : 'Delete Knowledge Graph'}
    </button>
  );
}

Parameters

• The hook does not take any parameters. It internally extracts the necessary knowledge graph ID from the URL parameters using useParams and uses other hooks to perform operations.

Implementation Details

• Dependencies:

  • useRemoveKnowledgeGraph: Provides the mutation function removeKnowledgeGraph for deleting the knowledge graph and a loading state.

  • useNavigatePage: Provides navigation functions, specifically navigateToDataset which navigates to the dataset page by ID.

  • useParams: Extracts dynamic parameters from the URL, specifically the id which identifies the dataset associated with the knowledge graph.

• Logic:
  The handleDeleteKnowledgeGraph function is wrapped in useCallback to memoize it based on its dependencies (id, navigateToDataset, removeKnowledgeGraph).
  When invoked, it:

  1. Calls removeKnowledgeGraph() to attempt deletion.

  2. Checks if the return value is 0 (indicating success).

  3. If successful and the id param exists, calls navigateToDataset(id) to redirect to the dataset page.

Interaction with Other Parts of the System

• useRemoveKnowledgeGraph Hook:
  This hook likely encapsulates API calls or state management related to knowledge graph deletion. It returns a mutation function and loading state, allowing useDeleteKnowledgeGraph to trigger backend deletion and react to the operation state.

• useNavigatePage Hook:
  Provides navigation utilities. navigateToDataset is a function that returns a navigation function targeting the dataset page, enabling redirection after deletion.

• umi's useParams:
  Used to extract the dataset id from the current URL, which is necessary to know where to redirect post-deletion.

• React Components:
  This hook is designed to be used inside React components that render UI elements (like buttons) for deleting knowledge graphs. The components use the returned handler and loading state to control user interactions and UI feedback.

Mermaid Diagram: Hook Flowchart

flowchart TD
    A[useDeleteKnowledgeGraph Hook] --> B[useRemoveKnowledgeGraph Hook]
    A --> C[useNavigatePage Hook]
    A --> D[useParams (from umi)]
    B --> E[removeKnowledgeGraph() - delete API call]
    C --> F[navigateToDataset(id) - navigation function]

    subgraph handleDeleteKnowledgeGraph
        E --> G{ret === 0?}
        G -- Yes --> F
        G -- No --> H[No navigation]
    end

    A --> handleDeleteKnowledgeGraph
    A --> loading[loading state from useRemoveKnowledgeGraph]

Summary

use-delete-graph.ts provides a clean encapsulation of the deletion and navigation workflow for knowledge graphs within the application. It abstracts the complexity of API interaction and route navigation, exposing a simple API to components that require delete functionality. This promotes code reuse, separation of concerns, and consistency in user experience after deletion actions.