hooks.ts

Overview

The hooks.ts file contains two custom React hooks designed to manage state and behaviors related to knowledge management within an application. These hooks abstract common UI and data handling logic to promote reusability and maintainability in components that involve searching knowledge items and saving (creating) new knowledge entries.

• useSearchKnowledge: Manages the search input state for knowledge items.

• useSaveKnowledge: Provides modal state management and logic for creating a new knowledge entry, including navigation upon successful creation.

These hooks integrate with other parts of the system by utilizing shared hooks (useSetModalState, useCreateKnowledge), routing constants (KnowledgeRouteKey), and navigation (useNavigate from umi).

Detailed Descriptions

1. useSearchKnowledge

Purpose

Manages the state of a search string input for filtering or searching knowledge items. It encapsulates the state and change handler logic for a controlled input element.

Usage

This hook is useful in components where users need to input search terms to filter or query knowledge entries.

Implementation Details

• Uses React's useState to hold the search string.

• Provides a change handler function to update the search string on user input.

API

const { searchString, handleInputChange } = useSearchKnowledge();

Example

const SearchComponent = () => {
  const { searchString, handleInputChange } = useSearchKnowledge();

  return (
    <input 
      type="text" 
      value={searchString} 
      onChange={handleInputChange} 
      placeholder="Search knowledge..."
    />
  );
};

2. useSaveKnowledge

Purpose

Manages the modal visibility state and handles the creation of new knowledge entries. It integrates with a creation API hook and handles post-creation navigation.

Usage

Used in components that allow users to create new knowledge items, providing UI modal control and save logic.

Implementation Details

• Uses useSetModalState for modal visibility control (visible, showModal, hideModal).

• Uses useCreateKnowledge to trigger knowledge creation API calls.

• Uses useNavigate from umi for programmatic navigation.

• Exposes an async callback onCreateOk that accepts a knowledge name, calls the creation API, and on success, closes the modal and navigates to the new knowledge configuration page.

• Uses React's useCallback to memoize the onCreateOk function for performance optimization.

API

const { loading, onCreateOk, visible, hideModal, showModal } = useSaveKnowledge();

Parameters

• name (string): The name for the new knowledge item to be created.

Behavior

• Calls createKnowledge API with { name }.

• On success (ret?.code === 0), the modal is hidden and navigation happens to the knowledge configuration page with the newly created knowledge ID.

Example

const CreateKnowledgeModal = () => {
  const { loading, onCreateOk, visible, hideModal, showModal } = useSaveKnowledge();

  const handleSubmit = () => {
    onCreateOk('New Knowledge Name');
  };

  return (
    <>
      <button onClick={showModal}>Create Knowledge</button>
      {visible && (
        <Modal onCancel={hideModal} onOk={handleSubmit} confirmLoading={loading}>
          {/* Modal content */}
        </Modal>
      )}
    </>
  );
};

Important Implementation Details

• The file imports specialized hooks from other parts of the application:

  • useSetModalState handles generalized modal visibility state management.

  • useCreateKnowledge is likely an API hook performing the network request to create knowledge entries.

• Navigation uses the umi framework's useNavigate hook, enabling SPA-style routing.

• The KnowledgeRouteKey.Configuration constant is used to construct the route for the knowledge configuration page, ensuring consistency.

• The onCreateOk function is memoized with useCallback to prevent unnecessary re-renders or effect re-executions in consuming components.

Interaction With Other System Parts

• Constants: Imports KnowledgeRouteKey for routing paths, ensuring route keys are consistent across the codebase.

• Hooks: Relies on shared hooks (useSetModalState, useCreateKnowledge) which encapsulate modal state logic and API communication respectively, promoting separation of concerns.

• Routing: Uses useNavigate from umi for navigation after creation, integrating with the application's routing system.

• Components: These hooks are designed to be used in React components dealing with knowledge search and creation UI.

Mermaid Diagram: Flowchart of Hook Functions and Relationships

flowchart TD
    A[useSearchKnowledge] --> B[searchString state]
    A --> C[handleInputChange]

    D[useSaveKnowledge] --> E[useSetModalState]
    D --> F[useCreateKnowledge]
    D --> G[useNavigate]

    E --> H[visible, showModal, hideModal]
    F --> I[loading, createKnowledge]
    G --> J[navigate]

    D --> K[onCreateOk(name)]
    K --> L[createKnowledge({ name })]
    L --> M{ret?.code === 0?}
    M -- yes --> N[hideModal()]
    M -- yes --> O[navigate to /knowledge/configuration?id=kb_id]

Summary

The hooks.ts file provides two reusable hooks focused on managing knowledge-related UI logic:

• useSearchKnowledge: Simplifies search input state management.

• useSaveKnowledge: Coordinates modal visibility, knowledge creation, and navigation upon success.

By abstracting these behaviors, this file supports clean, maintainable UI components that integrate tightly with the application's API and routing infrastructure.