From 8714ecfada8b34ae6b315476dd6ebaf1e9b6e367 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Mon, 4 Dec 2023 20:48:11 -0300
Subject: [PATCH] feat(flowsContext.tsx): add nodesOnFlow and setNodesOnFlow
 functions to FlowsContext to track changes in nodes on the flow
 fix(PageComponent/index.tsx): update onNodesChangeMod function to only
 trigger when there are changes in the nodes on the flow and update
 nodesOnFlow state in FlowsContext feat(tabs/index.ts): add nodesOnFlow and
 setNodesOnFlow functions to FlowsContextType to track changes in nodes on the
 flow

---
 src/frontend/src/contexts/flowsContext.tsx    |  7 ++++
 .../components/PageComponent/index.tsx        | 36 ++++++++++++-------
 src/frontend/src/types/tabs/index.ts          |  2 ++
 3 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/src/frontend/src/contexts/flowsContext.tsx b/src/frontend/src/contexts/flowsContext.tsx
index 9c79ccb1b..9c909831f 100644
--- a/src/frontend/src/contexts/flowsContext.tsx
+++ b/src/frontend/src/contexts/flowsContext.tsx
@@ -92,6 +92,8 @@ const FlowsContextInitialValue: FlowsContextType = {
   saveComponent: async (component: NodeDataType, override: boolean) => "",
   deleteComponent: (key: string) => {},
   version: "",
+  nodesOnFlow: "",
+  setNodesOnFlow: (nodes: string) => "",
 };
 
 export const FlowsContext = createContext<FlowsContextType>(
@@ -106,6 +108,7 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
   const [tabId, setTabId] = useState("");
 
   const [isLoading, setIsLoading] = useState(false);
+  const [nodesOnFlow, setNodesOnFlow] = useState("");
 
   const [flows, setFlows] = useState<Array<FlowType>>([]);
   const [id, setId] = useState(uid());
@@ -666,6 +669,8 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
             },
           };
         });
+
+        console.log(tabsState);
       }
     } catch (err) {
       setErrorData({
@@ -730,6 +735,8 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
         isLoading,
         saveComponent,
         deleteComponent,
+        nodesOnFlow,
+        setNodesOnFlow,
       }}
     >
       {children}
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index 4cf5a7484..7b852a0c2 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -83,6 +83,7 @@ export default function Page({
   const reactFlowWrapper = useRef<HTMLDivElement>(null);
 
   const { takeSnapshot } = useContext(undoRedoContext);
+  const { nodesOnFlow, setNodesOnFlow } = useContext(FlowsContext);
 
   const position = useRef({ x: 0, y: 0 });
   const [lastSelection, setLastSelection] =
@@ -219,7 +220,7 @@ export default function Page({
           ...prev,
           [tabId]: {
             ...prev[tabId],
-            isPending: true,
+            isPending: false,
           },
         };
       });
@@ -229,21 +230,30 @@ export default function Page({
 
   const onNodesChangeMod = useCallback(
     (change: NodeChange[]) => {
-      onNodesChange(change);
-      //@ts-ignore
-      setTabsState((prev: FlowsState) => {
-        return {
-          ...prev,
-          [tabId]: {
-            ...prev[tabId],
-            isPending: true,
-          },
-        };
-      });
+      const changeString = JSON.stringify(change);
+
+      if (changeString !== nodesOnFlow) {
+        onNodesChange(change);
+        updateNodeFlow(changeString);
+        //@ts-ignore
+        setTabsState((prev: FlowsState) => {
+          return {
+            ...prev,
+            [tabId]: {
+              ...prev[tabId],
+              isPending: true,
+            },
+          };
+        });
+      }
     },
-    [onNodesChange, setTabsState, tabId]
+    [onNodesChange, setTabsState, tabId, updateNodeFlow]
   );
 
+  function updateNodeFlow(changeString: string) {
+    setNodesOnFlow(changeString);
+  }
+
   const onConnect = useCallback(
     (params: Connection) => {
       takeSnapshot();
diff --git a/src/frontend/src/types/tabs/index.ts b/src/frontend/src/types/tabs/index.ts
index 32a22a0c5..a3d764690 100644
--- a/src/frontend/src/types/tabs/index.ts
+++ b/src/frontend/src/types/tabs/index.ts
@@ -55,6 +55,8 @@ export type FlowsContextType = {
   ) => Promise<String | undefined>;
   deleteComponent: (key: string) => void;
   version: string;
+  nodesOnFlow: string;
+  setNodesOnFlow: (nodes: string) => void;
 };
 
 export type FlowsState = {