use-watch-form-change.ts

Overview

use-watch-form-change.ts provides a custom React hook, useWatchFormChange, designed to synchronize changes in a form managed by react-hook-form with an external state store (useGraphStore). This hook watches form values and, when the form is dirty (i.e., has unsaved changes), it updates a corresponding node's form data in the global graph state. The main use case is to keep a visual canvas or graph representation in sync with user inputs on a form in real-time.

Detailed Explanation

useWatchFormChange

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

Purpose

A React hook that watches changes in a form and updates the corresponding node's form data in the global graph store whenever the form becomes dirty.

Parameters

• id?: string
  The identifier of the node whose form data should be updated. Optional; if not provided, no update will occur.

• form?: UseFormReturn<any>
  The form object returned by react-hook-form's useForm hook. This contains form state, control, and helper methods. Optional; if not provided, the hook will not watch any form.

Returns

• This hook does not return any value. It performs subscription and 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: {
      delimiters: '',
      method: 'Split', // example default
    },
  });

  // Synchronize form changes with node state
  useWatchFormChange(nodeId, form);

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

Implementation Details

• Form Watching:
  The hook uses useWatch from react-hook-form to subscribe to form value changes via form.control.

• Effect Hook:
  The useEffect hook triggers whenever the form's dirty state (form.formState.isDirty), the node id, or the watched values change.

• Data Synchronization:
  When the form is dirty and an id is provided, the hook fetches the current form values. If the method field equals StringTransformMethod.Merge and delimiters is defined, it transforms delimiters into an array containing a single element (the existing delimiters string). This likely aligns with expected data structure in the downstream graph store.

• State Update:
  The hook then calls updateNodeForm(id, nextValues), a method from the global graph state (useGraphStore), to update the node's form data.

Interaction with Other System Parts

• react-hook-form Library:
  Provides the form state management and the useWatch hook to listen for form changes.

• useGraphStore (Zustand or similar store):
  This is the global state store managing the graph/canvas nodes. The hook retrieves the updateNodeForm method from this store to update node data.

• StringTransformMethod Enum/Constant:
  Imported from a constants file, this controls how string transformation methods are handled, specifically checking for the .Merge method.

• Graph or Canvas Component:
  The updated form values are synchronized to a visual node on a canvas or graph UI, ensuring the UI reflects the latest form inputs.

Visual Diagram

flowchart TD
    A[useWatchFormChange Hook] --> B[useWatch -> Watches form values]
    A --> C[useEffect -> on form dirty & id change]
    C --> D{Check conditions}
    D -- isDirty true & id exists --> E[Get current form values]
    E --> F{Check method}
    F -- method === Merge --> G[Transform delimiters into array]
    F -- otherwise --> H[Use values as-is]
    G & H --> I[Call updateNodeForm(id, nextValues)]
    I --> J[Update global graph store]
    J --> K[Graph / Canvas nodes update]

Summary

• Purpose: Synchronize form data changes to global graph node state in real time.

• Key Concepts: React hook, form watching, effect synchronization, global state update.

• Important Logic: Special handling of delimiters when method is Merge.

• Integration: Connects react-hook-form with a global graph store to keep UI and form data consistent.

This hook is a critical piece for maintaining bi-directional synchronization between user input forms and a visual graph or canvas representation in the application.