Merge pull request #1404 from matrix-org/luke/feature-flair-click-for-group

Implement `view_group` dispatch when clicking flair

src/components/views/elements/Flair.js

@@ -20,6 +20,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {MatrixClient} from 'matrix-js-sdk';
 import UserSettingsStore from '../../../UserSettingsStore';
+import dis from '../../../dispatcher';
 import Promise from 'bluebird';
 
 const BULK_REQUEST_DEBOUNCE_MS = 200;
@@ -120,15 +121,54 @@ async function getGroupProfileCached(matrixClient, groupId) {
         return groupProfiles[groupId];
     }
 
-    groupProfiles[groupId] = await matrixClient.getGroupProfile(groupId);
+    const profile = await matrixClient.getGroupProfile(groupId);
+    groupProfiles[groupId] = {
+        groupId,
+        avatarUrl: profile.avatar_url,
+    };
+
     return groupProfiles[groupId];
 }
 
+class FlairAvatar extends React.Component {
+    constructor() {
+        super();
+        this.onClick = this.onClick.bind(this);
+    }
+
+    onClick(ev) {
+        ev.preventDefault();
+        // Don't trigger onClick of parent element
+        ev.stopPropagation();
+        dis.dispatch({
+            action: 'view_group',
+            group_id: this.props.groupProfile.groupId,
+        });
+    }
+
+    render() {
+        const httpUrl = this.context.matrixClient.mxcUrlToHttp(
+            this.props.groupProfile.avatarUrl, 14, 14, 'scale', false);
+        return <img src={httpUrl} width="14px" height="14px" onClick={this.onClick}/>;
+    }
+}
+
+FlairAvatar.propTypes = {
+    groupProfile: PropTypes.shape({
+        groupId: PropTypes.string.isRequired,
+        avatarUrl: PropTypes.string.isRequired,
+    }),
+};
+
+FlairAvatar.contextTypes = {
+    matrixClient: React.PropTypes.instanceOf(MatrixClient).isRequired,
+};
+
 export default class Flair extends React.Component {
     constructor() {
         super();
         this.state = {
-            avatarUrls: [],
+            profiles: [],
         };
     }
 
@@ -143,7 +183,7 @@ export default class Flair extends React.Component {
         }
     }
 
-    async _getAvatarUrls(groups) {
+    async _getGroupProfiles(groups) {
         const profiles = [];
         for (const groupId of groups) {
             let groupProfile = null;
@@ -154,9 +194,7 @@ export default class Flair extends React.Component {
             }
             profiles.push(groupProfile);
         }
-
-        const avatarUrls = profiles.filter((p) => p !== null).map((p) => p.avatar_url);
-        return avatarUrls;
+        return profiles.filter((p) => p !== null);
     }
 
     async _generateAvatars() {
@@ -176,19 +214,18 @@ export default class Flair extends React.Component {
         if (!groups || groups.length === 0) {
             return;
         }
-        const avatarUrls = await this._getAvatarUrls(groups);
+        const profiles = await this._getGroupProfiles(groups);
         if (!this.unmounted) {
-            this.setState({avatarUrls});
+            this.setState({profiles});
         }
     }
 
     render() {
-        if (this.state.avatarUrls.length === 0) {
+        if (this.state.profiles.length === 0) {
             return <div />;
         }
-        const avatars = this.state.avatarUrls.map((avatarUrl, index) => {
-            const httpUrl = this.context.matrixClient.mxcUrlToHttp(avatarUrl, 14, 14, 'scale', false);
-            return <img key={index} src={httpUrl} width="14px" height="14px"/>;
+        const avatars = this.state.profiles.map((profile, index) => {
+            return <FlairAvatar key={index} groupProfile={profile}/>;
         });
         return (
             <span className="mx_Flair" style={{"marginLeft": "5px", "verticalAlign": "-3px"}}>