Support full group membership cycle

Apart from knocking, ie. Invite / accept / reject / leave

src/components/views/dialogs/QuestionDialog.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 New Vector Ltd.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,6 +18,7 @@ limitations under the License.
 import React from 'react';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
+import classnames from 'classnames';
 
 export default React.createClass({
     displayName: 'QuestionDialog',
@@ -25,6 +27,7 @@ export default React.createClass({
         description: React.PropTypes.node,
         extraButtons: React.PropTypes.node,
         button: React.PropTypes.string,
+        danger: React.PropTypes.bool,
         focus: React.PropTypes.bool,
         onFinished: React.PropTypes.func.isRequired,
     },
@@ -36,6 +39,7 @@ export default React.createClass({
             extraButtons: null,
             focus: true,
             hasCancelButton: true,
+            danger: false,
         };
     },
 
@@ -54,6 +58,10 @@ export default React.createClass({
                 {_t("Cancel")}
             </button>
         ) : null;
+        const buttonClasses = classnames({
+            mx_Dialog_primary: true,
+            danger: this.props.danger,
+        });
         return (
             <BaseDialog className="mx_QuestionDialog" onFinished={this.props.onFinished}
                 onEnterPressed={ this.onOk }
@@ -63,7 +71,7 @@ export default React.createClass({
                     {this.props.description}
                 </div>
                 <div className="mx_Dialog_buttons">
-                    <button className="mx_Dialog_primary" onClick={this.onOk} autoFocus={this.props.focus}>
+                    <button className={buttonClasses} onClick={this.onOk} autoFocus={this.props.focus}>
                         {this.props.button || _t('OK')}
                     </button>
                     {this.props.extraButtons}

src/components/views/groups/GroupMemberInfo.js

@@ -41,6 +41,14 @@ module.exports = withMatrixClient(React.createClass({
         member: GroupMemberType,
     },
 
+    getInitialState: function() {
+        return {
+            fetching: false,
+            removingUser: false,
+            members: null,
+        }
+    },
+
     componentWillMount: function() {
         this._fetchMembers();
     },
@@ -67,11 +75,28 @@ module.exports = withMatrixClient(React.createClass({
             action: _t('Remove from group'),
             danger: true,
             onFinished: (proceed) => {
+                if (!proceed) return;
+
+                this.setState({removingUser: true});
+                this.props.matrixClient.removeUserFromGroup(this.props.groupId, this.props.member.userId).then(() => {
+                    dis.dispatch({
+                        action: "view_user",
+                        member: null
+                    });
+                }).catch((e) => {
+                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    Modal.createTrackedDialog('Failed to remove user from group', '', ErrorDialog, {
+                        title: _t('Error'),
+                        description: _t('Failed to remove user from group'),
+                    });
+                }).finally(() => {
+                    this.setState({removingUser: false});
+                });
             },
         });
     },
 
-    onCancel: function(e) {
+    _onCancel: function(e) {
         dis.dispatch({
             action: "view_user",
             member: null
@@ -86,7 +111,7 @@ module.exports = withMatrixClient(React.createClass({
     },
 
     render: function() {
-        if (this.state.fetching) {
+        if (this.state.fetching || this.state.removingUser) {
             const Loader = sdk.getComponent("elements.Spinner");
             return <Loader />;
         }
@@ -140,7 +165,7 @@ module.exports = withMatrixClient(React.createClass({
         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>
+                    <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>