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/channel_loader.jsx4
-rw-r--r--web/react/components/delete_post_modal.jsx7
-rw-r--r--web/react/components/edit_post_modal.jsx2
-rw-r--r--web/react/components/invite_member_modal.jsx7
-rw-r--r--web/react/components/login.jsx5
-rw-r--r--web/react/components/member_list_item.jsx32
-rw-r--r--web/react/components/signup_team_complete.jsx11
-rw-r--r--web/react/components/signup_user_complete.jsx6
9 files changed, 93 insertions, 108 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/channel_loader.jsx b/web/react/components/channel_loader.jsx
index 537a41d03..1b389aa1d 100644
--- a/web/react/components/channel_loader.jsx
+++ b/web/react/components/channel_loader.jsx
@@ -5,12 +5,16 @@
to the server on page load. This is to prevent other React controls from spamming
AsyncClient with requests. */
+var BrowserStore = require('../stores/browser_store.jsx');
var AsyncClient = require('../utils/async_client.jsx');
var SocketStore = require('../stores/socket_store.jsx');
var Constants = require('../utils/constants.jsx');
module.exports = React.createClass({
componentDidMount: function() {
+ // Initalize stores
+ BrowserStore.initalize();
+
/* Start initial aysnc loads */
AsyncClient.getMe();
AsyncClient.getPosts(true);
diff --git a/web/react/components/delete_post_modal.jsx b/web/react/components/delete_post_modal.jsx
index c88b548d1..fefac12d7 100644
--- a/web/react/components/delete_post_modal.jsx
+++ b/web/react/components/delete_post_modal.jsx
@@ -3,6 +3,7 @@
var Client = require('../utils/client.jsx');
var PostStore = require('../stores/post_store.jsx');
+var BrowserStore = require('../stores/browser_store.jsx');
var utils = require('../utils/utils.jsx');
var AsyncClient = require('../utils/async_client.jsx');
var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
@@ -54,9 +55,9 @@ module.exports = React.createClass({
var self = this;
$(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) {
var newState = {};
- if(sessionStorage.getItem('edit_state_transfer')) {
- newState = JSON.parse(sessionStorage.getItem('edit_state_transfer'));
- sessionStorage.removeItem('edit_state_transfer');
+ if(BrowserStore.getItem('edit_state_transfer')) {
+ newState = JSON.parse(BrowserStore.getItem('edit_state_transfer'));
+ BrowserStore.removeItem('edit_state_transfer');
} else {
var button = e.relatedTarget;
newState = { title: $(button).attr('data-title'), channel_id: $(button).attr('data-channelid'), post_id: $(button).attr('data-postid'), comments: $(button).attr('data-comments') };
diff --git a/web/react/components/edit_post_modal.jsx b/web/react/components/edit_post_modal.jsx
index 24c2d7322..d741e189b 100644
--- a/web/react/components/edit_post_modal.jsx
+++ b/web/react/components/edit_post_modal.jsx
@@ -13,7 +13,7 @@ module.exports = React.createClass({
if (updatedPost.message.length === 0) {
var tempState = this.state;
delete tempState.editText;
- sessionStorage.setItem('edit_state_transfer', JSON.stringify(tempState));
+ BrowserStore.setItem('edit_state_transfer', JSON.stringify(tempState));
$("#edit_post").modal('hide');
$("#delete_post").modal('show');
return;
diff --git a/web/react/components/invite_member_modal.jsx b/web/react/components/invite_member_modal.jsx
index d1672126d..9ff67ae1b 100644
--- a/web/react/components/invite_member_modal.jsx
+++ b/web/react/components/invite_member_modal.jsx
@@ -89,7 +89,12 @@ module.exports = React.createClass({
$(this.refs.modal.getDOMNode()).modal('hide');
}.bind(this),
function(err) {
- this.setState({ server_error: err });
+ if (err.message === "This person is already on your team") {
+ email_errors[err.detailed_error] = err.message;
+ this.setState({ email_errors: email_errors });
+ }
+ else
+ this.setState({ server_error: err.message});
}.bind(this)
);
diff --git a/web/react/components/login.jsx b/web/react/components/login.jsx
index 3b6f96c2d..74c7d4065 100644
--- a/web/react/components/login.jsx
+++ b/web/react/components/login.jsx
@@ -7,6 +7,7 @@
var utils = require('../utils/utils.jsx');
var client = require('../utils/client.jsx');
var UserStore = require('../stores/user_store.jsx');
+var BrowserStore = require('../stores/browser_store.jsx');
var FindTeamDomain = React.createClass({
@@ -21,7 +22,7 @@ var FindTeamDomain = React.createClass({
return;
}
- if (!utils.isLocalStorageSupported()) {
+ if (!BrowserStore.isLocalStorageSupported()) {
state.server_error = "This service requires local storage to be enabled. Please enable it or exit private browsing.";
this.setState(state);
return;
@@ -114,7 +115,7 @@ module.exports = React.createClass({
return;
}
- if (!utils.isLocalStorageSupported()) {
+ if (!BrowserStore.isLocalStorageSupported()) {
state.server_error = "This service requires local storage to be enabled. Please enable it or exit private browsing.";
this.setState(state);
return;
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>
);
diff --git a/web/react/components/signup_team_complete.jsx b/web/react/components/signup_team_complete.jsx
index 587d8cb82..500ee231e 100644
--- a/web/react/components/signup_team_complete.jsx
+++ b/web/react/components/signup_team_complete.jsx
@@ -5,11 +5,12 @@
var utils = require('../utils/utils.jsx');
var client = require('../utils/client.jsx');
var UserStore = require('../stores/user_store.jsx');
-var constants = require('../utils/constants.jsx')
+var BrowserStore = require('../stores/browser_store.jsx');
+var constants = require('../utils/constants.jsx');
WelcomePage = React.createClass({
submitNext: function (e) {
- if (!utils.isLocalStorageSupported()) {
+ if (!BrowserStore.isLocalStorageSupported()) {
this.setState({ storage_error: "This service requires local storage to be enabled. Please enable it or exit private browsing."} );
return;
}
@@ -32,7 +33,7 @@ WelcomePage = React.createClass({
this.setState(state);
return;
}
- else if (!utils.isLocalStorageSupported()) {
+ else if (!BrowserStore.isLocalStorageSupported()) {
state.email_error = "This service requires local storage to be enabled. Please enable it or exit private browsing.";
this.setState(state);
return;
@@ -595,7 +596,7 @@ PasswordPage = React.createClass({
module.exports = React.createClass({
updateParent: function(state, skipSet) {
- localStorage.setItem(this.props.hash, JSON.stringify(state));
+ BrowserStore.setGlobalItem(this.props.hash, JSON.stringify(state));
if (!skipSet) {
this.setState(state);
@@ -604,7 +605,7 @@ module.exports = React.createClass({
getInitialState: function() {
var props = null;
try {
- props = JSON.parse(localStorage.getItem(this.props.hash));
+ props = JSON.parse(BrowserStore.getGlobalItem(this.props.hash));
}
catch(parse_error) {
}
diff --git a/web/react/components/signup_user_complete.jsx b/web/react/components/signup_user_complete.jsx
index b9f32f0bc..124e617bd 100644
--- a/web/react/components/signup_user_complete.jsx
+++ b/web/react/components/signup_user_complete.jsx
@@ -5,7 +5,7 @@
var utils = require('../utils/utils.jsx');
var client = require('../utils/client.jsx');
var UserStore = require('../stores/user_store.jsx');
-
+var BrowserStore = require('../stores/browser_store.jsx');
module.exports = React.createClass({
handleSubmit: function(e) {
@@ -53,7 +53,7 @@ module.exports = React.createClass({
UserStore.setLastEmail(this.state.user.email);
UserStore.setCurrentUser(data);
if (this.props.hash > 0)
- localStorage.setItem(this.props.hash, JSON.stringify({wizard: "finished"}));
+ BrowserStore.setGlobalItem(this.props.hash, JSON.stringify({wizard: "finished"}));
window.location.href = '/channels/town-square';
}.bind(this),
function(err) {
@@ -75,7 +75,7 @@ module.exports = React.createClass({
getInitialState: function() {
var props = null;
try {
- props = JSON.parse(localStorage.getItem(this.props.hash));
+ props = JSON.parse(BrowserStore.getGlobalItem(this.props.hash));
}
catch(parse_error) {
}
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-10-30 07:15:43 +0000