From 3d2632aa5f3584ea192f40ec50f1155f6b359f08 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 15 Jun 2023 18:12:55 -0300
Subject: [PATCH] refactor(PageComponent): refactor setTabsState calls to use
 tabId instead of flow.id to improve semantics and avoid bugs

---
 .../components/PageComponent/index.tsx        | 33 +++++++++++--------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index c85aa373c..b62cca5af 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -45,7 +45,8 @@ export default function Page({ flow }: { flow: FlowType }) {
     setLastCopiedSelection,
     tabsState,
     saveFlow,
-    setTabsState
+    setTabsState,
+    tabId
   } = useContext(TabsContext);
   const { types, reactFlowInstance, setReactFlowInstance, templates } =
     useContext(typesContext);
@@ -147,25 +148,31 @@ 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;
-      })
+      setTabsState((prev) => {
+        return {
+          ...prev,
+          [tabId]: {
+            isPending: true,
+          },
+        };
+      });
     },
-    [onEdgesChange, setNodes,setTabsState,flow.id]
+    [onEdgesChange, setNodes,setTabsState,tabId]
   );
 
   const onNodesChangeMod = useCallback(
     (s: NodeChange[]) => {
       onNodesChange(s);
-      setTabsState((prev)=>{
-        let newState = _.cloneDeep(prev);
-        newState[flow.id].isPending = true;
-        return newState;
-      })
+      setTabsState((prev) => {
+        return {
+          ...prev,
+          [tabId]: {
+            isPending: true,
+          },
+        };
+      });
     },
-    [onNodesChange,setTabsState,flow.id]
+    [onNodesChange,setTabsState,tabId]
   );
 
   const onConnect = useCallback(