use-watch-change.ts

Overview

The use-watch-change.ts file defines a custom React hook named useWatchFormChange that integrates with the react-hook-form library to monitor changes in form data. Its primary purpose is to synchronize form state changes with an external graphical data store, specifically updating a node's form data in a canvas or graph-based UI whenever the form is modified. This ensures that the UI representation stays consistent with the user's input in real time.

This hook is designed to be used within React functional components that manage forms using react-hook-form. It listens for changes in form data and, when detected, updates the corresponding node in the graph store using the provided node ID.

Detailed Documentation

useWatchFormChange

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

Description

A React hook that watches for changes in a form managed by react-hook-form and propagates those changes to a node in a graph store.

Parameters

Returns

• void — This hook does not return any value.

Behavior

• Uses the useWatch hook from react-hook-form to subscribe to the form's current values.

• Uses a selector from useGraphStore (a Zustand store) to get the updateNodeForm method, which updates the node's form data in the graph store.

• On every change detected in the form's dirty state (formState.isDirty), if an id is provided and the form is dirty:

  • It fetches the current form values.

  • Constructs a new value object nextValues where the prompts field is transformed into an array with a single object containing a role and content. The role is set to PromptRole.User (imported constant), and content is the original prompts value.

  • Calls updateNodeForm(id, nextValues) to synchronize the node's form data with the updated form values.

Usage Example

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

function MyFormComponent({ nodeId }: { nodeId: string }) {
  const form = useForm({
    defaultValues: {
      prompts: '',
      // other fields...
    },
  });

  // Synchronize form changes with the graph store node
  useWatchFormChange(nodeId, form);

  return (
    <form>
      <input
        {...form.register('prompts')}
        placeholder="Enter prompt"
      />
      {/* Other form controls */}
    </form>
  );
}

Implementation Details

• React Hook Integration: Utilizes useEffect and useWatch from react-hook-form to track form state and values reactively.

• State Synchronization: Uses a global store (useGraphStore) implemented via Zustand, a lightweight state management library, to update the node form data.

• Data Transformation: The prompts form value is wrapped into an array with a predefined format including a role field, adhering to some domain-specific data structure (likely related to chat or prompt-based UI).

• Dependency Array in useEffect: The effect depends on form?.formState.isDirty, id, updateNodeForm, and values to trigger updates only on relevant changes.

Interaction with Other Parts of the Application

• react-hook-form Library: This hook depends on react-hook-form for form state management and value watching.

• Graph Store (useGraphStore): The hook interacts with a Zustand store located at ../../store which manages the state of graph nodes. The updateNodeForm method is used to update the form data for a specific node.

• Constants (PromptRole): Uses a constant PromptRole.User from ../../constant to standardize the prompt's role field in the data structure.

• UI Components: Intended to be used inside React components that manage forms representing nodes in a graphical or canvas-based interface.

This hook provides the glue between the user input forms and the graphical representation of nodes, ensuring the node's data is always up-to-date with the current form state.

Mermaid Diagram

The following class diagram illustrates the structure and key interactions of the useWatchFormChange hook, showing its relationship with the form, store, and constants.

classDiagram
    class useWatchFormChange {
        +id?: string
        +form?: UseFormReturn<any>
        +void
    }
    class UseFormReturn {
        +control
        +formState
        +getValues()
    }
    class useGraphStore {
        +updateNodeForm(id: string, data: any): void
    }
    class PromptRole {
        <<enumeration>>
        +User
    }

    useWatchFormChange --> UseFormReturn : uses
    useWatchFormChange --> useGraphStore : calls updateNodeForm
    useWatchFormChange --> PromptRole : uses PromptRole.User

Summary

• use-watch-change.ts provides a custom React hook to watch form changes and synchronize them with a graph node.

• It leverages react-hook-form for form management and Zustand for global state updates.

• The hook automatically updates node data when the form is dirty and an ID is provided.

• It transforms the prompts data for domain-specific needs before updating the store.

• Used in components managing node forms to maintain UI and data consistency.

This file is a critical integration point between form UI and the underlying graph state, facilitating reactive and consistent user experiences in form-driven graphical applications.