WIP group member list/tiles

src/components/views/dialogs/ConfirmUserActionDialog.js

@@ -18,6 +18,7 @@ import React from 'react';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import classnames from 'classnames';
+import { GroupMemberType } from '../../../groups';
 
 /*
  * A dialog for confirming an operation on another user.
@@ -30,7 +31,10 @@ import classnames from 'classnames';
 export default React.createClass({
     displayName: 'ConfirmUserActionDialog',
     propTypes: {
-        member: React.PropTypes.object.isRequired, // matrix-js-sdk member object
+        // matrix-js-sdk (room) member object. Supply either this or 'groupMember'
+        member: React.PropTypes.object,
+        // group member object. Supply either this or 'member'
+        groupMember: GroupMemberType,
         action: React.PropTypes.string.isRequired, // eg. 'Ban'
 
         // Whether to display a text field for a reason
@@ -69,6 +73,7 @@ export default React.createClass({
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const MemberAvatar = sdk.getComponent("views.avatars.MemberAvatar");
+        const BaseAvatar = sdk.getComponent("views.avatars.BaseAvatar");
 
         const title = _t("%(actionVerb)s this person?", { actionVerb: this.props.action});
         const confirmButtonClass = classnames({
@@ -91,6 +96,20 @@ export default React.createClass({
             );
         }
 
+        let avatar;
+        let name;
+        let userId;
+        if (this.props.member) {
+            avatar = <MemberAvatar member={this.props.member} width={48} height={48} />;
+            name = this.props.member.name;
+            userId = this.props.member.userId;
+        } else {
+            // we don't get this info from the API yet
+            avatar = <BaseAvatar name={this.props.groupMember.userId} width={36} height={36} />
+            name = this.props.groupMember.userId;
+            userId = this.props.groupMember.userId;
+        }
+
         return (
             <BaseDialog className="mx_ConfirmUserActionDialog" onFinished={this.props.onFinished}
                 onEnterPressed={ this.onOk }
@@ -98,10 +117,10 @@ export default React.createClass({
             >
                 <div className="mx_Dialog_content">
                     <div className="mx_ConfirmUserActionDialog_avatar">
-                        <MemberAvatar member={this.props.member} width={48} height={48} />
+                        {avatar}
                     </div>
-                    <div className="mx_ConfirmUserActionDialog_name">{this.props.member.name}</div>
-                    <div className="mx_ConfirmUserActionDialog_userId">{this.props.member.userId}</div>
+                    <div className="mx_ConfirmUserActionDialog_name">{name}</div>
+                    <div className="mx_ConfirmUserActionDialog_userId">{userId}</div>
                 </div>
                 {reasonBox}
                 <div className="mx_Dialog_buttons">

src/components/views/groups/GroupMemberInfo.js

@@ -0,0 +1,158 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import dis from '../../../dispatcher';
+import Modal from '../../../Modal';
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+import createRoom from '../../../createRoom';
+import DMRoomMap from '../../../utils/DMRoomMap';
+import Unread from '../../../Unread';
+import { GroupMemberType } from '../../../groups';
+import { findReadReceiptFromUserId } from '../../../utils/Receipt';
+import withMatrixClient from '../../../wrappers/withMatrixClient';
+import AccessibleButton from '../elements/AccessibleButton';
+import GeminiScrollbar from 'react-gemini-scrollbar';
+
+
+module.exports = withMatrixClient(React.createClass({
+    displayName: 'GroupMemberInfo',
+
+    propTypes: {
+        matrixClient: PropTypes.object.isRequired,
+        groupId: PropTypes.string,
+        member: GroupMemberType,
+    },
+
+    componentWillMount: function() {
+        this._fetchMembers();
+    },
+
+    _fetchMembers: function() {
+        this.setState({fetching: true});
+        this.props.matrixClient.getGroupUsers(this.props.groupId).then((result) => {
+            this.setState({
+                members: result.chunk,
+                fetching: false,
+            });
+        }).catch((e) => {
+            this.setState({fetching: false});
+            console.error("Failed to get group member list: " + e);
+        });
+    },
+
+    _onKick: function() {
+        const ConfirmUserActionDialog = sdk.getComponent("dialogs.ConfirmUserActionDialog");
+        Modal.createDialog(ConfirmUserActionDialog, {
+            groupMember: this.props.member,
+            action: _t('Remove from group'),
+            danger: true,
+            onFinished: (proceed) => {
+            },
+        });
+    },
+
+    onCancel: function(e) {
+        dis.dispatch({
+            action: "view_user",
+            member: null
+        });
+    },
+
+    onRoomTileClick(roomId) {
+        dis.dispatch({
+            action: 'view_room',
+            room_id: roomId,
+        });
+    },
+
+    render: function() {
+        if (this.state.fetching) {
+            const Loader = sdk.getComponent("elements.Spinner");
+            return <Loader />;
+        }
+        if (!this.state.members) return null;
+
+        let targetIsInGroup = false;
+        for (const m of this.state.members) {
+            if (m.user_id == this.props.member.userId) {
+                targetIsInGroup = true;
+            }
+        }
+
+        let kickButton, adminButton;
+
+        if (targetIsInGroup) {
+            kickButton = (
+                <AccessibleButton className="mx_MemberInfo_field"
+                        onClick={this._onKick}>
+                    {_t('Remove from group')}
+                </AccessibleButton>
+            );
+
+            // No make/revoke admin API yet
+            /*const opLabel = this.state.isTargetMod ? _t("Revoke Moderator") : _t("Make Moderator");
+            giveModButton = <AccessibleButton className="mx_MemberInfo_field" onClick={this.onModToggle}>
+                {giveOpLabel}
+            </AccessibleButton>;*/
+        }
+
+        let adminTools;
+        if (kickButton || adminButton) {
+            adminTools =
+                <div>
+                    <h3>{_t("Admin tools")}</h3>
+
+                    <div className="mx_MemberInfo_buttons">
+                        {kickButton}
+                        {adminButton}
+                    </div>
+                </div>;
+        }
+
+        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+        const avatar = (
+            <BaseAvatar name={this.props.member.userId} width={36} height={36} />
+        );
+
+        const memberName = this.props.member.userId;
+
+        const EmojiText = sdk.getComponent('elements.EmojiText');
+        return (
+            <div className="mx_MemberInfo">
+                <GeminiScrollbar autoshow={true}>
+                    <AccessibleButton className="mx_MemberInfo_cancel" onClick={this.onCancel}> <img src="img/cancel.svg" width="18" height="18"/></AccessibleButton>
+                    <div className="mx_MemberInfo_avatar">
+                        {avatar}
+                    </div>
+
+                    <EmojiText element="h2">{memberName}</EmojiText>
+
+                    <div className="mx_MemberInfo_profile">
+                        <div className="mx_MemberInfo_profileField">
+                            { this.props.member.userId }
+                        </div>
+                    </div>
+
+                    { adminTools }
+                </GeminiScrollbar>
+            </div>
+        );
+    }
+}));

src/components/views/groups/GroupMemberList.js

@@ -17,6 +17,7 @@ import React from 'react';
 import { _t } from '../../../languageHandler';
 import Promise from 'bluebird';
 import sdk from '../../../index';
+import { groupMemberFromApiObject } from '../../../groups';
 import GeminiScrollbar from 'react-gemini-scrollbar';
 import PropTypes from 'prop-types';
 import withMatrixClient from '../../../wrappers/withMatrixClient';
@@ -47,7 +48,9 @@ export default withMatrixClient(React.createClass({
         this.setState({fetching: true});
         this.props.matrixClient.getGroupUsers(this.props.groupId).then((result) => {
             this.setState({
-                members: result.chunk,
+                members: result.chunk.map((apiMember) => {
+                    return groupMemberFromApiObject(apiMember);
+                }),
                 fetching: false,
             });
         }).catch((e) => {
@@ -86,7 +89,7 @@ export default withMatrixClient(React.createClass({
         const memberList = this.state.members.filter((m) => {
             if (query) {
                 //const matchesName = m.name.toLowerCase().indexOf(query) !== -1;
-                const matchesId = m.user_id.toLowerCase().indexOf(query) !== -1;
+                const matchesId = m.userId.toLowerCase().indexOf(query) !== -1;
 
                 if (/*!matchesName &&*/ !matchesId) {
                     return false;
@@ -94,9 +97,9 @@ export default withMatrixClient(React.createClass({
             }
 
             return true;
-        }).map(function(m) {
+        }).map((m) => {
             return (
-                <GroupMemberTile key={m.user_id} member={m} />
+                <GroupMemberTile key={m.userId} groupId={this.props.groupId} member={m} />
             );
         });
 

src/components/views/groups/GroupMemberTile.js

@@ -19,6 +19,7 @@ import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import dis from '../../../dispatcher';
 import { _t } from '../../../languageHandler';
+import { GroupMemberType } from '../../../groups';
 import withMatrixClient from '../../../wrappers/withMatrixClient';
 import Matrix from "matrix-js-sdk";
 
@@ -27,9 +28,8 @@ export default withMatrixClient(React.createClass({
 
     propTypes: {
         matrixClient: PropTypes.object,
-        member: PropTypes.shape({
-            user_id: PropTypes.string.isRequired,
-        }).isRequired,
+        groupId: PropTypes.string.isRequired,
+        member: GroupMemberType.isRequired,
     },
 
     getInitialState: function() {
@@ -37,10 +37,10 @@ export default withMatrixClient(React.createClass({
     },
 
     onClick: function(e) {
-        const member = new Matrix.RoomMember(null, this.props.member.user_id);
         dis.dispatch({
-            action: 'view_user',
-            member: member,
+            action: 'view_group_user',
+            member: this.props.member,
+            groupId: this.props.groupId,
         });
     },
 
@@ -52,10 +52,10 @@ export default withMatrixClient(React.createClass({
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
         const EntityTile = sdk.getComponent('rooms.EntityTile');
 
-        const name = this.props.member.user_id;
+        const name = this.props.member.userId;
 
         const av = (
-            <BaseAvatar name={this.props.member.user_id} width={36} height={36} />
+            <BaseAvatar name={this.props.member.userId} width={36} height={36} />
         );
 
         return (

src/i18n/strings/en_EN.json

@@ -963,5 +963,6 @@
     "Failed to upload image": "Failed to upload image",
     "Failed to update group": "Failed to update group",
     "Description": "Description",
-    "Filter group members": "Filter group members"
+    "Filter group members": "Filter group members",
+    "Remove from group": "Remove from group"
 }