fixing handle change

src/components/ConfigPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { X, Plus, Trash } from "lucide-react";
 import { Node } from "reactflow";
 import { useFlowStore } from "../store/flowStore";
@@ -16,40 +16,35 @@ interface Field {
 }
 
 export function ConfigPanel({ node, onClose, onUpdateNode }: ConfigPanelProps) {
-  const { models } = useFlowStore();
+  const { models, updateNode } = useFlowStore();
   const [newField, setNewField] = useState<Field>({ name: "", type: "string" });
   const [newQueryField, setNewQueryField] = useState<Field>({
     name: "",
     type: "string",
   });
 
+  useEffect(() => {
+    console.log("ConfigPanel re-rendered with node:", node);
+  }, [node]);
+
   if (!node) return null;
-
+  console.log("what up");
   const handleChange = (
-    e: React.ChangeEvent<
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
-      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
-    >
   ) => {
-    console.log('Changing', e.target.name, 'to', e.target.value); // Debug log
+    if (!node) return;
+    
+    console.log("Handling change for:", e.target.name, "with value:", e.target.value);
 
-    if (e.target.name === 'outputType') {
+    const newData = {
-      // Create entirely new data object for output type change
+      ...node.data,
-      const newData = {
+      [e.target.name]: e.target.value,
-        ...node.data,
+    };
-        outputType: e.target.value,
+
-        // Reset fields based on new type
+    console.log("New data to update:", newData);
-        fields: e.target.value === 'mockup' ? [] : (node.data.fields || []),
+
-        responseRaw: e.target.value === 'mockup' ? '{}' : undefined,
+    onUpdateNode(node.id, newData);
-      };
+    updateNode(node.id, newData);
-      console.log('New data after output type change:', newData); // Debug log
-      onUpdateNode(node.id, newData);
-    } else {
-      // Handle other changes normally
-      onUpdateNode(node.id, {
-        ...node.data,
-        [e.target.name]: e.target.value,
-      });
-    }
   };
 
   const handleArrayChange = (
@@ -60,10 +55,13 @@ export function ConfigPanel({ node, onClose, onUpdateNode }: ConfigPanelProps) {
   ) => {
     const array = [...(node.data[arrayName] || [])];
     array[index] = { ...array[index], [field]: value };
-    onUpdateNode(node.id, {
+    const newData = {
       ...node.data,
       [arrayName]: array,
-    });
+    };
+
+    onUpdateNode(node.id, newData);
+    updateNode(node.id, newData);
   };
 
   const addField = (arrayName: string) => {
@@ -71,10 +69,13 @@ export function ConfigPanel({ node, onClose, onUpdateNode }: ConfigPanelProps) {
     if (!fieldToAdd.name.trim()) return;
 
     const array = [...(node.data[arrayName] || []), { ...fieldToAdd }];
-    onUpdateNode(node.id, {
+    const newData = {
       ...node.data,
       [arrayName]: array,
-    });
+    };
+
+    onUpdateNode(node.id, newData);
+    updateNode(node.id, newData);
 
     // Reset the appropriate state
     if (arrayName === "queryFields") {
@@ -87,10 +88,13 @@ export function ConfigPanel({ node, onClose, onUpdateNode }: ConfigPanelProps) {
   const removeField = (index: number, arrayName: string) => {
     const array = [...(node.data[arrayName] || [])];
     array.splice(index, 1);
-    onUpdateNode(node.id, {
+    const newData = {
       ...node.data,
       [arrayName]: array,
-    });
+    };
+
+    onUpdateNode(node.id, newData);
+    updateNode(node.id, newData);
   };
 
   const copyQueryFields = () => {

src/store/flowStore.ts

@@ -73,6 +73,7 @@ interface FlowState {
   deleteRoute: (routeId: string) => void;
   updateSettings: (settings: Settings) => void;
   setDefaultTablesShown: (shown: boolean) => void;
+  updateNode: (nodeId: string, newData: any) => void;
 }
 
 export const useFlowStore = create<FlowState>((set) => ({
@@ -145,4 +146,20 @@ export const useFlowStore = create<FlowState>((set) => ({
     })),
   updateSettings: (settings) => set({ settings }),
   setDefaultTablesShown: (shown) => set({ defaultTablesShown: shown }),
+  updateNode: (nodeId: string, newData: any) => {
+    console.log("Updating node in store:", nodeId, newData);
+    set((state) => ({
+      nodes: state.nodes.map((node) =>
+        node.id === nodeId
+          ? {
+              ...node,
+              data: {
+                ...node.data,
+                ...newData,
+              },
+            }
+          : node
+      ),
+    }));
+  },
 }));