Move and merge MemberInfo

src/components/views/rooms/MemberInfo.js

@@ -25,13 +25,15 @@ limitations under the License.
  * 'muted': boolean,
  * 'isTargetMod': boolean
  */
+var React = require('react');
+var MatrixClientPeg = require("../../../MatrixClientPeg");
+var dis = require("../../../dispatcher");
+var Modal = require("../../../Modal");
+var sdk = require('../../../index');
 
-var MatrixClientPeg = require("../../MatrixClientPeg");
+module.exports = React.createClass({
-var dis = require("../../dispatcher");
+    displayName: 'MemberInfo',
-var Modal = require("../../Modal");
-var sdk = require('../../index');
 
-module.exports = {
     componentDidMount: function() {
         // work out the current state
         if (this.props.member) {
@@ -320,6 +322,76 @@ module.exports = {
             powerLevelContent.events_default
         );
         return member.powerLevel < levelToSend;
-    }
+    },
-};
+
+    onCancel: function(e) {
+        dis.dispatch({
+            action: "view_user",
+            member: null
+        });
+    },
+
+    render: function() {
+        var interactButton, kickButton, banButton, muteButton, giveModButton, spinner;
+        if (this.props.member.userId === MatrixClientPeg.get().credentials.userId) {
+            interactButton = <div className="mx_MemberInfo_field" onClick={this.onLeaveClick}>Leave room</div>;
+        }
+        else {
+            interactButton = <div className="mx_MemberInfo_field" onClick={this.onChatClick}>Start chat</div>;
+        }
+
+        if (this.state.creatingRoom) {
+            var Loader = sdk.getComponent("elements.Spinner");
+            spinner = <Loader imgClassName="mx_ContextualMenu_spinner"/>;
+        }
+
+        if (this.state.can.kick) {
+            kickButton = <div className="mx_MemberInfo_field" onClick={this.onKick}>
+                Kick
+            </div>;
+        }
+        if (this.state.can.ban) {
+            banButton = <div className="mx_MemberInfo_field" onClick={this.onBan}>
+                Ban
+            </div>;
+        }
+        if (this.state.can.mute) {
+            var muteLabel = this.state.muted ? "Unmute" : "Mute";
+            muteButton = <div className="mx_MemberInfo_field" onClick={this.onMuteToggle}>
+                {muteLabel}
+            </div>;
+        }
+        if (this.state.can.modifyLevel) {
+            var giveOpLabel = this.state.isTargetMod ? "Revoke Mod" : "Make Mod";
+            giveModButton = <div className="mx_MemberInfo_field" onClick={this.onModToggle}>
+                {giveOpLabel}
+            </div>
+        }
+
+        var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+        return (
+            <div className="mx_MemberInfo">
+                <img className="mx_MemberInfo_cancel" src="img/cancel-black.png" width="18" height="18" onClick={this.onCancel}/>
+                <div className="mx_MemberInfo_avatar">
+                    <MemberAvatar member={this.props.member} width={48} height={48} />
+                </div>
+                <h2>{ this.props.member.name }</h2>
+                <div className="mx_MemberInfo_profileField">
+                    { this.props.member.userId }
+                </div>
+                <div className="mx_MemberInfo_profileField">
+                    power: { this.props.member.powerLevelNorm }%
+                </div>
+                <div className="mx_MemberInfo_buttons">
+                    {interactButton}
+                    {muteButton}
+                    {kickButton}
+                    {banButton}
+                    {giveModButton}
+                    {spinner}
+                </div>
+            </div>
+        );
+    }
+});