1 files changed, 85 insertions, 33 deletions

diff --git a/web/react/components/member_list_item.jsx b/web/react/components/member_list_item.jsx
index a5279909b..d244939f5 100644
--- a/web/react/components/member_list_item.jsx
+++ b/web/react/components/member_list_item.jsx
@@ -1,64 +1,116 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-var ChannelStore = require('../stores/channel_store.jsx');
 var UserStore = require('../stores/user_store.jsx');
 
-module.exports = React.createClass({
-    displayName: 'MemberListItem',
-    handleInvite: function(e) {
+export default class MemberListItem extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.handleInvite = this.handleInvite.bind(this);
+        this.handleRemove = this.handleRemove.bind(this);
+        this.handleMakeAdmin = this.handleMakeAdmin.bind(this);
+    }
+    handleInvite(e) {
         e.preventDefault();
         this.props.handleInvite(this.props.member.id);
-    },
-    handleRemove: function(e) {
+    }
+    handleRemove(e) {
         e.preventDefault();
         this.props.handleRemove(this.props.member.id);
-    },
-    handleMakeAdmin: function(e) {
+    }
+    handleMakeAdmin(e) {
         e.preventDefault();
         this.props.handleMakeAdmin(this.props.member.id);
-    },
-    render: function() {
-
+    }
+    render() {
         var member = this.props.member;
         var isAdmin = this.props.isAdmin;
-        var isMemberAdmin = member.roles.indexOf("admin") > -1;
+        var isMemberAdmin = member.roles.indexOf('admin') > -1;
         var timestamp = UserStore.getCurrentUser().update_at;
 
         var invite;
         if (member.invited && this.props.handleInvite) {
-            invite = <span className="member-role">Added</span>;
+            invite = <span className='member-role'>Added</span>;
         } else if (this.props.handleInvite) {
-            invite = <a onClick={this.handleInvite} className="btn btn-sm btn-primary member-invite"><i className="glyphicon glyphicon-envelope"/>  Add</a>;
-        } else if (isAdmin && !isMemberAdmin && (member.id != UserStore.getCurrentId())) {
+            invite = (
+                    <a
+                        onClick={this.handleInvite}
+                        className='btn btn-sm btn-primary member-invite'>
+                        <i className='glyphicon glyphicon-envelope'/>  Add
+                    </a>
+            );
+        } else if (isAdmin && !isMemberAdmin && (member.id !== UserStore.getCurrentId())) {
             var self = this;
+
+            let makeAdminOption = null;
+            if (makeAdminOption) {
+                makeAdminOption = (
+                                    <li role='presentation'>
+                                        <a
+                                            href=''
+                                            role='menuitem'
+                                            onClick={self.handleMakeAdmin}>Make Admin
+                                        </a>
+                                    </li>);
+            }
+
+            let handleRemoveOption = null;
+            if (handleRemoveOption) {
+                handleRemoveOption = (
+                                        <li role='presentation'>
+                                            <a
+                                                href=''
+                                                role='menuitem'
+                                                onClick={self.handleRemove}>Remove Member
+                                            </a>
+                                        </li>);
+            }
+
             invite = (
-                        <div className="dropdown member-drop">
-                            <a href="#" className="dropdown-toggle theme" type="button" id="channel_header_dropdown" data-toggle="dropdown" aria-expanded="true">
-                                <span className="text-capitalize">{member.roles || 'Member'}  </span>
-                                <span className="caret"></span>
+                        <div className='dropdown member-drop'>
+                            <a
+                                href='#'
+                                className='dropdown-toggle theme'
+                                type='button'
+                                id='channel_header_dropdown'
+                                data-toggle='dropdown'
+                                aria-expanded='true' >
+                                <span className='text-capitalize'>{member.roles || 'Member'} </span>
+                                <span className='caret'></span>
                             </a>
-                            <ul className="dropdown-menu member-menu" role="menu" aria-labelledby="channel_header_dropdown">
-                                { this.props.handleMakeAdmin ?
-                                <li role="presentation"><a href="" role="menuitem" onClick={self.handleMakeAdmin}>Make Admin</a></li>
-                                : null }
-                                { this.props.handleRemove ?
-                                <li role="presentation"><a href="" role="menuitem" onClick={self.handleRemove}>Remove Member</a></li>
-                                : null }
+                            <ul
+                                className='dropdown-menu member-menu'
+                                role='menu'
+                                aria-labelledby='channel_header_dropdown'>
+                                {makeAdminOption}
+                                {handleRemoveOption}
                             </ul>
                         </div>
                     );
         } else {
-            invite = <div className="member-role text-capitalize">{member.roles || 'Member'}<span className="caret hidden"></span></div>;
+            invite = <div className='member-role text-capitalize'>{member.roles || 'Member'}<span className='caret hidden'></span></div>;
         }
 
         return (
-            <div className="row member-div">
-                <img className="post-profile-img pull-left" src={"/api/v1/users/" + member.id + "/image?time=" + timestamp} height="36" width="36" />
-                <span className="member-name">{member.username}</span>
-                <span className="member-email">{member.email}</span>
-                { invite }
+            <div className='row member-div'>
+                <img
+                    className='post-profile-img pull-left'
+                    src={'/api/v1/users/' + member.id + '/image?time=' + timestamp}
+                    height='36'
+                    width='36' />
+                <span className='member-name'>{member.username}</span>
+                <span className='member-email'>{member.email}</span>
+                {invite}
             </div>
         );
     }
-});
+}
+
+MemberListItem.propTypes = {
+    handleInvite: React.PropTypes.func,
+    handleRemove: React.PropTypes.func,
+    handleMakeAdmin: React.PropTypes.func,
+    member: React.PropTypes.object,
+    isAdmin: React.PropTypes.bool
+};