updating attributes widget based on sync data changes

src/public/javascripts/services/attributes.js

@@ -268,6 +268,12 @@ class Attributes {
             this.$savedIndicator.fadeIn();
         }
     }
+
+    syncDataReceived(syncData) {
+        if (syncData.find(sd => sd.entityName === 'attributes' && sd.noteId === this.ctx.note.noteId)) {
+            this.reloadAttributes();
+        }
+    }
 }
 
 export default Attributes;

src/public/javascripts/services/tab_context.js

@@ -357,6 +357,8 @@ class TabContext {
     }
 
     syncDataReceived(syncData) {
+        this.attributes.syncDataReceived(syncData);
+
         if (this.sidebar) {
             this.sidebar.syncDataReceived(syncData);
         }

src/public/javascripts/widgets/attributes.js

@@ -26,8 +26,6 @@ class AttributesWidget {
     async renderBody() {
         const $body = this.$widget.find('.card-body');
 
-        $body.empty();
-
         const attributes = await this.ctx.attributes.getAttributes();
         const ownedAttributes = attributes.filter(attr => attr.noteId === this.ctx.note.noteId);
 
@@ -35,7 +33,9 @@ class AttributesWidget {
             $body.text("No own attributes yet...");
         }
 
-        await this.renderAttributes(ownedAttributes, $body);
+        const $attributesContainer = $("<div>");
+
+        await this.renderAttributes(ownedAttributes, $attributesContainer);
 
         const inheritedAttributes = attributes.filter(attr => attr.noteId !== this.ctx.note.noteId);
 
@@ -57,14 +57,16 @@ class AttributesWidget {
                     $inheritedAttrs.hide();
                 });
 
-            $body.append($showInheritedAttributes);
+            $attributesContainer.append($showInheritedAttributes);
-            $body.append($inheritedAttrs);
+            $attributesContainer.append($inheritedAttrs);
 
             await this.renderAttributes(inheritedAttributes, $inheritedAttrs);
 
             $inheritedAttrs.append($hideInheritedAttributes);
             $inheritedAttrs.hide();
         }
+
+        $body.empty().append($attributesContainer);
     }
 
     async renderAttributes(attributes, $container) {
@@ -86,6 +88,14 @@ class AttributesWidget {
             }
         }
     }
+
+    syncDataReceived(syncData) {
+        if (syncData.find(sd => sd.entityName === 'attributes' && sd.noteId === this.ctx.note.noteId)) {
+            // no need to invalidate attributes since the Attribute class listens to this as well
+            // (and is guaranteed to run first)
+            this.renderBody();
+        }
+    }
 }
 
 export default AttributesWidget;

src/public/javascripts/widgets/note_info.js

@@ -57,8 +57,6 @@ class NoteInfoWidget {
 
     syncDataReceived(syncData) {
         if (syncData.find(sd => sd.entityName === 'notes' && sd.entityId === this.ctx.note.noteId)) {
-            console.log("Re-rendering note info");
-
             this.renderBody();
         }
     }

src/public/javascripts/widgets/note_revisions.js

@@ -39,6 +39,12 @@ class NoteRevisionsWidget {
             }).text(item.dateModifiedFrom)));
         }
     }
+
+    syncDataReceived(syncData) {
+        if (syncData.find(sd => sd.entityName === 'note_revisions' && sd.noteId === this.ctx.note.noteId)) {
+            this.renderBody();
+        }
+    }
 }
 
 export default NoteRevisionsWidget;

src/services/messaging.js

@@ -70,6 +70,9 @@ async function sendPing(client, lastSentSyncId) {
         if (sync.entityName === 'attributes') {
             sync.noteId = await sql.getValue(`SELECT noteId FROM attributes WHERE attributeId = ?`, [sync.entityId]);
         }
+        else if (sync.entityName === 'note_revisions') {
+            sync.noteId = await sql.getValue(`SELECT noteId FROM note_revisions WHERE noteRevisionId = ?`, [sync.entityId]);
+        }
     }
 
     const stats = require('./sync').stats;