use-watch-change.ts

Overview

The use-watch-change.ts file provides two custom React hooks, useWatchFormChange and useWatchNameFormChange, that integrate React Hook Form's useWatch functionality with a global state management system (likely Zustand, as indicated by useGraphStore). These hooks observe changes in form fields and synchronize those changes to a graphical canvas or node-based interface by updating the global store.

This file is primarily used in a React application where forms correspond to "nodes" in a visual graph or canvas. When the form data changes, these hooks ensure that the changes reflect immediately on the graphical representation of these nodes.

Detailed Explanation

Imports

• useGraphStore: A custom hook for accessing and updating the global graph state.

• useEffect: React hook for side-effects.

• useWatch, UseFormReturn: From react-hook-form, useWatch observes changes in form values; UseFormReturn is the type for the form methods returned by useForm().

Functions

1. useWatchFormChange

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

Purpose:

Watches all form values for a specific node and updates the global graph store whenever these values change. This keeps the node's data on the canvas synchronized with the form inputs.

Parameters:

• id (optional, string): The unique identifier of the node whose form data is being watched.

• form (optional, UseFormReturn<any>): The form instance returned from useForm() containing control and methods for form state management.

Returns:

• void

Behavior:

• Uses useWatch to subscribe to all form values.

• On any change (tracked by useEffect), if an id is provided, it fetches the latest form values via form.getValues().

• Calls updateNodeForm from the global store to update that node's data.

Usage Example:

const formMethods = useForm({ defaultValues: { title: '', description: '' } });
const nodeId = 'node-123';

useWatchFormChange(nodeId, formMethods);

This hook should be invoked inside a React component where a form corresponds to a node and you want live synchronization of the entire form state with the node’s data.

2. useWatchNameFormChange

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

Purpose:

Specifically watches the name field of a node's form and updates only the node's name in the global store when it changes.

Parameters:

• id (optional, string): The unique identifier of the node.

• form (optional, UseFormReturn<any>): The form instance returned from useForm().

Returns:

• void

Behavior:

• Uses useWatch to subscribe to form values.

• On changes, if id is present, it calls updateNodeName with the updated name field value.

Usage Example:

const formMethods = useForm({ defaultValues: { name: 'Node A' } });
const nodeId = 'node-123';

useWatchNameFormChange(nodeId, formMethods);

This hook is useful when only the name property of a node is editable and you want to optimize by updating only the name in the global store.

Implementation Details & Algorithms

• Both hooks rely heavily on React Hook Form's useWatch to subscribe to form value changes without needing to manually set up event listeners.

• They use useEffect to trigger updates to the global state whenever the watched values or dependencies change.

• The global state updates are dispatched via methods (updateNodeForm and updateNodeName) exposed by useGraphStore. This suggests a centralized state management approach, likely Zustand or a similar store.

• The hooks handle both initial and subsequent form changes seamlessly by leveraging React’s hook lifecycle.

• useWatchFormChange fetches all form values explicitly on each effect run using form.getValues() to ensure the latest snapshot is used.

Interaction with Other Parts of the System

• Global Store (useGraphStore): This file depends on a global graph store to update node data. The store likely manages the state of all nodes on a canvas or graph visualization.

• Forms (react-hook-form): These hooks assume the use of React Hook Form for form state management.

• Graphical Canvas / Node System: Though not shown here, the updated node data presumably reflects visually on a canvas or node-based UI. This file acts as the bridge between form UI and the graph state.

• Components Using These Hooks: React components representing editable nodes or forms use these hooks to keep their form state and the global graph in sync.

Mermaid Diagram: Class/Function Structure

flowchart TD
    A[useWatchFormChange] --> B[useWatch]
    A --> C[useEffect]
    C --> D[updateNodeForm (global store)]

    E[useWatchNameFormChange] --> F[useWatch]
    E --> G[useEffect]
    G --> H[updateNodeName (global store)]

Summary

• useWatchFormChange: Watches entire form data changes and updates the corresponding graph node.

• useWatchNameFormChange: Watches only the name field and updates the node's name in the global store.

• Both hooks ensure that form state and graphical node data remain synchronized in real-time.

• The file integrates React Hook Form and a global graph state store to facilitate reactive updates on a node-based UI.

This file is essential for maintaining consistency between user input in forms and the visual representation of nodes on a canvas or graph in the application.