From 87886fbbac2c99aa8fe8bb6e296efd2ea98a9acf Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Mon, 24 Feb 2025 14:09:59 -0300
Subject: [PATCH] fix: improve edge state management using object structure
 (#6764)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🔧 (UpdateAllComponents/index.tsx): refactor the logic to track the number of edges before update and update component status for better error handling and user notification.

* ♻️ (UpdateAllComponents/index.tsx): refactor variable names for better readability and semantics
---
 .../components/UpdateAllComponents/index.tsx  | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/UpdateAllComponents/index.tsx b/src/frontend/src/pages/FlowPage/components/UpdateAllComponents/index.tsx
index cdc6362ad..4e60aeeb7 100644
--- a/src/frontend/src/pages/FlowPage/components/UpdateAllComponents/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/UpdateAllComponents/index.tsx
@@ -36,16 +36,25 @@ export default function UpdateAllComponents({}: {}) {
   const [loadingUpdate, setLoadingUpdate] = useState(false);
   const [dismissed, setDismissed] = useState(false);
 
-  const numberOfEdgesBeforeUpdate = useRef(0);
+  const edgesUpdateRef = useRef({
+    numberOfEdgesBeforeUpdate: 0,
+    updateComponent: false,
+  });
 
   useMemo(() => {
     if (
-      numberOfEdgesBeforeUpdate.current > 0 &&
-      edges.length !== numberOfEdgesBeforeUpdate.current
+      edgesUpdateRef.current.numberOfEdgesBeforeUpdate > 0 &&
+      edges.length !== edgesUpdateRef.current.numberOfEdgesBeforeUpdate &&
+      edgesUpdateRef.current.updateComponent
     ) {
       useAlertStore.getState().setNoticeData({
         title: ERROR_MESSAGE_EDGES_LOST,
       });
+
+      edgesUpdateRef.current = {
+        numberOfEdgesBeforeUpdate: 0,
+        updateComponent: false,
+      };
     }
   }, [edges]);
 
@@ -56,7 +65,11 @@ export default function UpdateAllComponents({}: {}) {
   };
 
   const handleUpdateAllComponents = () => {
-    numberOfEdgesBeforeUpdate.current = edges.length;
+    edgesUpdateRef.current = {
+      numberOfEdgesBeforeUpdate: edges.length,
+      updateComponent: true,
+    };
+
     setLoadingUpdate(true);
     takeSnapshot();