Merge pull request #1667 from matrix-org/luke/fix-naive-tag-panel-group-profile-requesting

Get Group profile from TagTile instead of TagPanel

src/components/views/elements/DNDTagTile.js

@@ -29,7 +29,7 @@ const tagTileSource = {
     beginDrag: function(props) {
         // Return the data describing the dragged item
         return {
-            tag: props.groupProfile.groupId,
+            tag: props.tag,
         };
     },
 
@@ -55,7 +55,7 @@ const tagTileTarget = {
         dis.dispatch({
             action: 'order_tag',
             tag: monitor.getItem().tag,
-            targetTag: props.groupProfile.groupId,
+            targetTag: props.tag,
             // Note: we indicate that the tag should be after the target when
             // it's being dragged over the top half of the target.
             after: draggedY < targetY,
@@ -65,7 +65,7 @@ const tagTileTarget = {
     drop(props) {
         // Return the data to be returned by getDropResult
         return {
-            tag: props.groupProfile.groupId,
+            tag: props.tag,
         };
     },
 };

src/components/views/elements/TagTile.js

@@ -22,11 +22,20 @@ import sdk from '../../../index';
 import dis from '../../../dispatcher';
 import { isOnlyCtrlOrCmdKeyEvent } from '../../../Keyboard';
 
+import FlairStore from '../../../stores/FlairStore';
+
+// 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:
+//  - Rooms that are part of the group
+//  - Direct messages with members of the group
+// with the intention that this could be expanded to arbitrary tags in future.
 export default React.createClass({
     displayName: 'TagTile',
 
     propTypes: {
-        groupProfile: PropTypes.object,
+        // A string tag such as "m.favourite" or a group ID such as "+groupid:domain.bla"
+        // For now, only group IDs are handled.
+        tag: PropTypes.string,
     },
 
     contextTypes: {
@@ -35,16 +44,38 @@ export default React.createClass({
 
     getInitialState() {
         return {
+            // Whether the mouse is over the tile
             hover: false,
+            // The profile data of the group if this.props.tag is a group ID
+            profile: null,
         };
     },
 
+    componentWillMount() {
+        this.unmounted = false;
+        if (this.props.tag[0] === '+') {
+            FlairStore.getGroupProfileCached(
+                this.context.matrixClient,
+                this.props.tag,
+            ).then((profile) => {
+                if (this.unmounted) return;
+                this.setState({profile});
+            }).catch((err) => {
+                console.warn('Could not fetch group profile for ' + this.props.tag, err);
+            });
+        }
+    },
+
+    componentWillUnmount() {
+        this.unmounted = true;
+    },
+
     onClick: function(e) {
         e.preventDefault();
         e.stopPropagation();
         dis.dispatch({
             action: 'select_tag',
-            tag: this.props.groupProfile.groupId,
+            tag: this.props.tag,
             ctrlOrCmdKey: isOnlyCtrlOrCmdKeyEvent(e),
             shiftKey: e.shiftKey,
         });
@@ -62,8 +93,8 @@ export default React.createClass({
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const RoomTooltip = sdk.getComponent('rooms.RoomTooltip');
-        const profile = this.props.groupProfile || {};
-        const name = profile.name || profile.groupId;
+        const profile = this.state.profile || {};
+        const name = profile.name || this.props.tag;
         const avatarHeight = 35;
 
         const httpUrl = profile.avatarUrl ? this.context.matrixClient.mxcUrlToHttp(