Merge pull request #1868 from matrix-org/luke/feature-refresh-group-rooms

Refresh group rooms and members when selecting a tag

src/components/views/elements/TagTile.js

@@ -24,6 +24,7 @@ import { isOnlyCtrlOrCmdIgnoreShiftKeyEvent } from '../../../Keyboard';
 import ContextualMenu from '../../structures/ContextualMenu';
 
 import FlairStore from '../../../stores/FlairStore';
+import GroupStore from '../../../stores/GroupStore';
 
 // A class for a child of TagPanel (possibly wrapped in a DNDTagTile) that represents
 // a thing to click on for the user to filter the visible rooms in the RoomList to:
@@ -57,6 +58,8 @@ export default React.createClass({
         if (this.props.tag[0] === '+') {
             FlairStore.addListener('updateGroupProfile', this._onFlairStoreUpdated);
             this._onFlairStoreUpdated();
+            // New rooms or members may have been added to the group, fetch async
+            this._refreshGroup(this.props.tag);
         }
     },
 
@@ -80,6 +83,11 @@ export default React.createClass({
         });
     },
 
+    _refreshGroup(groupId) {
+        GroupStore.refreshGroupRooms(groupId);
+        GroupStore.refreshGroupMembers(groupId);
+    },
+
     onClick: function(e) {
         e.preventDefault();
         e.stopPropagation();
@@ -89,6 +97,10 @@ export default React.createClass({
             ctrlOrCmdKey: isOnlyCtrlOrCmdIgnoreShiftKeyEvent(e),
             shiftKey: e.shiftKey,
         });
+        if (this.props.tag[0] === '+') {
+            // New rooms or members may have been added to the group, fetch async
+            this._refreshGroup(this.props.tag);
+        }
     },
 
     onContextButtonClick: function(e) {

src/components/views/rooms/RoomList.js

@@ -91,19 +91,22 @@ module.exports = React.createClass({
         // All rooms that should be kept in the room list when filtering.
         // By default, show all rooms.
         this._visibleRooms = MatrixClientPeg.get().getRooms();
-        // When the selected tags are changed, initialise a group store if necessary
-        this._tagStoreToken = TagOrderStore.addListener(() => {
+
+        // Listen to updates to group data. RoomList cares about members and rooms in order
+        // to filter the room list when group tags are selected.
+        this._groupStoreToken = GroupStore.registerListener(null, () => {
             (TagOrderStore.getOrderedTags() || []).forEach((tag) => {
                 if (tag[0] !== '+') {
                     return;
                 }
-                this._groupStoreToken = GroupStore.registerListener(tag, () => {
-                    // This group's rooms or members may have updated, update rooms for its tag
-                    this.updateVisibleRoomsForTag(dmRoomMap, tag);
-                    this.updateVisibleRooms();
-                });
+                // This group's rooms or members may have updated, update rooms for its tag
+                this.updateVisibleRoomsForTag(dmRoomMap, tag);
+                this.updateVisibleRooms();
             });
-            // Filters themselves have changed, refresh the selected tags
+        });
+
+        this._tagStoreToken = TagOrderStore.addListener(() => {
+            // Filters themselves have changed
             this.updateVisibleRooms();
         });
 

src/stores/GroupStore.js

@@ -140,7 +140,6 @@ class GroupStore extends EventEmitter {
 
         clientPromise.then((result) => {
             this._state[stateKey][groupId] = result;
-            console.info(this._state);
             this._ready[stateKey][groupId] = true;
             this._notifyListeners();
         }).catch((err) => {
@@ -168,11 +167,12 @@ class GroupStore extends EventEmitter {
      * immediately triggers an update to send the current state of the
      * store (which could be the initial state).
      *
-     * This also causes a fetch of all data of the specified group,
-     * which might cause 4 separate HTTP requests, but only if said
-     * requests aren't already ongoing.
+     * If a group ID is specified, this also causes a fetch of all data
+     * of the specified group, which might cause 4 separate HTTP
+     * requests, but only if said requests aren't already ongoing.
      *
-     * @param {string} groupId the ID of the group to fetch data for.
+     * @param {string?} groupId the ID of the group to fetch data for.
+     *                          Optional.
      * @param {function} fn the function to call when the store updates.
      * @return {Object} tok a registration "token" with a single
      *                      property `unregister`, a function that can
@@ -184,10 +184,12 @@ class GroupStore extends EventEmitter {
         // Call to set initial state (before fetching starts)
         this.emit('update');
 
-        this._fetchResource(this.STATE_KEY.Summary, groupId);
-        this._fetchResource(this.STATE_KEY.GroupRooms, groupId);
-        this._fetchResource(this.STATE_KEY.GroupMembers, groupId);
-        this._fetchResource(this.STATE_KEY.GroupInvitedMembers, groupId);
+        if (groupId) {
+            this._fetchResource(this.STATE_KEY.Summary, groupId);
+            this._fetchResource(this.STATE_KEY.GroupRooms, groupId);
+            this._fetchResource(this.STATE_KEY.GroupMembers, groupId);
+            this._fetchResource(this.STATE_KEY.GroupInvitedMembers, groupId);
+        }
 
         // Similar to the Store of flux/utils, we return a "token" that
         // can be used to unregister the listener.
@@ -232,6 +234,14 @@ class GroupStore extends EventEmitter {
             (this._state[this.STATE_KEY.Summary][groupId] || {}).user.is_privileged : null;
     }
 
+    refreshGroupRooms(groupId) {
+        return this._fetchResource(this.STATE_KEY.GroupRooms, groupId);
+    }
+
+    refreshGroupMembers(groupId) {
+        return this._fetchResource(this.STATE_KEY.GroupMembers, groupId);
+    }
+
     addRoomToGroup(groupId, roomId, isPublic) {
         return MatrixClientPeg.get()
             .addRoomToGroup(groupId, roomId, isPublic)