Sync on reconnect

webapp/src/components/cardDetail.tsx

@@ -56,11 +56,19 @@ class CardDetail extends React.Component<Props, State> {
     componentDidMount() {
         const cardTree = new MutableCardTree(this.props.cardId)
         this.cardListener = new OctoListener()
-        this.cardListener.open([this.props.cardId], async (blocks) => {
+        this.cardListener.open(
+            [this.props.cardId],
+            async (blocks) => {
                 Utils.log(`cardListener.onChanged: ${blocks.length}`)
                 const newCardTree = cardTree.mutableCopy()
                 newCardTree.incrementalUpdate(blocks)
-            this.setState({cardTree: newCardTree})
+                this.setState({cardTree: newCardTree, title: cardTree.card.title})
+            },
+            async () => {
+                Utils.log(`cardListener.onReconnect`)
+                const newCardTree = cardTree.mutableCopy()
+                await newCardTree.sync()
+                this.setState({cardTree: newCardTree, title: newCardTree.card.title})
             })
         cardTree.sync().then(() => {
             this.setState({cardTree, title: cardTree.card.title})

webapp/src/octoListener.ts

@@ -43,7 +43,7 @@ class OctoListener {
         Utils.log(`OctoListener serverUrl: ${this.serverUrl}`)
     }
 
-    open(blockIds: string[], onChange: OnChangeHandler) {
+    open(blockIds: string[], onChange: OnChangeHandler, onReconnect: () => void) {
         let timeoutId: NodeJS.Timeout
 
         if (this.ws) {
@@ -75,13 +75,14 @@ class OctoListener {
                 const reopenBlockIds = this.isInitialized ? this.blockIds.slice() : blockIds.slice()
                 Utils.logError(`Unexpected close, re-opening with ${reopenBlockIds.length} blocks...`)
                 setTimeout(() => {
-                    this.open(reopenBlockIds, onChange)
+                    this.open(reopenBlockIds, onChange, onReconnect)
+                    onReconnect()
                 }, this.reopenDelay)
             }
         }
 
         ws.onmessage = (e) => {
-            Utils.log(`OctoListener websocket onmessage. data: ${e.data}`)
+            // Utils.log(`OctoListener websocket onmessage. data: ${e.data}`)
             if (ws !== this.ws) {
                 Utils.log('Ignoring closed ws')
                 return
@@ -94,6 +95,7 @@ class OctoListener {
                     if (timeoutId) {
                         clearTimeout(timeoutId)
                     }
+                    Utils.log(`OctoListener update block: ${message.block?.id}`)
                     this.queueUpdateNotification(message.block)
                     break
                 default:

webapp/src/pages/boardPage.tsx

@@ -152,9 +152,15 @@ export default class BoardPage extends React.Component<Props, State> {
         const boardIds = workspaceTree.boards.map((o) => o.id)
 
         // Listen to boards plus all blocks at root (Empty string for parentId)
-        this.workspaceListener.open(['', ...boardIds], async (blocks) => {
+        this.workspaceListener.open(
+            ['', ...boardIds],
+            async (blocks) => {
                 Utils.log(`workspaceListener.onChanged: ${blocks.length}`)
                 this.incrementalUpdate(blocks)
+            },
+            () => {
+                Utils.log(`workspaceListener.onReconnect`)
+                this.sync()
             })
 
         if (boardId) {