FIX: Who liked was not updating

If a like streamed in via the message bus and who liked was expanded,
it was not refreshing properly.

app/assets/javascripts/discourse/components/scrolling-post-stream.js.es6

@@ -170,6 +170,10 @@ export default MountWidget.extend({
       if (args) {
         if (args.id) {
           keyDirty(`post-${args.id}`);
+
+          if (args.refreshLikes) {
+            keyDirty(`post-menu-${args.id}`, { onRefresh: 'refreshLikes' });
+          }
         } else if (args.force) {
           keyDirty(`*`);
         }

app/assets/javascripts/discourse/controllers/topic.js.es6

@@ -642,7 +642,7 @@ export default Ember.Controller.extend(SelectedPostsCount, BufferedContent, {
     // Unsubscribe before subscribing again
     this.unsubscribe();
 
-    const refresh = (id) => this.appEvents.trigger('post-stream:refresh', { id });
+    const refresh = (args) => this.appEvents.trigger('post-stream:refresh', args);
 
     this.messageBus.subscribe("/topic/" + this.get('model.id'), data => {
       const topic = this.get('model');
@@ -655,19 +655,20 @@ export default Ember.Controller.extend(SelectedPostsCount, BufferedContent, {
 
       const postStream = this.get('model.postStream');
       switch (data.type) {
-        case "revised":
         case "acted":
+          postStream.triggerChangedPost(data.id, data.updated_at).then(() => refresh({ id: data.id, refreshLikes: true }));
+          break;
+        case "revised":
         case "rebaked": {
-          // TODO we could update less data for "acted" (only post actions)
-          postStream.triggerChangedPost(data.id, data.updated_at).then(() => refresh(data.id));
+          postStream.triggerChangedPost(data.id, data.updated_at).then(() => refresh({ id: data.id }));
           return;
         }
         case "deleted": {
-          postStream.triggerDeletedPost(data.id, data.post_number).then(() => refresh(data.id));
+          postStream.triggerDeletedPost(data.id, data.post_number).then(() => refresh({ id: data.id }));
           return;
         }
         case "recovered": {
-          postStream.triggerRecoveredPost(data.id, data.post_number).then(() => refresh(data.id));
+          postStream.triggerRecoveredPost(data.id, data.post_number).then(() => refresh({ id: data.id }));
           return;
         }
         case "created": {

app/assets/javascripts/discourse/widgets/post-menu.js.es6

@@ -340,14 +340,26 @@ export default createWidget('post-menu', {
     });
   },
 
-  toggleWhoLiked() {
+  refreshLikes() {
+    if (this.state.likedUsers.length) {
+      return this.getWhoLiked();
+    }
+  },
+
+  getWhoLiked() {
     const { attrs, state } = this;
-    if (state.likedUsers.length) {
-      state.likedUsers = [];
-    } else {
+
     return this.store.find('post-action-user', { id: attrs.id, post_action_type_id: LIKE_ACTION }).then(users => {
       state.likedUsers = users.map(avatarAtts);
     });
+  },
+
+  toggleWhoLiked() {
+    const state = this.state;
+    if (state.likedUsers.length) {
+      state.likedUsers = [];
+    } else {
+      return this.getWhoLiked();
     }
   },
 });

app/assets/javascripts/discourse/widgets/widget.js.es6

@@ -7,8 +7,8 @@ function emptyContent() { }
 const _registry = {};
 let _dirty = {};
 
-export function keyDirty(key) {
-  _dirty[key] = true;
+export function keyDirty(key, options) {
+  _dirty[key] = options || {};
 }
 
 export function renderedKey(key) {
@@ -131,13 +131,20 @@ export default class Widget {
       this.state = _.merge(this.state, this.mergeState);
     }
 
-    if (prev && prev.shadowTree) {
+    if (prev) {
+      const dirtyOpts = _dirty[prev.key] || {};
+      if (prev.shadowTree) {
         this.shadowTree = true;
-      if (!_dirty[prev.key] && !_dirty['*']) {
+        if (!dirtyOpts && !_dirty['*']) {
           return prev.vnode;
         }
-
+      }
       renderedKey(prev.key);
+
+      const refreshAction = dirtyOpts.onRefresh;
+      if (refreshAction) {
+        this.sendWidgetAction(refreshAction);
+      }
     }
 
     return this.draw(h, this.attrs, this.state);