fix: Implement useFlowUpdate hook and refactor node code management (#4783)

* 📝 (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

@@ -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);
           }

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>

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 = {