use-watch-form-change.ts

Overview

The use-watch-form-change.ts file defines a custom React hook useWatchFormChange designed to synchronize changes from a form managed by react-hook-form with a centralized graph store. This hook listens for changes in the form state and, when the form becomes dirty (i.e., modified), it updates the corresponding node in the application's graph store with the latest form values. It also handles a specific transformation of form data when certain conditions are met.

This hook is primarily intended for use in React components that manage node forms within a graphical interface, ensuring that the UI and underlying data model remain consistent.

Detailed Explanation

useWatchFormChange

function useWatchFormChange(id?: string, form?: UseFormReturn<any>): void

Purpose

A React hook that watches the state of a form and synchronizes its changes to a graph data store. It listens to changes in the form's values and updates the corresponding graph node when the form is modified.

Parameters

Returns

• This hook does not return any value. It manages side effects internally.

Usage Example

import { useForm } from 'react-hook-form';
import { useWatchFormChange } from './use-watch-form-change';

function NodeForm({ nodeId }) {
  const form = useForm({ defaultValues: { method: '', delimiters: '' } });

  // Synchronizes form changes to the graph store for the given nodeId
  useWatchFormChange(nodeId, form);

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

Behavior and Implementation Details

• Uses useWatch from react-hook-form to observe all form fields' values (values).

• Uses a Zustand-based store useGraphStore to retrieve the updateNodeForm action, which updates the form data of a node in the graph.

• Inside a useEffect hook:

  • Checks if id is defined and form state is dirty (form?.formState.isDirty).

  • Retrieves the latest form values using form.getValues().

  • If the method field equals StringTransformMethod.Merge and delimiters is defined, it transforms delimiters into a single-element array wrapping the original delimiter value.

  • Calls updateNodeForm(id, nextValues) to update the graph store with the transformed form data.

• The useEffect dependencies ensure this effect runs whenever the form's dirty state, id, updateNodeForm function, or watched form values change.

Important Implementation Details

• Form Watching: The hook leverages useWatch to subscribe to form value changes efficiently.

• Conditional Data Transformation: When the string transformation method is Merge, the delimiters value is wrapped inside an array before updating the store. This implies downstream logic expects an array for delimiters in this case.

• Zustand Store Integration: The hook interacts with a global graph store managed by Zustand (useGraphStore), specifically updating node form data to keep the UI and data model in sync.

• Performance Consideration: The update only triggers if the form is dirty, minimizing unnecessary updates.

Interaction with Other Parts of the System

• React Hook Form (react-hook-form): Consumes form state and control objects to watch and get form values.

• Graph Store (useGraphStore): Updates graph nodes' form data when changes occur.

• Constants (StringTransformMethod): Uses an enum or constant object to check the string transformation method to apply conditional logic.

• Graphical Canvas: Implicitly, this hook communicates form changes to the canvas or UI that visualizes or manipulates graph nodes, ensuring the canvas representation stays in sync with form inputs.

Mermaid Diagram

flowchart TD
    A[useWatchFormChange Hook]
    A --> B[useWatch(form.control)]
    A --> C[useGraphStore(updateNodeForm)]
    A --> D[useEffect]
    D --> E{if id && formState.isDirty}
    E -->|true| F[getValues()]
    F --> G{method === StringTransformMethod.Merge}
    G -->|true| H[Transform delimiters to array]
    G -->|false| I[Use values as-is]
    H --> J[updateNodeForm(id, nextValues)]
    I --> J

Summary

use-watch-form-change.ts provides a focused utility hook that bridges form management and centralized graph state management. It abstracts the complexity of synchronizing form changes to the data store, enabling React components to remain declarative and clean. Its conditional handling of specific form fields demonstrates tailored logic aligned with the application's domain (string transformation nodes).

This file is a crucial link in maintaining data consistency within the UI, especially for interactive graph-based editors or visualization tools that rely on form-driven input for node configuration.