summaryrefslogtreecommitdiffstats
path: root/web/react/components/sidebar.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'web/react/components/sidebar.jsx')
-rw-r--r--web/react/components/sidebar.jsx233
1 files changed, 124 insertions, 109 deletions
diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx
index 5b8d6c542..1d39f5f67 100644
--- a/web/react/components/sidebar.jsx
+++ b/web/react/components/sidebar.jsx
@@ -7,7 +7,7 @@ var AsyncClient = require('../utils/async_client.jsx');
var SocketStore = require('../stores/socket_store.jsx');
var UserStore = require('../stores/user_store.jsx');
var TeamStore = require('../stores/team_store.jsx');
-var BrowserStore = require('../stores/browser_store.jsx')
+var BrowserStore = require('../stores/browser_store.jsx');
var utils = require('../utils/utils.jsx');
var SidebarHeader = require('./sidebar_header.jsx');
var SearchBox = require('./search_bar.jsx');
@@ -17,13 +17,15 @@ var ActionTypes = Constants.ActionTypes;
function getStateFromStores() {
var members = ChannelStore.getAllMembers();
- var team_member_map = UserStore.getActiveOnlyProfiles();
- var current_id = ChannelStore.getCurrentId();
+ var teamMemberMap = UserStore.getActiveOnlyProfiles();
+ var currentId = ChannelStore.getCurrentId();
var teammates = [];
- for (var id in team_member_map) {
- if (id === UserStore.getCurrentId()) continue;
- teammates.push(team_member_map[id]);
+ for (var id in teamMemberMap) {
+ if (id === UserStore.getCurrentId()) {
+ continue;
+ }
+ teammates.push(teamMemberMap[id]);
}
// Create lists of all read and unread direct channels
@@ -32,11 +34,11 @@ function getStateFromStores() {
for (var i = 0; i < teammates.length; i++) {
var teammate = teammates[i];
- if (teammate.id == UserStore.getCurrentId()) {
+ if (teammate.id === UserStore.getCurrentId()) {
continue;
}
- var channelName = "";
+ var channelName = '';
if (teammate.id > UserStore.getCurrentId()) {
channelName = UserStore.getCurrentId() + '__' + teammate.id;
} else {
@@ -46,17 +48,17 @@ function getStateFromStores() {
var channel = ChannelStore.getByName(channelName);
if (channel != null) {
- channel.display_name = utils.getDisplayName(teammate);
+ channel.display_name = teammate.username;
channel.teammate_username = teammate.username;
channel.status = UserStore.getStatus(teammate.id);
var channelMember = members[channel.id];
- var msg_count = channel.total_msg_count - channelMember.msg_count;
- if (msg_count > 0) {
- channel.unread = msg_count;
+ var msgCount = channel.total_msg_count - channelMember.msg_count;
+ if (msgCount > 0) {
+ channel.unread = msgCount;
showDirectChannels.push(channel);
- } else if (current_id === channel.id) {
+ } else if (currentId === channel.id) {
showDirectChannels.push(channel);
} else {
readDirectChannels.push(channel);
@@ -74,13 +76,22 @@ function getStateFromStores() {
// If we don't have MAX_DMS unread channels, sort the read list by last_post_at
if (showDirectChannels.length < Constants.MAX_DMS) {
- readDirectChannels.sort(function(a,b) {
+ readDirectChannels.sort(function(a, b) {
// sort by last_post_at first
- if (a.last_post_at > b.last_post_at) return -1;
- if (a.last_post_at < b.last_post_at) return 1;
+ if (a.last_post_at > b.last_post_at) {
+ return -1;
+ }
+ if (a.last_post_at < b.last_post_at) {
+ return 1;
+ }
+
// if last_post_at is equal, sort by name
- if (a.display_name < b.display_name) return -1;
- if (a.display_name > b.display_name) return 1;
+ if (a.display_name < b.display_name) {
+ return -1;
+ }
+ if (a.display_name > b.display_name) {
+ return 1;
+ }
return 0;
});
@@ -91,15 +102,19 @@ function getStateFromStores() {
}
readDirectChannels = readDirectChannels.slice(index);
- showDirectChannels.sort(function(a,b) {
- if (a.display_name < b.display_name) return -1;
- if (a.display_name > b.display_name) return 1;
+ showDirectChannels.sort(function(a, b) {
+ if (a.display_name < b.display_name) {
+ return -1;
+ }
+ if (a.display_name > b.display_name) {
+ return 1;
+ }
return 0;
});
}
return {
- active_id: current_id,
+ active_id: currentId,
channels: ChannelStore.getAll(),
members: members,
showDirectChannels: showDirectChannels,
@@ -108,12 +123,13 @@ function getStateFromStores() {
}
module.exports = React.createClass({
+ displayName: 'Sidebar',
componentDidMount: function() {
- ChannelStore.addChangeListener(this._onChange);
- UserStore.addChangeListener(this._onChange);
- UserStore.addStatusesChangeListener(this._onChange);
- SocketStore.addChangeListener(this._onSocketChange);
- $(".nav-pills__container").perfectScrollbar();
+ ChannelStore.addChangeListener(this.onChange);
+ UserStore.addChangeListener(this.onChange);
+ UserStore.addStatusesChangeListener(this.onChange);
+ SocketStore.addChangeListener(this.onSocketChange);
+ $('.nav-pills__container').perfectScrollbar();
this.updateTitle();
},
@@ -121,93 +137,88 @@ module.exports = React.createClass({
this.updateTitle();
},
componentWillUnmount: function() {
- ChannelStore.removeChangeListener(this._onChange);
- UserStore.removeChangeListener(this._onChange);
- UserStore.removeStatusesChangeListener(this._onChange);
- SocketStore.removeChangeListener(this._onSocketChange);
+ ChannelStore.removeChangeListener(this.onChange);
+ UserStore.removeChangeListener(this.onChange);
+ UserStore.removeStatusesChangeListener(this.onChange);
+ SocketStore.removeChangeListener(this.onSocketChange);
},
- _onChange: function() {
+ onChange: function() {
var newState = getStateFromStores();
if (!utils.areStatesEqual(newState, this.state)) {
this.setState(newState);
}
},
- _onSocketChange: function(msg) {
- if (msg.action == "posted") {
+ onSocketChange: function(msg) {
+ if (msg.action === 'posted') {
if (ChannelStore.getCurrentId() === msg.channel_id) {
AsyncClient.getChannels(true, window.isActive);
} else {
AsyncClient.getChannels(true);
}
- if (UserStore.getCurrentId() != msg.user_id) {
-
+ if (UserStore.getCurrentId() !== msg.user_id) {
var mentions = msg.props.mentions ? JSON.parse(msg.props.mentions) : [];
var channel = ChannelStore.get(msg.channel_id);
var user = UserStore.getCurrentUser();
- if (user.notify_props && ((user.notify_props.desktop === "mention" && mentions.indexOf(user.id) === -1 && channel.type !== 'D') || user.notify_props.desktop === "none")) {
+ if (user.notify_props && ((user.notify_props.desktop === 'mention' && mentions.indexOf(user.id) === -1 && channel.type !== 'D') || user.notify_props.desktop === 'none')) {
return;
}
var member = ChannelStore.getMember(msg.channel_id);
- if ((member.notify_level === "mention" && mentions.indexOf(user.id) === -1) || member.notify_level === "none" || member.notify_level === "quiet") {
+ if ((member.notify_level === 'mention' && mentions.indexOf(user.id) === -1) || member.notify_level === 'none' || member.notify_level === 'quiet') {
return;
}
- var username = "Someone";
+ var username = 'Someone';
if (UserStore.hasProfile(msg.user_id)) {
username = UserStore.getProfile(msg.user_id).username;
}
- var title = channel ? channel.display_name : "Posted";
+ var title = channel ? channel.display_name : 'Posted';
- var repRegex = new RegExp("<br>", "g");
+ var repRegex = new RegExp('<br>', 'g');
var post = JSON.parse(msg.props.post);
var msgProps = msg.props;
- var msg = post.message.replace(repRegex, "\n").replace(/\n+/g, " ").replace("<mention>", "").replace("</mention>", "");
-
- if (msg.length > 50) {
- msg = msg.substring(0,49) + "...";
+ var notifyText = post.message.replace(repRegex, '\n').replace(/\n+/g, ' ').replace('<mention>', '').replace('</mention>', '');
+
+ if (notifyText.length > 50) {
+ notifyText = notifyText.substring(0, 49) + '...';
}
- if (msg.length === 0) {
+ if (notifyText.length === 0) {
if (msgProps.image) {
- utils.notifyMe(title, username + " uploaded an image", channel);
- }
- else if (msgProps.otherFile) {
- utils.notifyMe(title, username + " uploaded a file", channel);
+ utils.notifyMe(title, username + ' uploaded an image', channel);
+ } else if (msgProps.otherFile) {
+ utils.notifyMe(title, username + ' uploaded a file', channel);
+ } else {
+ utils.notifyMe(title, username + ' did something new', channel);
}
- else {
- utils.notifyMe(title, username + " did something new", channel);
- }
- }
- else {
- utils.notifyMe(title, username + " wrote: " + msg, channel);
+ } else {
+ utils.notifyMe(title, username + ' wrote: ' + notifyText, channel);
}
- if (!user.notify_props || user.notify_props.desktop_sound === "true") {
+ if (!user.notify_props || user.notify_props.desktop_sound === 'true') {
utils.ding();
}
}
-
- } else if (msg.action == "viewed") {
+ } else if (msg.action === 'viewed') {
if (ChannelStore.getCurrentId() != msg.channel_id) {
AsyncClient.getChannels(true);
}
- } else if (msg.action == "user_added") {
+ } else if (msg.action === 'user_added') {
if (UserStore.getCurrentId() === msg.user_id) {
AsyncClient.getChannels(true);
}
- } else if(msg.action === "user_removed") {
- if(msg.user_id === UserStore.getCurrentId()) {
+ } else if (msg.action === 'user_removed') {
+ if (msg.user_id === UserStore.getCurrentId()) {
AsyncClient.getChannels(true);
- if(msg.props.channel_id === ChannelStore.getCurrentId() && $('#removed_from_channel').length > 0) {
+ if (msg.props.channel_id === ChannelStore.getCurrentId() && $('#removed_from_channel').length > 0) {
var sentState = {};
sentState.channelName = ChannelStore.getCurrent().display_name;
sentState.remover = UserStore.getProfile(msg.props.remover).username;
- BrowserStore.setItem('channel-removed-state',sentState);
+ BrowserStore.setItem('channel-removed-state', sentState);
$('#removed_from_channel').modal('show');
}
}
@@ -217,10 +228,10 @@ module.exports = React.createClass({
var channel = ChannelStore.getCurrent();
if (channel) {
if (channel.type === 'D') {
- var teammate_username = utils.getDirectTeammate(channel.id).username
- document.title = teammate_username + " " + document.title.substring(document.title.lastIndexOf("-"));
+ var teammate_username = utils.getDirectTeammate(channel.id).username;
+ document.title = teammate_username + ' ' + document.title.substring(document.title.lastIndexOf('-'));
} else {
- document.title = channel.display_name + " " + document.title.substring(document.title.lastIndexOf("-"))
+ document.title = channel.display_name + ' ' + document.title.substring(document.title.lastIndexOf('-'));
}
}
},
@@ -229,92 +240,96 @@ module.exports = React.createClass({
},
render: function() {
var members = this.state.members;
- var newsActive = window.location.pathname === "/" ? "active" : "";
+ var newsActive = window.location.pathname === '/' ? 'active' : '';
var badgesActive = false;
var self = this;
var channelItems = this.state.channels.map(function(channel) {
if (channel.type != 'O') {
- return "";
+ return '';
}
var channelMember = members[channel.id];
- var active = channel.id === self.state.active_id ? "active" : "";
+ var active = channel.id === self.state.active_id ? 'active' : '';
- var msg_count = channel.total_msg_count - channelMember.msg_count;
- var titleClass = ""
- if (msg_count > 0 && channelMember.notify_level !== "quiet") {
- titleClass = "unread-title"
+ var msgCount = channel.total_msg_count - channelMember.msg_count;
+ var titleClass = '';
+ if (msgCount > 0 && channelMember.notify_level !== 'quiet') {
+ titleClass = 'unread-title';
}
- var badge = "";
+ var badge = '';
if (channelMember.mention_count > 0) {
- badge = <span className="badge pull-right small">{channelMember.mention_count}</span>;
+ badge = <span className='badge pull-right small'>{channelMember.mention_count}</span>;
badgesActive = true;
- titleClass = "unread-title"
+ titleClass = 'unread-title';
}
return (
- <li key={channel.id} className={active}><a className={"sidebar-channel " + titleClass} href="#" onClick={function(e){e.preventDefault(); utils.switchChannel(channel);}}>{badge}{channel.display_name}</a></li>
+ <li key={channel.id} className={active}><a className={'sidebar-channel ' + titleClass} href='#' onClick={function(e){e.preventDefault(); utils.switchChannel(channel);}}>{badge}{channel.display_name}</a></li>
);
});
var privateChannelItems = this.state.channels.map(function(channel) {
- if (channel.type != 'P') {
- return "";
+ if (channel.type !== 'P') {
+ return '';
}
var channelMember = members[channel.id];
- var active = channel.id === self.state.active_id ? "active" : "";
+ var active = channel.id === self.state.active_id ? 'active' : '';
- var msg_count = channel.total_msg_count - channelMember.msg_count;
- var titleClass = ""
- if (msg_count > 0 && channelMember.notify_level !== "quiet") {
- titleClass = "unread-title"
+ var msgCount = channel.total_msg_count - channelMember.msg_count;
+ var titleClass = ''
+ if (msgCount > 0 && channelMember.notify_level !== 'quiet') {
+ titleClass = 'unread-title'
}
- var badge = "";
+ var badge = '';
if (channelMember.mention_count > 0) {
- badge = <span className="badge pull-right small">{channelMember.mention_count}</span>;
+ badge = <span className='badge pull-right small'>{channelMember.mention_count}</span>;
badgesActive = true;
- titleClass = "unread-title"
+ titleClass = 'unread-title';
}
return (
- <li key={channel.id} className={active}><a className={"sidebar-channel " + titleClass} href="#" onClick={function(e){e.preventDefault(); utils.switchChannel(channel);}}>{badge}{channel.display_name}</a></li>
+ <li key={channel.id} className={active}><a className={'sidebar-channel ' + titleClass} href='#' onClick={function(e){e.preventDefault(); utils.switchChannel(channel);}}>{badge}{channel.display_name}</a></li>
);
});
var directMessageItems = this.state.showDirectChannels.map(function(channel) {
- var badge = "";
- var titleClass = "";
+ var badge = '';
+ var titleClass = '';
- var statusIcon = "";
- if (channel.status === "online") {
+ var statusIcon = '';
+ if (channel.status === 'online') {
statusIcon = Constants.ONLINE_ICON_SVG;
- } else if (channel.status === "away") {
+ } else if (channel.status === 'away') {
statusIcon = Constants.ONLINE_ICON_SVG;
} else {
statusIcon = Constants.OFFLINE_ICON_SVG;
}
if (!channel.fake) {
- var active = channel.id === self.state.active_id ? "active" : "";
+ var active = channel.id === self.state.active_id ? 'active' : '';
if (channel.unread) {
- badge = <span className="badge pull-right small">{channel.unread}</span>;
+ badge = <span className='badge pull-right small'>{channel.unread}</span>;
badgesActive = true;
- titleClass = "unread-title"
+ titleClass = 'unread-title';
+ }
+
+ function handleClick(e) {
+ e.preventDefault();
+ utils.switchChannel(channel, channel.teammate_username);
}
return (
- <li key={channel.name} className={active}><a className={"sidebar-channel " + titleClass} href="#" onClick={function(e){e.preventDefault(); utils.switchChannel(channel, channel.teammate_username);}}><span className="status" dangerouslySetInnerHTML={{__html: statusIcon}} /> {badge}{channel.display_name}</a></li>
+ <li key={channel.name} className={active}><a className={'sidebar-channel ' + titleClass} href='#' onClick={handleClick}><span className='status' dangerouslySetInnerHTML={{__html: statusIcon}} /> {badge}{channel.display_name}</a></li>
);
} else {
return (
- <li key={channel.name} className={active}><a className={"sidebar-channel " + titleClass} href={TeamStore.getCurrentTeamUrl() + "/channels/"+channel.name}><span className="status" dangerouslySetInnerHTML={{__html: statusIcon}} /> {badge}{channel.display_name}</a></li>
+ <li key={channel.name} className={active}><a className={'sidebar-channel ' + titleClass} href={TeamStore.getCurrentTeamUrl() + '/channels/' + channel.name}><span className='status' dangerouslySetInnerHTML={{__html: statusIcon}} /> {badge}{channel.display_name}</a></li>
);
}
-
});
var link = document.createElement('link');
@@ -345,23 +360,23 @@ module.exports = React.createClass({
<SidebarHeader teamDisplayName={this.props.teamDisplayName} teamType={this.props.teamType} />
<SearchBox />
- <div className="nav-pills__container">
- <ul className="nav nav-pills nav-stacked">
- <li><h4>Channels<a className="add-channel-btn" href="#" data-toggle="modal" data-target="#new_channel" data-channeltype="O">+</a></h4></li>
+ <div className='nav-pills__container'>
+ <ul className='nav nav-pills nav-stacked'>
+ <li><h4>Channels<a className='add-channel-btn' href='#' data-toggle='modal' data-target='#new_channel' data-channeltype='O'>+</a></h4></li>
{channelItems}
- <li><a href="#" data-toggle="modal" className="nav-more" data-target="#more_channels" data-channeltype="O">More...</a></li>
+ <li><a href='#' data-toggle='modal' className='nav-more' data-target='#more_channels' data-channeltype='O'>More...</a></li>
</ul>
- <ul className="nav nav-pills nav-stacked">
- <li><h4>Private Groups<a className="add-channel-btn" href="#" data-toggle="modal" data-target="#new_channel" data-channeltype="P">+</a></h4></li>
+ <ul className='nav nav-pills nav-stacked'>
+ <li><h4>Private Groups<a className='add-channel-btn' href='#' data-toggle='modal' data-target='#new_channel' data-channeltype='P'>+</a></h4></li>
{privateChannelItems}
</ul>
- <ul className="nav nav-pills nav-stacked">
+ <ul className='nav nav-pills nav-stacked'>
<li><h4>Private Messages</h4></li>
{directMessageItems}
{ this.state.hideDirectChannels.length > 0 ?
- <li><a href="#" data-toggle="modal" className="nav-more" data-target="#more_direct_channels" data-channels={JSON.stringify(this.state.hideDirectChannels)}>{"More ("+this.state.hideDirectChannels.length+")"}</a></li>
- : "" }
+ <li><a href='#' data-toggle='modal' className='nav-more' data-target='#more_direct_channels' data-channels={JSON.stringify(this.state.hideDirectChannels)}>{'More ('+this.state.hideDirectChannels.length+')'}</a></li>
+ : '' }
</ul>
</div>
</div>