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.

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) => {