summaryrefslogtreecommitdiffstats
path: root/web/react/components
diff options
context:
space:
mode:
Diffstat (limited to 'web/react/components')
-rw-r--r--web/react/components/channel_invite_modal.jsx127
-rw-r--r--web/react/components/member_list_item.jsx32
2 files changed, 66 insertions, 93 deletions
diff --git a/web/react/components/channel_invite_modal.jsx b/web/react/components/channel_invite_modal.jsx
index d41453fab..1b8fe4199 100644
--- a/web/react/components/channel_invite_modal.jsx
+++ b/web/react/components/channel_invite_modal.jsx
@@ -10,111 +10,95 @@ var AsyncClient = require('../utils/async_client.jsx');
function getStateFromStores() {
var users = UserStore.getActiveOnlyProfiles();
- var member_list = ChannelStore.getCurrentExtraInfo().members;
+ var memberIds = ChannelStore.getCurrentExtraInfo().members.map(function(user) { return user.id; });
- var nonmember_list = [];
+ var nonmembers = [];
for (var id in users) {
- var found = false;
- for (var i = 0; i < member_list.length; i++) {
- if (member_list[i].id === id) {
- found = true;
- break;
- }
- }
- if (!found) {
- nonmember_list.push(users[id]);
+ if (memberIds.indexOf(id) == -1) {
+ nonmembers.push(users[id]);
}
}
- member_list.sort(function(a,b) {
- if (a.username < b.username) return -1;
- if (a.username > b.username) return 1;
- return 0;
- });
-
- nonmember_list.sort(function(a,b) {
- if (a.username < b.username) return -1;
- if (a.username > b.username) return 1;
- return 0;
+ nonmembers.sort(function(a,b) {
+ return a.username.localeCompare(b.username);
});
var channel_name = ChannelStore.getCurrent() ? ChannelStore.getCurrent().display_name : "";
return {
- nonmember_list: nonmember_list,
- member_list: member_list,
+ nonmembers: nonmembers,
+ memberIds: memberIds,
channel_name: channel_name
};
}
module.exports = React.createClass({
+ displayName: "ChannelInviteModal",
+
+ isShown: false,
+ getInitialState: function() {
+ return {};
+ },
+
componentDidMount: function() {
+ $(React.findDOMNode(this))
+ .on('hidden.bs.modal', this._onHide)
+ .on('show.bs.modal', this._onShow);
+ },
+
+ _onShow: function() {
ChannelStore.addExtraInfoChangeListener(this._onChange);
ChannelStore.addChangeListener(this._onChange);
-
- var self = this;
- $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function(e) {
- self.setState({ render_members: false });
- });
-
- $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) {
- self.setState({ render_members: true });
- });
+ this.isShown = true;
+ this._onChange();
},
- componentWillUnmount: function() {
+
+ _onHide: function() {
ChannelStore.removeExtraInfoChangeListener(this._onChange);
ChannelStore.removeChangeListener(this._onChange);
+ this.isShown = false;
},
+
_onChange: function() {
- var new_state = getStateFromStores();
- if (!utils.areStatesEqual(this.state, new_state)) {
- this.setState(new_state);
- }
+ this.setState(getStateFromStores());
},
+
handleInvite: function(user_id) {
// Make sure the user isn't already a member of the channel
- var member_list = this.state.member_list;
- for (var i = 0; i < member_list; i++) {
- if (member_list[i].id === user_id) {
- return;
- }
+ if (this.state.memberIds.indexOf(user_id) > -1) {
+ return;
}
var data = {};
- data['user_id'] = user_id;
+ data.user_id = user_id;
client.addChannelMember(ChannelStore.getCurrentId(), data,
- function(data) {
- var nonmember_list = this.state.nonmember_list;
- var new_member;
- for (var i = 0; i < nonmember_list.length; i++) {
- if (user_id === nonmember_list[i].id) {
- nonmember_list[i].invited = true;
- new_member = nonmember_list[i];
+ function() {
+ var nonmembers = this.state.nonmembers;
+ var memberIds = this.state.memberIds;
+
+ for (var i = 0; i < nonmembers.length; i++) {
+ if (user_id === nonmembers[i].id) {
+ nonmembers[i].invited = true;
+ memberIds.push(user_id);
break;
}
}
- if (new_member) {
- member_list.push(new_member);
- member_list.sort(function(a,b) {
- if (a.username < b.username) return -1;
- if (a.username > b.username) return 1;
- return 0;
- });
- }
-
- this.setState({ invite_error: null, member_list: member_list, nonmember_list: nonmember_list });
+ this.setState({ invite_error: null, memberIds: memberIds, nonmembers: nonmembers });
AsyncClient.getChannelExtraInfo(true);
}.bind(this),
+
function(err) {
this.setState({ invite_error: err.message });
}.bind(this)
);
},
- getInitialState: function() {
- return getStateFromStores();
+
+ shouldComponentUpdate: function(nextProps, nextState) {
+ return this.isShown && !utils.areStatesEqual(this.state, nextState);
},
+
render: function() {
var invite_error = this.state.invite_error ? <label className='has-error control-label'>{this.state.invite_error}</label> : null;
@@ -125,22 +109,19 @@ module.exports = React.createClass({
}
return (
- <div className="modal fade" ref="modal" id="channel_invite" role="dialog" aria-hidden="true">
- <div className="modal-dialog">
+ <div className="modal fade" id="channel_invite" tabIndex="-1" role="dialog" aria-hidden="true">
+ <div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
- <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
+ <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 className="modal-title">Add New Members to {this.state.channel_name}</h4>
</div>
<div className="modal-body">
{ invite_error }
- { this.state.render_members ?
<MemberList
- memberList={this.state.nonmember_list}
- isAdmin={isAdmin}
- handleInvite={this.handleInvite}
- />
- : "" }
+ memberList={this.state.nonmembers}
+ isAdmin={isAdmin}
+ handleInvite={this.handleInvite} />
</div>
<div className="modal-footer">
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
@@ -151,7 +132,3 @@ module.exports = React.createClass({
);
}
});
-
-
-
-
diff --git a/web/react/components/member_list_item.jsx b/web/react/components/member_list_item.jsx
index f0bbff8bd..357fd49a8 100644
--- a/web/react/components/member_list_item.jsx
+++ b/web/react/components/member_list_item.jsx
@@ -5,13 +5,17 @@ var ChannelStore = require('../stores/channel_store.jsx');
var UserStore = require('../stores/user_store.jsx');
module.exports = React.createClass({
- handleInvite: function() {
+ displayName: 'MemberListItem',
+ handleInvite: function(e) {
+ e.preventDefault();
this.props.handleInvite(this.props.member.id);
},
- handleRemove: function() {
+ handleRemove: function(e) {
+ e.preventDefault();
this.props.handleRemove(this.props.member.id);
},
- handleMakeAdmin: function() {
+ handleMakeAdmin: function(e) {
+ e.preventDefault();
this.props.handleMakeAdmin(this.props.member.id);
},
render: function() {
@@ -20,12 +24,6 @@ module.exports = React.createClass({
var isAdmin = this.props.isAdmin;
var isMemberAdmin = member.roles.indexOf("admin") > -1;
- if (member.roles === '') {
- member.roles = 'Member';
- } else {
- member.roles = member.roles.charAt(0).toUpperCase() + member.roles.slice(1);
- }
-
var invite;
if (member.invited && this.props.handleInvite) {
invite = <span className="member-role">Added</span>;
@@ -36,30 +34,28 @@ module.exports = React.createClass({
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>{member.roles} </span>
+ <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 role="menuitem" onClick={self.handleMakeAdmin}>Make Admin</a></li>
- : "" }
+ <li role="presentation"><a href="" role="menuitem" onClick={self.handleMakeAdmin}>Make Admin</a></li>
+ : null }
{ this.props.handleRemove ?
- <li role="presentation"><a role="menuitem" onClick={self.handleRemove}>Remove Member</a></li>
- : "" }
+ <li role="presentation"><a href="" role="menuitem" onClick={self.handleRemove}>Remove Member</a></li>
+ : null }
</ul>
</div>
);
} else {
- invite = <div className="member-drop"><span>{member.roles} </span><span className="caret invisible"></span></div>;
+ invite = <div className="member-role text-capitalize" style={{marginRight: 15}}>{member.roles || 'Member'}</div>;
}
- var email = member.email.length > 0 ? member.email : "";
-
return (
<div className="row member-div">
<img className="post-profile-img pull-left" src={"/api/v1/users/" + member.id + "/image"} height="36" width="36" />
<span className="member-name">{member.username}</span>
- <span className="member-email">{email}</span>
+ <span className="member-email">{member.email}</span>
{ invite }
</div>
);