diff --git a/src/components/views/groups/GroupMemberInfo.js b/src/components/views/groups/GroupMemberInfo.js index ff100c418a..5bae4d65d2 100644 --- a/src/components/views/groups/GroupMemberInfo.js +++ b/src/components/views/groups/GroupMemberInfo.js @@ -17,50 +17,62 @@ limitations under the License. import PropTypes from 'prop-types'; import React from 'react'; +import { MatrixClient } from 'matrix-js-sdk'; import dis from '../../../dispatcher'; import Modal from '../../../Modal'; import sdk from '../../../index'; import { _t } from '../../../languageHandler'; import { GroupMemberType } from '../../../groups'; -import { groupMemberFromApiObject } from '../../../groups'; -import withMatrixClient from '../../../wrappers/withMatrixClient'; +import GroupStoreCache from '../../../stores/GroupStoreCache'; import AccessibleButton from '../elements/AccessibleButton'; import GeminiScrollbar from 'react-gemini-scrollbar'; - -module.exports = withMatrixClient(React.createClass({ +module.exports = React.createClass({ displayName: 'GroupMemberInfo', + contextTypes: { + matrixClient: PropTypes.instanceOf(MatrixClient), + }, + propTypes: { - matrixClient: PropTypes.object.isRequired, groupId: PropTypes.string, groupMember: GroupMemberType, }, getInitialState: function() { return { - fetching: false, removingUser: false, - groupMembers: null, + isUserPrivilegedInGroup: null, }; }, componentWillMount: function() { - this._fetchMembers(); + this._initGroupStore(this.props.groupId); }, - _fetchMembers: function() { - this.setState({fetching: true}); - this.props.matrixClient.getGroupUsers(this.props.groupId).then((result) => { - this.setState({ - groupMembers: result.chunk.map((apiMember) => { - return groupMemberFromApiObject(apiMember); - }), - fetching: false, - }); - }).catch((e) => { - this.setState({fetching: false}); - console.error("Failed to get group groupMember list: ", e); + componentWillReceiveProps(newProps) { + if (newProps.groupId !== this.props.groupId) { + this._unregisterGroupStore(); + this._initGroupStore(newProps.groupId); + } + }, + + _initGroupStore(groupId) { + this._groupStore = GroupStoreCache.getGroupStore( + this.context.matrixClient, this.props.groupId, + ); + this._groupStore.registerListener(this.onGroupStoreUpdated); + }, + + _unregisterGroupStore() { + if (this._groupStore) { + this._groupStore.unregisterListener(this.onGroupStoreUpdated); + } + }, + + onGroupStoreUpdated: function() { + this.setState({ + isUserPrivilegedInGroup: this._groupStore.isUserPrivileged(), }); }, @@ -74,7 +86,7 @@ module.exports = withMatrixClient(React.createClass({ if (!proceed) return; this.setState({removingUser: true}); - this.props.matrixClient.removeUserFromGroup( + this.context.matrixClient.removeUserFromGroup( this.props.groupId, this.props.groupMember.userId, ).then(() => { // return to the user list @@ -111,21 +123,14 @@ module.exports = withMatrixClient(React.createClass({ }, render: function() { - if (this.state.fetching || this.state.removingUser) { + if (this.state.removingUser) { const Spinner = sdk.getComponent("elements.Spinner"); return ; } - if (!this.state.groupMembers) return null; - const targetIsInGroup = this.state.groupMembers.some((m) => { - return m.userId === this.props.groupMember.userId; - }); - - let kickButton; - let adminButton; - - if (targetIsInGroup) { - kickButton = ( + let adminTools; + if (this.state.isUserPrivilegedInGroup) { + const kickButton = ( { _t('Remove from community') } @@ -137,22 +142,19 @@ module.exports = withMatrixClient(React.createClass({ giveModButton = {giveOpLabel} ;*/ + + if (kickButton) { + adminTools = +
+

{ _t("Admin Tools") }

+
+ { kickButton } +
+
; + } } - let adminTools; - if (kickButton || adminButton) { - adminTools = -
-

{ _t("Admin Tools") }

- -
- { kickButton } - { adminButton } -
-
; - } - - const avatarUrl = this.props.matrixClient.mxcUrlToHttp( + const avatarUrl = this.context.matrixClient.mxcUrlToHttp( this.props.groupMember.avatarUrl, 36, 36, 'crop', ); @@ -192,4 +194,4 @@ module.exports = withMatrixClient(React.createClass({ ); }, -})); +});