use-watch-change.ts

Overview

The use-watch-change.ts file provides utility functions and a custom React hook designed to monitor and react to changes in form data managed by react-hook-form. Its primary purpose is to observe form state changes, transform specific input data structures, and propagate these changes to a global graph store for state synchronization in an application that likely involves dynamic graph or node editing.

Key functionalities include:

• Data transformation: Converting an array of input objects into a keyed object map, omitting certain properties.

• Form watching: Using react-hook-form's useWatch to track form changes.

• State synchronization: Updating a centralized graph store whenever relevant form data changes.

This file acts as a bridge between dynamic form inputs and the application's graph state management layer.

Detailed Explanations

1. transferInputsArrayToObject

export function transferInputsArrayToObject(inputs: BeginQuery[] = []): Record<string, Omit<BeginQuery, 'key'>>;

Purpose

Transforms an array of BeginQuery objects into an object keyed by each item's key property, omitting the key field itself from the values.

Parameters

• inputs (BeginQuery[]): An array of input objects. Each object must have a key property among others.

Returns

• Record<string, Omit<BeginQuery, 'key'>>: An object where each key is the original input's key value, and the value is the rest of the properties from the input object excluding the key.

Usage Example

const inputsArray = [
  { key: 'input1', type: 'text', label: 'Name' },
  { key: 'input2', type: 'number', label: 'Age' }
];

const inputsObject = transferInputsArrayToObject(inputsArray);

/*
inputsObject = {
  input1: { type: 'text', label: 'Name' },
  input2: { type: 'number', label: 'Age' }
}
*/

Implementation Details

• Uses JavaScript's Array.reduce to accumulate into an object.

• Uses Lodash's omit to exclude the key property from each input object.

2. useWatchFormChange

export function useWatchFormChange(id?: string, form?: UseFormReturn): void;

Purpose

A React custom hook that observes changes to a form managed by react-hook-form and updates a node's form state in a global graph store when the form data changes.

Parameters

• id (string | undefined): Identifier for the node whose form data is being tracked and updated.

• form (UseFormReturn | undefined): The form instance returned by react-hook-form's useForm.

Returns

• void: This hook does not return anything; it performs side effects.

Usage Example

function NodeForm({ nodeId, form }) {
  // Watches form changes and syncs with global store
  useWatchFormChange(nodeId, form);

  return (
    <form>
      {/* form fields */}
    </form>
  );
}

Implementation Details

• Uses useWatch from react-hook-form to track the current form values reactively.

• On form state change (formState.isDirty), it:

  • Retrieves current form values.

  • Transforms the inputs array (if present) into an object via transferInputsArrayToObject.

  • Calls updateNodeForm from useGraphStore to update the global graph state for the node identified by id.

• The hook reacts to changes in formState.isDirty, id, and the observed values.

Important Notes

• The hook only triggers the effect if a valid id is provided.

• The transformation ensures the graph store receives a normalized inputs object keyed by input keys.

Implementation and Algorithms

• Data Transformation Algorithm: transferInputsArrayToObject efficiently transforms an array of inputs to an object keyed by key property using reduction and omission, which facilitates quick lookup and cleaner state management downstream.

• Reactive State Updating: useWatchFormChange uses React's effect hook combined with react-hook-form's useWatch to listen for deep form changes and synchronize these changes in near real-time with a global graph state store. This pattern enables consistent state across UI components and the underlying data model.

Interaction With Other System Parts

• react-hook-form Integration: The file depends heavily on react-hook-form for form state management, especially the useWatch hook and UseFormReturn type.

• Global Graph Store: Interacts with useGraphStore (a Zustand or similar state library store), specifically the updateNodeForm method to update node-related form data globally.

• Input Data Structure: Uses the BeginQuery interface/type for inputs, which originates from ../../interface. This typing enforces a contract on input shape ensuring compatibility across the system.

• Utility Dependency: Uses Lodash's omit function to assist in object property manipulation.

Mermaid Diagram: File Structure and Workflow

flowchart TD
    A[useWatchFormChange Hook] -->|calls| B[useWatch (react-hook-form)]
    A -->|calls| C[transferInputsArrayToObject]
    C --> D[Array.reduce]
    C --> E[lodash.omit]
    A --> F[useGraphStore.updateNodeForm]
    B --> G[form?.control]
    A -->|depends on| H[id, form]

    style A fill:#f9f,stroke:#333,stroke-width:2px
    style C fill:#bbf,stroke:#333,stroke-width:2px
    style F fill:#fbf,stroke:#333,stroke-width:2px

Summary

This file provides a focused utility and hook for synchronizing form state changes with a global graph store in a React application. It supports structured transformation of input data and leverages React hooks and external libraries to maintain clean, reactive, and consistent state across the UI and data model layers. It is an integral part of managing node-related form data in a graph-based or node-editor system.