Convert group avatar URL to HTTP before handing to BaseAvatar

This is yet another component that imports the MatrixClient just for mxcUrlToHttp. It'd be much nicer to have an avatar component that accepted MXCs, e.g. by wrapping or modifying BaseAvatar.

Author: lukebarnard1

src/components/views/groups/GroupInviteTile.js

@@ -16,6 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { MatrixClient } from 'matrix-js-sdk';
 import sdk from '../../../index';
 import dis from '../../../dispatcher';
 import AccessibleButton from '../elements/AccessibleButton';
@@ -27,6 +28,10 @@ export default React.createClass({
         group: PropTypes.object.isRequired,
     },
 
+    contextTypes: {
+        matrixClient: PropTypes.instanceOf(MatrixClient),
+    },
+
     onClick: function(e) {
         dis.dispatch({
             action: 'view_group',
@@ -39,8 +44,10 @@ export default React.createClass({
         const EmojiText = sdk.getComponent('elements.EmojiText');
 
         const groupName = this.props.group.name || this.props.group.groupId;
+        const httpAvatarUrl = this.props.group.avatarUrl ?
+            this.context.matrixClient.mxcUrlToHttp(this.props.group.avatarUrl, 24, 24) : null;
 
-        const av = <BaseAvatar name={groupName} width={24} height={24} url={this.props.group.avatarUrl} />;
+        const av = <BaseAvatar name={groupName} width={24} height={24} url={httpAvatarUrl} />;
 
         const label = <EmojiText
             element="div"