From e22062bba556c4b9ab6dff61f891ad3ff890cabf Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 15 Jun 2023 17:12:33 -0300
Subject: [PATCH] feat(PageComponent): add useEffect hook to save flow when
 component unmounts if flow is pending

The useEffect hook was added to the PageComponent to save the flow when the component unmounts if the flow is pending. This is done to ensure that any changes made to the flow are saved before the component is unmounted. The tabsState and saveFlow functions were also added as dependencies to the hook.
---
 .../pages/FlowPage/components/PageComponent/index.tsx  | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index c27e8d64e..4a88719b4 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -42,6 +42,8 @@ export default function Page({ flow }: { flow: FlowType }) {
     paste,
     lastCopiedSelection,
     setLastCopiedSelection,
+    tabsState,
+    saveFlow
   } = useContext(TabsContext);
   const { types, reactFlowInstance, setReactFlowInstance, templates } =
     useContext(typesContext);
@@ -250,6 +252,14 @@ export default function Page({ flow }: { flow: FlowType }) {
     // Specify dependencies for useCallback
     [getNodeId, reactFlowInstance, setErrorData, setNodes, takeSnapshot]
   );
+  
+  useEffect(() => {
+    return () => {
+      if(tabsState && tabsState[flow.id]?.isPending) {
+        saveFlow(flow)
+      }
+    }
+  },[])
 
   const onDelete = useCallback(
     (mynodes) => {