From e64cc3b666c9f2e9ac76ee23218b7c7c55815470 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Thu, 21 Sep 2017 13:25:36 +0100 Subject: [PATCH 1/4] Implement `view_group` dispatch when clicking flair --- src/components/views/elements/Flair.js | 53 ++++++++++++++++++++------ 1 file changed, 42 insertions(+), 11 deletions(-) diff --git a/src/components/views/elements/Flair.js b/src/components/views/elements/Flair.js index cb60be4fef..bb72786073 100644 --- a/src/components/views/elements/Flair.js +++ b/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; @@ -121,14 +122,47 @@ async function getGroupProfileCached(matrixClient, groupId) { } groupProfiles[groupId] = await matrixClient.getGroupProfile(groupId); + groupProfiles[groupId].group_id = groupId; + 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.group_id, + }); + } + + render() { + const httpUrl = this.context.matrixClient.mxcUrlToHttp( + this.props.groupProfile.avatar_url, 14, 14, 'scale', false); + return ; + } +} + +FlairAvatar.propTypes = { + groupProfile: PropTypes.string, +}; + +FlairAvatar.contextTypes = { + matrixClient: React.PropTypes.instanceOf(MatrixClient).isRequired, +}; + export default class Flair extends React.Component { constructor() { super(); this.state = { - avatarUrls: [], + profiles: [], }; } @@ -143,7 +177,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 +188,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 +208,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
; } - const avatars = this.state.avatarUrls.map((avatarUrl, index) => { - const httpUrl = this.context.matrixClient.mxcUrlToHttp(avatarUrl, 14, 14, 'scale', false); - return ; + const avatars = this.state.profiles.map((profile, index) => { + return ; }); return ( From 41a9ff22fbbcea2eb2a96071e54afc4d967a2cee Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Thu, 21 Sep 2017 14:22:43 +0100 Subject: [PATCH 2/4] Rename profile object properties to camelCase Also, add correct PropTypes for FlairAvatar --- src/components/views/elements/Flair.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/components/views/elements/Flair.js b/src/components/views/elements/Flair.js index bb72786073..cce115dc45 100644 --- a/src/components/views/elements/Flair.js +++ b/src/components/views/elements/Flair.js @@ -121,8 +121,11 @@ async function getGroupProfileCached(matrixClient, groupId) { return groupProfiles[groupId]; } - groupProfiles[groupId] = await matrixClient.getGroupProfile(groupId); - groupProfiles[groupId].group_id = groupId; + const profile = await matrixClient.getGroupProfile(groupId); + groupProfiles[groupId] = { + groupId, + avatarUrl: profile.avatar_url, + }; return groupProfiles[groupId]; } @@ -139,19 +142,22 @@ class FlairAvatar extends React.Component { ev.stopPropagation(); dis.dispatch({ action: 'view_group', - group_id: this.props.groupProfile.group_id, + group_id: this.props.groupProfile.groupId, }); } render() { const httpUrl = this.context.matrixClient.mxcUrlToHttp( - this.props.groupProfile.avatar_url, 14, 14, 'scale', false); + this.props.groupProfile.avatarUrl, 14, 14, 'scale', false); return ; } } FlairAvatar.propTypes = { - groupProfile: PropTypes.string, + groupProfile: PropTypes.shape({ + groupId: PropTypes.string.isRequired, + avatarUrl: PropTypes.string.isRequired, + }), }; FlairAvatar.contextTypes = { From add91f9a7d930d439fe8d80d4f6d77c244cae284 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 21 Sep 2017 16:28:49 +0100 Subject: [PATCH 3/4] Update when a group arrives --- src/components/views/rooms/RoomList.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js index ac0d3e047c..a6d34f9b08 100644 --- a/src/components/views/rooms/RoomList.js +++ b/src/components/views/rooms/RoomList.js @@ -89,6 +89,7 @@ module.exports = React.createClass({ cli.on("RoomMember.name", this.onRoomMemberName); cli.on("Event.decrypted", this.onEventDecrypted); cli.on("accountData", this.onAccountData); + cli.on("Group.myMembership", this._onGroupMyMembership); this.refreshRoomList(); @@ -157,6 +158,7 @@ module.exports = React.createClass({ MatrixClientPeg.get().removeListener("RoomMember.name", this.onRoomMemberName); MatrixClientPeg.get().removeListener("Event.decrypted", this.onEventDecrypted); MatrixClientPeg.get().removeListener("accountData", this.onAccountData); + MatrixClientPeg.get().removeListener("Group.myMembership", this._onGroupMyMembership); } // cancel any pending calls to the rate_limited_funcs this._delayedRefreshRoomList.cancelPendingCall(); @@ -236,6 +238,10 @@ module.exports = React.createClass({ } }, + _onGroupMyMembership: function(group) { + this.forceUpdate(); + }, + _delayedRefreshRoomList: new rate_limited_func(function() { this.refreshRoomList(); }, 500), From 3c2e6fdf9e39fc811c3fb1785141cd05a9a8651e Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 21 Sep 2017 16:55:56 +0100 Subject: [PATCH 4/4] Honour the is_privileged flag in GroupView --- src/components/structures/GroupView.js | 22 ++++++++++++++-------- src/i18n/strings/en_EN.json | 3 ++- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js index 1b4b5cb809..ef56a90330 100644 --- a/src/components/structures/GroupView.js +++ b/src/components/structures/GroupView.js @@ -545,8 +545,12 @@ export default React.createClass({
; } else if (group.myMembership === 'join') { + let youAreAMemberText = _t("You are a member of this group"); + if (this.state.summary.user && this.state.summary.user.is_privileged) { + youAreAMemberText = _t("You are an administrator of this group"); + } return
- {_t("You are a member of this group")} + {youAreAMemberText}
; - rightButtons.push( - - - , - ); + if (summary.user && summary.user.is_privileged) { + rightButtons.push( + + + , + ); + } if (this.props.collapsedRhs) { rightButtons.push(