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({ id: data.id }));
-          postStream.triggerChangedPost(data.id, data.updated_at).then(() => refresh(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;
+
+    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.store.find('post-action-user', { id: attrs.id, post_action_type_id: LIKE_ACTION }).then(users => {
+      return this.getWhoLiked();
-        state.likedUsers = users.map(avatarAtts);
-      });
     }
   },
 });

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

@@ -7,8 +7,8 @@ function emptyContent() { }
 const _registry = {};
 let _dirty = {};
 
-export function keyDirty(key) {
+export function keyDirty(key, options) {
-  _dirty[key] = true;
+  _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) {
-      this.shadowTree = true;
+      const dirtyOpts = _dirty[prev.key] || {};
-      if (!_dirty[prev.key] && !_dirty['*']) {
+      if (prev.shadowTree) {
-        return prev.vnode;
+        this.shadowTree = true;
+        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);