hooks.ts

Overview

The hooks.ts file defines a custom React hook named useEditQueryRecord that facilitates editing and managing records within a query form. This hook provides state management and control logic for showing a modal dialog to edit query records, updating the form values accordingly, and maintaining the currently selected record and its index.

It primarily integrates with two other custom hooks, useSetSelectedRecord and useSetModalState, to manage the state of the selected record and modal visibility respectively. This hook is designed to be used in form-driven UIs where users can add, update, or replace entries in a list of query records, encapsulated within a form.

Detailed Explanation

useEditQueryRecord

useEditQueryRecord({ form, onValuesChange }: IOperatorForm) => { ... }

Purpose

Manages the state and logic required to edit a record from a list of query entries within a form. It controls showing and hiding a modal dialog, setting the current record being edited, and updating the form data upon changes.

Parameters

• form (FormInstance):
  An instance of the form that contains the query data. It provides methods like getFieldValue to access current form fields.

• onValuesChange ((changedValues: any, allValues: any) => void):
  Optional callback triggered when the query records change. It receives both the changed values and all current form values.

Returns

An object containing:

Usage Example

import { useEditQueryRecord } from './hooks.ts';

const MyComponent = ({ form, onValuesChange }) => {
  const {
    ok,
    currentRecord,
    setRecord,
    visible,
    hideModal,
    showModal,
    otherThanCurrentQuery,
  } = useEditQueryRecord({ form, onValuesChange });

  return (
    <>
      <button onClick={() => showModal()}>Add Query</button>
      {visible && (
        <Modal onOk={() => ok(currentRecord)} onCancel={hideModal}>
          {/* Render form for currentRecord */}
        </Modal>
      )}
      {/* Render list of queries, excluding current editing one */}
    </>
  );
};

Implementation Details

State and Memoization

• index (useState<number>): Tracks the position of the currently edited record in the query list. Defaults to -1 when adding a new record.

• otherThanCurrentQuery (useMemo): Filters the query list from the form to exclude the record at the current index. This helps avoid duplication or conflicts when editing an existing record.

Key Functions

• handleEditRecord

  Updates the query list by either replacing the record at the current index or appending a new record if index is -1. Then calls onValuesChange to propagate the changes and hides the modal.

• handleShowModal

  Prepares the modal for editing by setting the index and currentRecord. If no index or record is provided, it defaults to preparing for a new record entry.

Integration with Other Hooks

• useSetSelectedRecord<BeginQuery>()
  Manages the state of the currently selected record (currentRecord) and provides a setter (setRecord). This hook abstracts record selection logic.

• useSetModalState()
  Provides modal visibility state (visible) and control functions (showModal, hideModal). This abstracts modal UI control.

Algorithmic Notes

• The hook leverages React's useCallback and useMemo hooks to optimize performance by memoizing handlers and computed values, preventing unnecessary re-renders.

• The method toSpliced() is used to produce a new array with the updated record, ensuring immutability of the form's query list.

Interaction with Other Parts of the System

• Form Management: The hook interacts closely with the form instance passed in, reading and updating the 'query' field data.

• Modal Handling: It depends on the useSetModalState hook to control modal dialogs for editing.

• Record Selection: It uses useSetSelectedRecord to manage which record is currently being edited.

• Parent Components: Components using this hook typically handle rendering the form, modal UI, and lists of query records, delegating state and edit logic to this hook.

• Data Flow: Changes made through this hook propagate via the onValuesChange callback, enabling parent components or form controllers to synchronize and persist data.

Mermaid Diagram

The following flowchart illustrates the relationship between the main functions and state within useEditQueryRecord:

flowchart TD
    A[useEditQueryRecord Hook] --> B[State: index]
    A --> C[State: currentRecord (via useSetSelectedRecord)]
    A --> D[State: visible (via useSetModalState)]

    B --> E[otherThanCurrentQuery (filters query list excluding index)]
    C --> F[setRecord (sets currentRecord)]
    D --> G[showModal (shows modal)]
    D --> H[hideModal (hides modal)]

    G --> I[handleShowModal]
    I --> B
    I --> F
    I --> D

    J[handleEditRecord (ok)] --> K[Update query list in form]
    K --> L[Call onValuesChange]
    L --> H

    A --> J

Summary

The hooks.ts file encapsulates critical editing logic for query records in a form-driven React application. It provides a clean API for managing the currently selected record, editing modal visibility, and updating the form's query data. The hook's design ensures separation of concerns, reusability, and efficient state updates, leveraging React hooks and custom state management utilities.

This hook is a vital part of user interaction workflows related to editing query records and integrates seamlessly with form and modal components.