use-change-document-parser.ts

Overview

The use-change-document-parser.ts file defines a custom React hook named useChangeDocumentParser. This hook encapsulates the state management and business logic needed to display a modal dialog for changing the parser configuration of a document, and to submit updates for the document parser to the backend system.

It provides:

• State for the currently selected document (record) whose parser is to be changed.

• Modal visibility control (show/hide).

• An async handler to submit the parser change request.

• Loading state reflecting the submission process.

This hook is designed to be used in React components that allow users to update the parser configuration associated with a specific document entity. It abstracts away the modal state and request handling, promoting reuse and separation of concerns.

Exports

useChangeDocumentParser

A React custom hook that provides functionality to manage and submit changes to a document's parser configuration.

Signature

const {
  changeParserLoading,
  onChangeParserOk,
  changeParserVisible,
  hideChangeParserModal,
  showChangeParserModal,
  changeParserRecord,
} = useChangeDocumentParser();

Returned Properties

Detailed Explanation

Internal State and Hooks

• const { setDocumentParser, loading } = useSetDocumentParser();

  • Obtains a function to update the document parser configuration (setDocumentParser) and a loading state indicator (loading) from a custom hook that likely interacts with backend APIs.

• const [record, setRecord] = useState<IDocumentInfo>({} as IDocumentInfo);

  • Holds the currently selected document's info for which the parser change is being made.

• Modal state management is handled via useSetModalState(), which provides:

  • visible (renamed changeParserVisible): boolean flag if modal is open.

  • showModal (renamed showChangeParserModal): function to open the modal.

  • hideModal (renamed hideChangeParserModal): function to close the modal.

Methods

onChangeParserOk

async function onChangeParserOk(parserConfigInfo: IChangeParserRequestBody): Promise<void>

• Purpose:
  Submits the parser configuration changes for the currently selected document.

• Parameters:

  • parserConfigInfo (IChangeParserRequestBody): Object containing new parser ID and parser configuration.

• Behavior:

  • Checks if the current record has a valid id.

  • Calls setDocumentParser with:

    • parserId: The new parser's ID.

    • documentId: The ID of the current document.

    • parserConfig: New configuration details for the parser.

  • If the call returns 0 (indicating success), the modal is closed.

• Usage Example:

const { onChangeParserOk } = useChangeDocumentParser();

const newParserConfig = {
  parser_id: 'new-parser-123',
  parser_config: { key: 'value' },
};

onChangeParserOk(newParserConfig);

handleShowChangeParserModal

function handleShowChangeParserModal(row: IDocumentInfo): void

• Purpose:
  Opens the change parser modal and sets the document record to be edited.

• Parameters:

  • row (IDocumentInfo): The document information to be edited.

• Behavior:

  • Updates the internal state with the selected document record.

  • Shows the modal dialog.

• Usage Example:

const { showChangeParserModal } = useChangeDocumentParser();

const selectedDocument = { id: 'doc123', title: 'Sample Document' };
showChangeParserModal(selectedDocument);

Types and Interfaces

• IDocumentInfo
  Represents the document entity information. Usually includes properties like id, title, parserId, etc. Imported from '@/interfaces/database/document'.

• IChangeParserRequestBody
  Represents the request body for changing the parser. Contains at least:

  • parser_id (string): Identifier for the new parser.

  • parser_config (object): Configuration settings for the parser.

Implementation Details

• The hook uses React's useCallback to memoize handlers, preventing unnecessary re-renders.

• It leverages two external hooks:

  • useSetDocumentParser for performing the parser update operation which likely triggers an API call.

  • useSetModalState for managing modal visibility state.

• The onChangeParserOk function assumes that a return value of 0 from setDocumentParser indicates success. This return convention should be documented in useSetDocumentParser.

• The hook maintains a local state record to keep track of the document currently being edited, which allows the modal and submission logic to be tied correctly to a specific document.

Interaction with Other Parts of the System

• useSetDocumentParser Hook:
  This hook provides the core API interaction for changing the parser configuration on the backend. useChangeDocumentParser depends on it to perform the update operation.

• useSetModalState Hook:
  Provides a standardized modal state management interface (show/hide/visibility). This allows consistent modal behavior across the application.

• Document Entities:
  The hook operates on IDocumentInfo objects, which are presumably managed and fetched elsewhere in the system (e.g., document listing components or document details pages).

• UI Components:
  This hook is intended to be used by UI components that render the modal dialog for changing document parsers, passing the returned methods and state to control modal visibility and handle submissions.

Example Usage in a Component

import React from 'react';
import { useChangeDocumentParser } from './use-change-document-parser';
import { DocumentTable } from './DocumentTable';
import { ChangeParserModal } from './ChangeParserModal';

const DocumentManager = () => {
  const {
    changeParserLoading,
    onChangeParserOk,
    changeParserVisible,
    hideChangeParserModal,
    showChangeParserModal,
    changeParserRecord,
  } = useChangeDocumentParser();

  return (
    <>
      <DocumentTable onEditParser={showChangeParserModal} />
      {changeParserVisible && (
        <ChangeParserModal
          visible={changeParserVisible}
          loading={changeParserLoading}
          document={changeParserRecord}
          onCancel={hideChangeParserModal}
          onOk={onChangeParserOk}
        />
      )}
    </>
  );
};

Mermaid Class Diagram

classDiagram
    class useChangeDocumentParser {
        - record: IDocumentInfo
        - changeParserVisible: boolean
        - changeParserLoading: boolean
        + onChangeParserOk(parserConfigInfo: IChangeParserRequestBody): Promise<void>
        + showChangeParserModal(row: IDocumentInfo): void
        + hideChangeParserModal(): void
    }

    useChangeDocumentParser ..> useSetDocumentParser : uses
    useChangeDocumentParser ..> useSetModalState : uses

Summary

The use-change-document-parser.ts file provides a well-encapsulated React hook that manages the UI state and business logic for changing the parser configuration of a document entity. By integrating modal state management and asynchronous submission handling, it enables clear separation of concerns and promotes reuse across components that require this functionality.