From 8151396b528a6d61318aa6a58627fec4df1f7527 Mon Sep 17 00:00:00 2001
From: Jonathan Poltak Samosir <jonathan.samosir@gmail.com>
Date: Wed, 29 May 2024 13:00:10 +0700
Subject: [PATCH] Block page nav away during sidebar write RPC ops

---
 .../AnnotationsSidebarContainer.tsx           | 37 ++++++++++++++-----
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/sidebar/annotations-sidebar/containers/AnnotationsSidebarContainer.tsx b/src/sidebar/annotations-sidebar/containers/AnnotationsSidebarContainer.tsx
index f985ea456b..f9ea7079f6 100644
--- a/src/sidebar/annotations-sidebar/containers/AnnotationsSidebarContainer.tsx
+++ b/src/sidebar/annotations-sidebar/containers/AnnotationsSidebarContainer.tsx
@@ -120,18 +120,35 @@ export class AnnotationsSidebarContainer<
         )
 
         window['_getState'] = () => ({ ...this.state })
-        this.listenToWindowChanges()
+
+        window.addEventListener('beforeunload', this.handleBeforeUnload)
+        window.addEventListener('resize', this.handleWindowResize)
     }
 
-    listenToWindowChanges() {
-        window.addEventListener('resize', () => {
-            if (this.state.isWidthLocked) {
-                this.processEvent('adjustSidebarWidth', {
-                    newWidth: this.state.sidebarWidth,
-                    isWidthLocked: true,
-                })
-            }
-        })
+    async componentWillUnmount(): Promise<void> {
+        window.removeEventListener('beforeunload', this.handleBeforeUnload)
+        window.removeEventListener('resize', this.handleWindowResize)
+        await super.componentWillUnmount()
+    }
+
+    private handleWindowResize = async () => {
+        if (this.state.isWidthLocked) {
+            await this.processEvent('adjustSidebarWidth', {
+                newWidth: this.state.sidebarWidth,
+                isWidthLocked: true,
+            })
+        }
+    }
+
+    // Block user nav away when some write RPC op is occurring
+    private handleBeforeUnload = (e: BeforeUnloadEvent) => {
+        let shouldBlockUnload =
+            this.state.noteEditState === 'running' ||
+            this.state.noteCreateState === 'running' ||
+            this.state.noteColorUpdateState === 'running'
+        if (shouldBlockUnload) {
+            e.preventDefault()
+        }
     }
 
     private getListDetailsById: ListDetailsGetter = (listId) => {