use-watch-change.ts

Overview

The use-watch-change.ts file defines a custom React hook named useWatchFormChange designed to integrate with React Hook Form and a state management store (likely Zustand) to synchronize changes in form data with a graphical canvas or node-based UI.

This hook primarily listens for changes in a form's values using useWatch from React Hook Form and, when the form is dirty (modified), updates the corresponding node's form data in a centralized graph store. The data update process includes transforming certain fields (e.g., converting the content field to a string array) before dispatching the update. This ensures that form changes are immediately reflected in the application’s graphical representation or state.

Detailed Explanation

Imports

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

• UseFormReturn, useWatch from react-hook-form: Utilities for form state management and subscribing to form value changes.

• useGraphStore from ../../store: A custom hook (likely Zustand) for accessing and manipulating global graph/node state.

• convertToStringArray from ../../utils: A utility function to convert form content data into a string array.

Function: useWatchFormChange

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

Purpose

Custom hook that monitors form changes for a specific node (identified by id) and synchronizes these changes into a global graph store state.

Parameters

• id (optional string): The identifier of the node whose form data should be updated.

• form (optional UseFormReturn): The form object returned from react-hook-form's useForm hook, providing control and state information.

Behavior

• Subscribes to form value changes using useWatch with the provided form's control.

• Uses useEffect to trigger side effects whenever the form's dirty state or watched values change.

• When the form is dirty and an id is provided:

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

  • Converts the content field of the form values to a string array using convertToStringArray.

  • Calls updateNodeForm from the graph store to update the node's form data with the transformed values.

Return Value

• This hook returns nothing (void). Its purpose is to perform a side effect by syncing form changes to the graph store.

Usage Example

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

function NodeEditor({ nodeId }) {
  const form = useForm({
    defaultValues: {
      content: '',
      // other fields...
    },
  });

  // Sync form changes with graph store
  useWatchFormChange(nodeId, form);

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

Implementation Details

• Synchronization Logic: The hook uses useEffect with dependencies on the form’s dirty state, node id, store updater function, and watched values. This ensures synchronization runs only when relevant changes occur, optimizing performance.

• Data Transformation: Before updating the node form, the hook applies convertToStringArray on the content field. This suggests that the form content might be stored or edited in various formats, and a normalized string array is required for consistent state representation.

• State Management Integration: The hook leverages useGraphStore to update the node's form data. This indicates a centralized state pattern, likely using Zustand or a similar store, managing the canvas state outside of React components.

Interaction with Other System Parts

• React Hook Form: The hook depends on React Hook Form’s useWatch and form control to listen to form value changes and access form state.

• Graph Store (useGraphStore): It updates the global state representing nodes in a graph or canvas. The updateNodeForm method is used to synchronize form changes with the graphical representation or underlying data model.

• Utilities: The convertToStringArray utility function ensures that the form’s content data is in the correct format before updating the store. This utility is important for data consistency.

• Canvas/Graph UI: By updating node forms in the store, this hook indirectly triggers updates in UI components that subscribe to the graph store, enabling real-time reflection of form changes on the canvas or node visualization.

Mermaid Diagram - File Structure and Workflow

flowchart TD
    A[useWatchFormChange Hook] --> B[useWatch(form.control)]
    A --> C[useEffect]
    C -->|if form is dirty and id exists| D[Get latest form values]
    D --> E[convertToStringArray(values.content)]
    E --> F[updateNodeForm(id, updatedValues)]
    F --> G[Graph Store State Update]

    subgraph Dependencies
        B
        D
        E
        F
    end

Summary

use-watch-change.ts provides a lightweight, focused custom hook to bridge form data and a graph-based state store, ensuring that any manual changes in the form are reflected in the application’s visual or data model layer. Its design leverages React Hook Form’s watch capabilities and efficient side-effect handling with useEffect. This hook is a key integration piece for reactive form-to-canvas synchronization in applications that manage node-based data or graphical workflows.