From b3181ce68a7ee912a79a5e5436eaa0a75abe0561 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Fri, 22 Nov 2024 18:19:28 -0300
Subject: [PATCH] fix: Implement useFlowUpdate hook and refactor node code
 management (#4783)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 📝 (use-patch-update-flow.ts): export IPatchUpdateFlow interface for external use
✨ (use-update-node-code.tsx): add useFlowUpdate hook to update node in flow based on componentId and data
🔧 (index.tsx): import usePatchUpdateFlow and useFlowUpdate hooks, update node in flow when code is updated in CodeAreaModal
🔧 (index.tsx): pass componentId to CodeAreaModal to update node in flow based on componentId
🔧 (index.ts): add componentId prop to codeAreaModalPropsType for CodeAreaModal component
🔧 (index.ts): add componentId prop to codeAreaModalPropsType for CodeAreaModal component

* 🔧 (use-update-node-code.tsx): Remove unused code related to updating node code in a flow
🔧 (index.tsx): Remove unused import and function related to updating node code in a flow, refactor code to directly update node data in the nodes array instead of using a separate function.

* 📝 (use-patch-update-flow.ts): remove unnecessary export keyword from IPatchUpdateFlow interface to follow module structure conventions

* 📝 (codeAreaModal/index.tsx): remove unused import and variable 'usePatchUpdateFlow' to clean up code and improve maintainability
---
 src/frontend/src/modals/codeAreaModal/index.tsx | 17 +++++++++++++++++
 .../components/nodeToolbarComponent/index.tsx   |  1 +
 src/frontend/src/types/components/index.ts      |  1 +
 3 files changed, 19 insertions(+)

diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index ce80932d5..d2371d406 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -6,6 +6,8 @@ import "ace-builds/src-noconflict/theme-twilight";
 // import "ace-builds/webpack-resolver";
 import { usePostValidateCode } from "@/controllers/API/queries/nodes/use-post-validate-code";
 import { usePostValidateComponentCode } from "@/controllers/API/queries/nodes/use-post-validate-component-code";
+import useFlowStore from "@/stores/flowStore";
+import { cloneDeep } from "lodash";
 import { useEffect, useRef, useState } from "react";
 import AceEditor from "react-ace";
 import ReactAce from "react-ace/lib/ace";
@@ -40,6 +42,7 @@ export default function CodeAreaModal({
   readonly = false,
   open: myOpen,
   setOpen: mySetOpen,
+  componentId,
 }: codeAreaModalPropsType): JSX.Element {
   const [code, setCode] = useState(value);
   const [open, setOpen] =
@@ -58,6 +61,9 @@ export default function CodeAreaModal({
   } | null>(null);
 
   const { mutate: validateComponentCode } = usePostValidateComponentCode();
+  const currentFlow = useFlowStore((state) => state.currentFlow);
+  const nodes = useFlowStore((state) => state.nodes);
+  const setNodes = useFlowStore((state) => state.setNodes);
 
   useEffect(() => {
     // if nodeClass.template has more fields other than code and dynamic is true
@@ -120,6 +126,17 @@ export default function CodeAreaModal({
           if (data && type) {
             setValue(code);
             setNodeClass(data, type);
+            const currentNode = nodes.find((node) => node.id === componentId);
+            const currentNodeIndex = nodes.findIndex(
+              (node) => node.id === componentId,
+            );
+            const currentNodes = cloneDeep(nodes);
+
+            if (currentNode) {
+              currentNodes[currentNodeIndex].data.node = data;
+            }
+            setNodes(currentNodes);
+
             setError({ detail: { error: undefined, traceback: undefined } });
             setOpen(false);
           }
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 3726d1102..9d1e365e2 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -789,6 +789,7 @@ export default function NodeToolbarComponent({
                 }}
                 nodeClass={data.node}
                 value={data.node?.template[name].value ?? ""}
+                componentId={data.id}
               >
                 <></>
               </CodeAreaModal>
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 2f5ea77c7..d8c94ec54 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -582,6 +582,7 @@ export type codeAreaModalPropsType = {
   readonly?: boolean;
   open?: boolean;
   setOpen?: (open: boolean) => void;
+  componentId?: string;
 };
 
 export type chatMessagePropsType = {