Block page nav away during sidebar write RPC ops

WorldBrain · May 29, 2024 · 8151396 · 8151396
1 parent 59d84af
commit 8151396
Showing 1 changed file with 27 additions and 10 deletions.
diff --git 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) => {