use-edit-mcp.ts

Overview

The use-edit-mcp.ts file defines a custom React hook named useEditMcp that encapsulates the logic and state management for creating and updating MCP (likely "MCP Server") entities via a modal interface. This hook provides the necessary state controls to show and hide a modal, manages loading states during server requests, and handles the creation or update process depending on whether an MCP ID is present.

This hook is designed to simplify component code by abstracting MCP editing workflows, including modal visibility toggling and API interactions, into a reusable hook.

Detailed Documentation

useEditMcp

A custom React hook that manages:

• Modal visibility state for an MCP edit/create dialog.

• MCP server creation and update operations.

• Loading states corresponding to asynchronous requests.

• Current MCP ID in context (for editing existing MCPs).

Returns

An object with the following properties:

Usage Example

import React from 'react';
import { useEditMcp } from './use-edit-mcp';

const McpEditorComponent = () => {
  const {
    editVisible,
    showEditModal,
    hideEditModal,
    handleOk,
    loading,
    id,
  } = useEditMcp();

  const onEditClick = (mcpId: string) => {
    showEditModal(mcpId)();
  };

  const onSubmit = async (formValues: any) => {
    await handleOk(formValues);
  };

  return (
    <>
      <button onClick={() => onEditClick('123')}>Edit MCP</button>
      {editVisible && (
        <Modal onCancel={hideEditModal} confirmLoading={loading} onOk={() => onSubmit(/* form values */)}>
          {/* Modal content for editing or creating MCP */}
          <p>{id ? `Editing MCP ID: ${id}` : 'Creating new MCP'}</p>
        </Modal>
      )}
    </>
  );
};

Internal Functions and Logic

Modal Visibility and MCP ID State

• Uses useSetModalState hook to manage modal visibility (editVisible) and control functions (showEditModal, hideEditModal).

• Maintains a local state id (string) to hold the MCP ID being edited. Empty string indicates creation mode.

API Interactions

• Imports and uses two custom hooks:

  • useCreateMcpServer — provides createMcpServer function and loading state for MCP creation.

  • useUpdateMcpServer — provides updateMcpServer function and updateLoading state for MCP updates.

handleShowModal(id: string) => () => void

• A higher-order function that takes an MCP ID and returns a function.

• When invoked, sets the MCP ID state and shows the edit modal.

• Useful for attaching directly as an event handler for UI elements.

handleOk(values: any) => Promise<void>

• Async function that handles form submission:

  • If id is set, calls updateMcpServer with the form values plus mcp_id.

  • Otherwise, calls createMcpServer with form values.

• If the returned status code is 0 (indicating success), hides the modal.

• Does not return any value.

Implementation Details and Algorithms

• Conditional Logic for Create vs Update: The hook distinguishes between creation and update by checking if the id state is non-empty.

• Loading State Aggregation: The combined loading state is computed as loading || updateLoading to reflect any ongoing request.

• Modal State Management: Relies on the external useSetModalState hook to abstract modal visibility logic.

• Stable Handlers: Uses useCallback for handleShowModal and handleOk to prevent unnecessary re-renders when used in React components.

Interaction with Other Parts of the System

• Hooks:

  • useSetModalState — manages modal visibility state.

  • useCreateMcpServer, useUpdateMcpServer — handle API requests related to MCP server management.

• UI Components:

  • This hook is intended to be used by UI components responsible for displaying and editing MCP server details, typically rendered inside a modal dialog.

• API Layer:

  • The hook abstracts interaction with backend APIs via the MCP request hooks, ensuring separation of concerns.

Type Definitions

export type UseEditMcpReturnType = ReturnType<typeof useEditMcp>;

• Defines a type alias for the return value of useEditMcp for easier type usage elsewhere.

Mermaid Diagram: Class Structure of useEditMcp

classDiagram
    class useEditMcp {
        -editVisible: boolean
        -hideEditModal: () => void
        -showEditModal: (id: string) => () => void
        -loading: boolean
        -createMcpServer: (values: any) => Promise<number>
        -handleOk: (values: any) => Promise<void>
        -id: string
    }

Summary

The useEditMcp hook cleanly encapsulates the modal visibility state, MCP server creation and update logic, and loading state management, providing a simple interface for components to handle MCP editing workflows. Its design promotes code reuse and separation of concerns, easing maintenance and improving clarity in UI components that require MCP editing capabilities.