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 form state watching mechanism with a global state management store (likely Zustand) to synchronize form data changes with a graphical canvas or node-based UI representation.

In essence, this hook listens for changes in a form and, when detected, updates a corresponding node's data in the global graph store. It converts certain form fields to a specific format before updating, ensuring data consistency between the form UI and the underlying graph model.

Detailed Explanation

useWatchFormChange

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

Purpose

This custom hook watches the form data using react-hook-form's useWatch and synchronizes updates to a node identified by id in the application's graph store.

Parameters

• id?: string

  • Optional identifier of the node in the graph store whose form data should be updated.

  • If not provided, no update will be performed.

• form?: UseFormReturn<any>

  • Optional instance of the form returned by react-hook-form's useForm.

  • Provides control and state management for the form data.

Behavior

• Uses useWatch to subscribe to form value changes.

• On changes of:

  • The form's isDirty state (indicating if the form has unsaved changes),

  • The id,

  • The values themselves,

  • Or the updateNodeForm function reference,

  the hook triggers a side-effect to update the corresponding node's form data in the global graph store.

• Converts certain fields (include_domains and exclude_domains) into string arrays using the utility function convertToStringArray before syncing.

Return Value

• None (void). It is a side-effect hook that synchronizes external state.

Usage Example

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

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

  useWatchFormChange(nodeId, form);

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

Implementation Details

• useWatch: Subscribes to form control and returns current form values reactively.

• useEffect Dependency Array: Includes form?.formState.isDirty, id, updateNodeForm, and values to ensure the effect triggers only when meaningful changes occur.

• Data Conversion: Uses convertToStringArray utility to coerce domain fields into arrays of strings, likely to maintain consistent data types for the graph store.

• Global State Interaction: Uses useGraphStore, presumably a Zustand store hook, to invoke updateNodeForm, which updates form data for a given node in the graph.

Interaction with Other Parts of the System

• Graph Store (useGraphStore): This hook calls updateNodeForm from the graph store to synchronize form changes with the graph's node data. Changes here likely affect rendering or state of nodes on a canvas or graph visualization.

• Utility Functions (convertToStringArray): Ensures that domain-related fields are always arrays of strings before updating global state, preventing type inconsistencies.

• react-hook-form: Relies heavily on useWatch and form control objects from react-hook-form to monitor form state changes.

• UI Components: Forms that represent or edit node data in the graph will use this hook to keep the graph store in sync with user inputs.

Mermaid Class Diagram

classDiagram
    class useWatchFormChange {
        +useWatchFormChange(id?: string, form?: UseFormReturn<any>): void
    }

    class react-hook-form {
        +useWatch(options: { control }): any
        +UseFormReturn
    }

    class useGraphStore {
        +updateNodeForm(id: string, data: any): void
    }

    class convertToStringArray {
        +convertToStringArray(input: any): string[]
    }

    useWatchFormChange ..> react-hook-form : uses
    useWatchFormChange ..> useGraphStore : calls
    useWatchFormChange ..> convertToStringArray : calls

Summary

The use-watch-change.ts file provides a focused integration hook that bridges form state management and a global graph data store. It abstracts the synchronization logic between form inputs and the graph's node data, ensuring form changes are immediately reflected in the application's graph model with proper data formatting.

This hook is a key piece in maintaining consistency between the UI layer (forms) and the underlying graph data, facilitating reactive and user-driven updates in complex node-based applications such as flow editors, diagram tools, or data visualization platforms.