use-watch-change.ts

Overview

The use-watch-change.ts file provides a custom React hook, useWatchFormChange, designed to monitor changes in a form managed by react-hook-form and synchronize those changes to a global graph store. This synchronization ensures that updates made in the form UI are reflected in the application's canvas or graph state, maintaining consistency between form data and visual nodes.

The hook leverages React's useEffect for side-effect management, useWatch from react-hook-form for reactive form value tracking, and a Zustand-based store (useGraphStore) for global state updates. It specifically watches for changes in the form's "dirty" state (i.e., if the form has unsaved changes) and propagates those changes to an external node identified by id.

Detailed Explanation

useWatchFormChange

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

Purpose

A React hook that watches for changes in a react-hook-form instance and updates a corresponding node in the global graph store whenever the form is dirty (i.e., modified).

Parameters

Returns

• This hook does not return any value. It performs side effects by synchronizing form changes to the graph store.

Usage Example

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

function NodeForm({ nodeId }) {
  const form = useForm({
    defaultValues: {
      prompts: '',
    },
  });

  // Automatically sync changes to the global graph state
  useWatchFormChange(nodeId, form);

  return (
    <form>
      <input {...form.register("prompts")} />
      {/* other form controls */}
    </form>
  );
}

Implementation Details

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

• Dirty State Checking: Using form?.formState.isDirty, it ensures updates only happen when the user has actually changed the form data.

• Synchronization Logic:

  • When the form is dirty and an id is provided, the hook fetches the current form values.

  • It constructs a new object nextValues that merges existing values but replaces the prompts array with an array containing a single prompt object. This prompt has a role of PromptRole.User and content taken from the form's prompts field.

  • This structure suggests that the form's prompts field is initially a string or similar, but for the graph store, it needs to be wrapped as an array of prompt objects.

• Graph Store Update: The hook calls updateNodeForm(id, nextValues) from the Zustand store useGraphStore to update the node's form data globally.

Interaction with Other System Components

• react-hook-form: Provides the form management layer. This hook depends on the form's control and state.

• Zustand Store (useGraphStore): Acts as the centralized state management for the graph or canvas nodes. The hook updates node data here to keep the UI and underlying data in sync.

• Constants (PromptRole): Defines roles for prompts, ensuring consistent prompt structure when updating the store.

• UI Components: This hook is intended to be used inside React components responsible for editing node forms on the canvas.

Visual Diagram

flowchart TD
    A[useWatchFormChange Hook]
    B[useWatch(form.control)]
    C[useEffect]
    D[Check: id && form.formState.isDirty]
    E[Get current form values]
    F[Transform values: wrap prompts with PromptRole.User]
    G[updateNodeForm(id, transformedValues) from useGraphStore]

    A --> B
    A --> C
    C --> D
    D -->|true| E
    E --> F
    F --> G
    D -->|false| C

Summary

The use-watch-change.ts file encapsulates a custom React hook that seamlessly bridges form state changes with a global graph data store. It listens for user edits in a form, formats the data suitably, and updates the corresponding graph node. This ensures UI consistency without manual event handling or state duplication, promoting a reactive and declarative programming style in managing node forms within the canvas environment.