client, logs-content: Added change subscription setup and hooked it up to the logs-content page.

marko/page/logs-content/components/edit-log-modal/component.js

@@ -19,15 +19,11 @@ module.exports = class {
   }
 
   onInput(input) {
-    if (input.log && !this.first) {
-      this.state.values = {
-        title: input.log.title,
-        event: input.log.eventName,
-        description: input.log.description,
-        open: input.log.open,
-      }
-
-      this.first = true
+    this.state.values = {
+      title: input.log.title,
+      event: input.log.eventName,
+      description: input.log.description,
+      open: input.log.open,
     }
   }
 

marko/page/logs-content/components/page/component.js

@@ -1,6 +1,7 @@
 const moment = require("moment")
 
 const {postApi} = require("../../../../../rpdata/api/Post")
+const {logsApi} = require("../../../../../rpdata/api/Log")
 
 module.exports = class {
   onCreate(input) {
@@ -9,6 +10,22 @@ module.exports = class {
       modal: null,
       removed: false,
     }
+  }  
+  
+  onMount() {
+    this.sub = logsApi.subscribeChanges(this.state.log.id)
+
+    this.sub.on("data", data => {
+      this.handleChange(data.changes)
+    })
+
+    this.sub.connect()
+  }
+
+  onUnmount() {
+    if (this.sub != null) {
+      this.sub.disconnect()
+    }
   }
 
   open(modal) {
@@ -30,8 +47,6 @@ module.exports = class {
     for (const patch of patches) {
       const index = posts.findIndex(p => p.id === patch.id)
       if (index == -1) {
-        console.warn("Post not found for patch:", patch)
-        // TODO: Force full refresh
         continue
       }
 
@@ -42,8 +57,7 @@ module.exports = class {
     posts.sort((a, b) => a.position - b.position)
     for (let i = 1; i < posts.length; ++i) {
       if (posts[i].position !== posts[i - 1].position + 1) {
-        console.warn("Discontinuity detected!")
-        // TODO: Force full refresh
+        console.warn("Discontinuity detected:", i, posts)
       }
     }
 
@@ -65,15 +79,7 @@ module.exports = class {
 
   removePost(post) {
     postApi.remove({id: post.id}).then(() => {
-      this.state.log.posts = this.state.log.posts.filter(p => p.id !== post.id)
-    
-      for (const p of this.state.log.posts) {
-        if (p.position > post.position) {
-          p.position--
-        }
-      }
-  
-      this.state.log = Object.assign({}, this.state.log)
+      this.postRemoved(post)
     }).catch(errs => {
       console.warn("Failed to delete:", errs)
       this.state.error = "Failed to delete: " + (errs.message || errs[0].message)
@@ -88,11 +94,69 @@ module.exports = class {
     this.state.log = Object.assign(Object.assign({}, this.state.log), patch)
   }
 
+  postRemoved(post) {
+    if (this.state.log.posts.find(p => p.id === post.id) == null) {
+      return
+    }
+
+    const posts = this.state.log.posts.filter(p => p.id !== post.id).map(p => {
+      if (p.position > post.position) {
+        return Object.assign({}, p, {position: p.position - 1})
+      }
+
+      return p
+    })
+
+    this.state.log = Object.assign({}, this.state.log, {posts: posts})
+  }
+
   postAdded(post) {
     this.state.log.posts = this.state.log.posts.concat([post])
     this.state.log = Object.assign({}, this.state.log)    
   }
 
+  handleChange(change) {
+    switch (`${change.model}.${change.op}`) {
+      case "Post.add": {
+        for (const post of change.objects.filter(o => o.type === "Post")) {
+          this.postAdded(post)
+        }
+
+        break
+      }
+
+      case "Post.move":
+      case "Post.edit": {
+        this.patch(change.objects.filter(o => o.type === "Post"))
+
+        break
+      }
+
+      case "Post.remove": {
+        for (const post of change.objects.filter(o => o.type === "Post")) {
+          this.postRemoved(post)
+        }
+      }
+
+      case "Log.edit": {
+        const patch = change.objects.find(o => o.type === "Log")
+        if (patch == null) {
+          break
+        }
+
+        this.logEdited(patch)
+
+        break
+      }
+
+      case "Log.remove": {
+        this.logRemoved()
+
+        break
+      }
+    }
+  }
+
   logRemoved() {
     this.state.removed = true
   }