use-edit-query.ts

Overview

The use-edit-query.ts file defines a custom React hook useEditQueryRecord designed to manage the editing lifecycle of query records within a form. It facilitates viewing, adding, updating, and deleting query records represented by the BeginQuery interface. The hook integrates tightly with React Hook Form for form state management and leverages modal visibility hooks to control UI interactions related to editing query entries.

This hook is primarily used in contexts where multiple query inputs need to be managed dynamically inside a form, such as query builders or filter configuration UIs. It abstracts the logic for manipulating the list of queries, modal controls, and the currently selected record, providing a clean API for components to handle query editing workflows.

Detailed Explanations

useEditQueryRecord

export const useEditQueryRecord = ({
  form,
}: INextOperatorForm & { form: UseFormReturn }) => { ... }

Purpose

A custom React hook that manages the internal state and behavior required to edit a collection of query records (BeginQuery[]) in a form. It handles:

• Showing and hiding the edit modal

• Tracking the currently selected or edited query record

• Adding new queries or updating existing ones in the form state

• Deleting queries from the form's input list

• Providing filtered views of queries excluding the currently edited one

Parameters

• form: An instance of UseFormReturn from react-hook-form, representing the form context managing query inputs. It exposes methods like getValues, setValue, and control.

• Additional properties from INextOperatorForm are accepted but not destructured/used explicitly here.

Returns

An object containing handlers and state values for managing query records:

Usage Example

import { useForm } from 'react-hook-form';
import { useEditQueryRecord } from './use-edit-query';

const QueryEditorComponent = () => {
  const form = useForm<{ inputs: BeginQuery[] }>({
    defaultValues: { inputs: [] },
  });

  const {
    ok: saveQuery,
    currentRecord,
    setRecord,
    visible,
    showModal,
    hideModal,
    otherThanCurrentQuery,
    handleDeleteRecord,
  } = useEditQueryRecord({ form });

  return (
    <>
      <button onClick={() => showModal()}>Add Query</button>
      {visible && (
        <Modal onClose={hideModal}>
          <QueryForm
            record={currentRecord}
            onSave={saveQuery}
            onCancel={hideModal}
          />
        </Modal>
      )}
      <QueryList
        queries={otherThanCurrentQuery}
        onEdit={(idx, record) => showModal(idx, record)}
        onDelete={handleDeleteRecord}
      />
    </>
  );
};

Implementation Details and Algorithms

• State Tracking:

  • index (number): Tracks the index of the currently edited query in the form inputs. Initialized to -1 indicating no selection.

  • inputs (BeginQuery[]): Watched form inputs array using useWatch from react-hook-form to reactively update on form changes.

• Memoized Filtering:

  • otherThanCurrentQuery: A memoized array that excludes the current query at index. This allows the UI to display all queries except the one being actively edited, preventing duplication or confusion.

• Edit Handler (handleEditRecord):

  • Retrieves current inputs from form state.

  • Uses Array.prototype.toSpliced (immutable splice) to replace the query at index if editing an existing record, or appends to the list if adding a new query (index === -1).

  • Updates form inputs with the new array and closes the modal.

• Modal Control:

  • handleShowModal sets the editing index and record, then shows the modal.

  • hideModal simply hides the modal.

• Deletion Handler:

  • handleDeleteRecord filters out the query at the specified index and updates form inputs accordingly.

• Hooks Used:

  • useSetSelectedRecord<BeginQuery>(): Custom hook (imported) to manage the currently selected query record.

  • useSetModalState(): Custom hook (imported) for modal visibility state management.

  • useWatch from react-hook-form to watch form fields reactively.

Interaction with Other System Parts

• Form Management:

  The hook relies on react-hook-form to manage form state, specifically the inputs field which holds an array of BeginQuery records. It expects the parent component to provide the form instance via props.

• Modal Management:

  It uses useSetModalState to control the visibility of an editing modal, abstracting modal open/close logic.

• Selected Record Management:

  Uses useSetSelectedRecord to keep track of the current query record being edited, enabling sharing this state across components if needed.

• Interfaces:

  • BeginQuery: Represents the structure of a single query record.

  • INextOperatorForm: An interface expected to be related to the form data structure and logic, though not directly manipulated beyond passing the form instance.

• Usage Context:

  This hook is intended to be used in UI components that render forms for managing multiple query inputs, with editing capabilities via modals or dialogs.

Mermaid Diagram

The following class diagram illustrates the structure and key methods/properties of the useEditQueryRecord hook, including its interactions with imported hooks and form state.

classDiagram
    class useEditQueryRecord {
        - index: number
        - inputs: BeginQuery[]
        - otherThanCurrentQuery: BeginQuery[]
        + ok(record: BeginQuery): void
        + currentRecord: BeginQuery
        + setRecord(record: BeginQuery): void
        + visible: boolean
        + hideModal(): void
        + showModal(idx?: number, record?: BeginQuery): void
        + handleDeleteRecord(idx: number): void
    }
    class useSetSelectedRecord~T~ {
        + setRecord(record: T): void
        + currentRecord: T
    }
    class useSetModalState {
        + visible: boolean
        + showModal(): void
        + hideModal(): void
    }
    class UseFormReturn {
        + getValues(name?: string): any
        + setValue(name: string, value: any): void
        + control: object
    }
    useEditQueryRecord --> useSetSelectedRecord~BeginQuery~
    useEditQueryRecord --> useSetModalState
    useEditQueryRecord --> UseFormReturn

Summary

• useEditQueryRecord is a specialized hook for managing query records in a form with editing capabilities.

• It abstracts modal visibility, current record selection, and CRUD operations on the query inputs array.

• Designed for integration within React Hook Form and UI components requiring dynamic query input management.

• The hook simplifies the UI logic by encapsulating indexing, filtering, and state synchronization concerns.

This documentation should help developers understand the purpose, usage, and internal workings of the use-edit-query.ts file, aiding maintenance and integration.