From 8d6149a12472e19dbfe050e4ccb670c3c06143c7 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 15 Jun 2023 18:03:28 -0300
Subject: [PATCH] refactor(PageComponent): add support for setting
 tabsState.isPending to true when nodes or edges change to indicate that the
 flow is being edited feat(PageComponent): import NodeChange from reactflow
 and add onNodesChangeMod function to handle nodes change and set
 tabsState.isPending to true

---
 .../components/PageComponent/index.tsx        | 27 ++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index 4a88719b4..c85aa373c 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -1,4 +1,4 @@
-import _ from "lodash";
+import _, { set } from "lodash";
 import { useContext, useRef, useState, useEffect, useCallback } from "react";
 import ReactFlow, {
   OnSelectionChangeParams,
@@ -15,6 +15,7 @@ import ReactFlow, {
   updateEdge,
   Background,
   Controls,
+  NodeChange,
 } from "reactflow";
 import GenericNode from "../../../../CustomNodes/GenericNode";
 import Chat from "../../../../components/chatComponent";
@@ -43,7 +44,8 @@ export default function Page({ flow }: { flow: FlowType }) {
     lastCopiedSelection,
     setLastCopiedSelection,
     tabsState,
-    saveFlow
+    saveFlow,
+    setTabsState
   } = useContext(TabsContext);
   const { types, reactFlowInstance, setReactFlowInstance, templates } =
     useContext(typesContext);
@@ -145,8 +147,25 @@ export default function Page({ flow }: { flow: FlowType }) {
         let newX = _.cloneDeep(x);
         return newX;
       });
+      setTabsState((prev)=>{
+        let newState = _.cloneDeep(prev);
+        newState[flow.id].isPending = true;
+        return newState;
+      })
     },
-    [onEdgesChange, setNodes]
+    [onEdgesChange, setNodes,setTabsState,flow.id]
+  );
+
+  const onNodesChangeMod = useCallback(
+    (s: NodeChange[]) => {
+      onNodesChange(s);
+      setTabsState((prev)=>{
+        let newState = _.cloneDeep(prev);
+        newState[flow.id].isPending = true;
+        return newState;
+      })
+    },
+    [onNodesChange,setTabsState,flow.id]
   );
 
   const onConnect = useCallback(
@@ -345,7 +364,7 @@ export default function Page({ flow }: { flow: FlowType }) {
                   onPaneMouseLeave={() => {
                     setDisableCopyPaste(true);
                   }}
-                  onNodesChange={onNodesChange}
+                  onNodesChange={onNodesChangeMod}
                   onEdgesChange={onEdgesChangeMod}
                   onConnect={onConnect}
                   disableKeyboardA11y={true}