diff options
author | Corey Hulen <corey@hulen.com> | 2015-09-02 12:40:42 -0700 |
---|---|---|
committer | Corey Hulen <corey@hulen.com> | 2015-09-02 12:40:42 -0700 |
commit | 3e431b6c88105470e2bd583b6647976f9b9d3e5b (patch) | |
tree | 9e3beb71ce0ca39c2297a44bb1536971d86f1cf7 /web/react/components/member_list_item.jsx | |
parent | e3aa888026b2883ec6b9275ce7729866149fc5fa (diff) | |
parent | 069f8513130dd6e717a153b85684cd63b6d32a0e (diff) | |
download | chat-3e431b6c88105470e2bd583b6647976f9b9d3e5b.tar.gz chat-3e431b6c88105470e2bd583b6647976f9b9d3e5b.tar.bz2 chat-3e431b6c88105470e2bd583b6647976f9b9d3e5b.zip |
Merge pull request #535 from nickago/MM-2067
MM-2067 Cosmetic Refactoring
Diffstat (limited to 'web/react/components/member_list_item.jsx')
-rw-r--r-- | web/react/components/member_list_item.jsx | 118 |
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 +}; |