Get Group profile from TagTile instead of TagPanel

So that instead of getting all group profiles everytime the tags
change order, get them when the TagTile mounts for a group tag.

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,17 +22,36 @@ import sdk from '../../../index';
 import dis from '../../../dispatcher';
 import { isOnlyCtrlOrCmdKeyEvent } from '../../../Keyboard';
 
+import FlairStore from '../../../stores/FlairStore';
+
 export default React.createClass({
     displayName: 'TagTile',
 
     propTypes: {
-        groupProfile: PropTypes.object,
+        tag: PropTypes.string,
     },
 
     contextTypes: {
         matrixClient: React.PropTypes.instanceOf(MatrixClient).isRequired,
     },
 
+    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});
+            });
+        }
+    },
+
+    componentWillUnmount() {
+        this.unmounted = true;
+    },
+
     getInitialState() {
         return {
             hover: false,
@@ -44,7 +63,7 @@ export default React.createClass({
         e.stopPropagation();
         dis.dispatch({
             action: 'select_tag',
-            tag: this.props.groupProfile.groupId,
+            tag: this.props.tag,
             ctrlOrCmdKey: isOnlyCtrlOrCmdKeyEvent(e),
             shiftKey: e.shiftKey,
         });
@@ -62,8 +81,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(