use-watch-change.ts

Overview

The use-watch-change.ts file defines a custom React hook named useWatchFormChange. This hook integrates React Hook Form's useWatch with an external state management store (useGraphStore) to synchronize form state changes with a graphical canvas or node-based UI component.

Specifically, it watches the form values for changes and, when detected, updates the corresponding node's form data in the store. This synchronization ensures that UI components representing nodes on a canvas remain consistent with the underlying form data.

Detailed Explanation

Imports

• ISwitchCondition: Interface defining the structure of a condition object used in the form data.

• useEffect: React hook to perform side effects in functional components.

• UseFormReturn, useWatch: React Hook Form utilities to handle form states and watch form values.

• useGraphStore: A Zustand (or similar) store hook for accessing and updating the graph or canvas state.

Function: useWatchFormChange

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

Description

A custom React hook that monitors a form's values and synchronizes any changes to a node identified by id within a global graph store. It leverages React Hook Form's useWatch to subscribe to form value changes and React's useEffect to trigger updates when form dirtiness or watched values change.

Parameters

Returns

• This hook does not return any value. It performs side effects by updating the graph store.

Usage Example

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

function NodeForm({ nodeId }) {
  const form = useForm({
    defaultValues: {
      conditions: [],
      // other fields...
    },
  });

  useWatchFormChange(nodeId, form);

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

Implementation Details

• Watching Form Values:
  The hook uses useWatch with the form's control to subscribe to changes in all form values.

• Synchronizing Changes:
  Inside a useEffect hook, it listens for changes in form.formState.isDirty (indicating the form has been modified), the id, the updateNodeForm function from the store, and the watched values.

• Updating Graph Store:
  When the form is dirty and an id is provided, it retrieves the latest form values via form.getValues(). Then, it creates a shallow copy of the conditions array (to avoid reference equality issues stemming from React Hook Form's useFieldArray) and composes a nextValues object.

• Invoking Store Update:
  It calls updateNodeForm(id, nextValues) to update the node's data in the global graph state.

• Debug Logging:
  A console log outputs the dirty state of the form for debugging purposes whenever the effect runs.

Interaction with Other System Parts

• React Hook Form:
  Relies on the form instance (UseFormReturn) from React Hook Form for form state management and value watching.

• Graph State Store (useGraphStore):
  Uses a global store hook to update node form data on the canvas or graph representation. This store likely manages the state of nodes and edges in a visual graph editor or workflow builder.

• Node Components / Canvas:
  The updated node form data pushed to the store via updateNodeForm presumably triggers UI updates on the canvas, ensuring visual elements reflect the latest form data.

Mermaid Diagram: Hook Structure and Workflow

flowchart TD
    A[useWatchFormChange Hook]
    A --> B[useWatch (form control)]
    B --> C[Watched form values]
    A --> D[useEffect]
    D --> E{Is form dirty & id provided?}
    E -- Yes --> F[Retrieve latest form values]
    F --> G[Create shallow copy of conditions array]
    G --> H[updateNodeForm(id, nextValues)]
    E -- No --> I[Do nothing]
    H --> J[Graph Store updated]
    J --> K[Canvas / Node UI reflects changes]

Summary

use-watch-change.ts provides a tightly focused hook that bridges React Hook Form's state management with a graph or node store. Its main responsibility is to watch form changes and ensure that node data in the global store stays synchronized, keeping the UI consistent with user input.

This file is essential in applications involving node-based editors, flow builders, or canvas interfaces where form inputs directly manipulate visual graph elements.