From 3ee92e570badbb7422238411518b0f6dda18dc8e Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Wed, 21 Oct 2020 09:32:36 -0700
Subject: [PATCH] cleanup OctoListener

---
 webapp/src/components/cardDetail.tsx |  8 ++++++--
 webapp/src/octoListener.ts           | 22 +++++++++++++---------
 webapp/src/pages/boardPage.tsx       |  7 +++++--
 3 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/webapp/src/components/cardDetail.tsx b/webapp/src/components/cardDetail.tsx
index 186815f6c..2f69ee4ee 100644
--- a/webapp/src/components/cardDetail.tsx
+++ b/webapp/src/components/cardDetail.tsx
@@ -32,8 +32,7 @@ type State = {
 
 export default class CardDetail extends React.Component<Props, State> {
     private titleRef = React.createRef<Editable>()
-    private keydownHandler: any
-    private cardListener: OctoListener
+    private cardListener?: OctoListener
 
     constructor(props: Props) {
 	    super(props)
@@ -58,6 +57,11 @@ export default class CardDetail extends React.Component<Props, State> {
         })
     }
 
+    componentWillUnmount() {
+        this.cardListener?.close()
+        this.cardListener = undefined
+    }
+
     render() {
 	    const {boardTree} = this.props
         const {cardTree} = this.state
diff --git a/webapp/src/octoListener.ts b/webapp/src/octoListener.ts
index a9ede6c5b..a686db3db 100644
--- a/webapp/src/octoListener.ts
+++ b/webapp/src/octoListener.ts
@@ -11,13 +11,13 @@ class OctoListener {
     }
 
     readonly serverUrl: string
-    private ws: WebSocket
+    private ws?: WebSocket
 
     notificationDelay = 200
 
     constructor(serverUrl?: string) {
         this.serverUrl = serverUrl || window.location.origin
-        console.log(`OctoListener serverUrl: ${this.serverUrl}`)
+        Utils.log(`OctoListener serverUrl: ${this.serverUrl}`)
     }
 
     open(blockId: string, onChange: (blockId: string) => void) {
@@ -29,22 +29,22 @@ class OctoListener {
 
         const url = new URL(this.serverUrl)
 	    const wsServerUrl = `ws://${url.host}${url.pathname}ws/onchange?id=${encodeURIComponent(blockId)}`
-        console.log(`OctoListener initWebSocket wsServerUrl: ${wsServerUrl}`)
+        Utils.log(`OctoListener open: ${wsServerUrl}`)
 	    const ws = new WebSocket(wsServerUrl)
         this.ws = ws
 
 	    ws.onopen = () => {
-	        Utils.log('OctoListener webSocket opened.')
+	        Utils.log(`OctoListener webSocket opened. blockId: ${blockId}`)
 	        ws.send('{}')
 	    }
 
 	    ws.onerror = (e) => {
-            Utils.logError(`OctoListener websocket onerror. data: ${e}`)
+            Utils.logError(`OctoListener websocket onerror. blockId: ${blockId}, data: ${e}`)
 	    }
 
 	    ws.onclose = (e) => {
-            Utils.log(`OctoListener websocket onclose, code: ${e.code}, reason: ${e.reason}`)
-	        if (this.isOpen) {
+            Utils.log(`OctoListener websocket onclose, blockId: ${blockId}, code: ${e.code}, reason: ${e.reason}`)
+	        if (ws === this.ws) {
                 // Unexpected close, re-open
                 Utils.logError('Unexpected close, re-opening...')
                 this.open(blockId, onChange)
@@ -52,7 +52,7 @@ class OctoListener {
 	    }
 
 	    ws.onmessage = (e) => {
-            Utils.log(`OctoListener websocket onmessage. data: ${e.data}`)
+            Utils.log(`OctoListener websocket onmessage. blockId: ${blockId}, data: ${e.data}`)
             try {
 	            const message = JSON.parse(e.data)
 	            switch (message.action) {
@@ -79,8 +79,12 @@ class OctoListener {
             return
         }
 
-        this.ws.close()
+        Utils.log(`OctoListener close: ${this.ws.url}`)
+
+        // Use this sequence so the onclose method doesn't try to re-open
+        const ws = this.ws
         this.ws = undefined
+        ws.close()
     }
 }
 
diff --git a/webapp/src/pages/boardPage.tsx b/webapp/src/pages/boardPage.tsx
index ff6c79e4b..6ee39dbf6 100644
--- a/webapp/src/pages/boardPage.tsx
+++ b/webapp/src/pages/boardPage.tsx
@@ -31,7 +31,6 @@ export default class BoardPage extends React.Component<Props, State> {
     updatePropertyLabelTimeout: number
 
     private boardListener = new OctoListener()
-    private cardListener = new OctoListener()
 
     constructor(props: Props) {
         super(props)
@@ -100,6 +99,8 @@ export default class BoardPage extends React.Component<Props, State> {
     }
 
     componentWillUnmount() {
+        Utils.log(`boardPage.componentWillUnmount: ${this.state.boardId}`)
+        this.boardListener.close()
 	    document.removeEventListener('keydown', this.undoRedoHandler)
     }
 
@@ -160,9 +161,11 @@ export default class BoardPage extends React.Component<Props, State> {
     private async attachToBoard(boardId: string, viewId?: string) {
 	    Utils.log(`attachToBoard: ${boardId}`)
 
+        // this.boardListener.close()
+        // this.boardListener = new OctoListener()
 	    this.boardListener.open(boardId, (blockId: string) => {
             Utils.log(`boardListener.onChanged: ${blockId}`)
-            this.sync(boardId)
+            this.sync()
         })
 
 	    this.sync(boardId, viewId)