// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
const AsyncClient = require('../utils/async_client.jsx');
const BrowserStore = require('../stores/browser_store.jsx');
const ChannelStore = require('../stores/channel_store.jsx');
const Client = require('../utils/client.jsx');
const Constants = require('../utils/constants.jsx');
const PreferenceStore = require('../stores/preference_store.jsx');
const NewChannelFlow = require('./new_channel_flow.jsx');
const SearchBox = require('./search_bar.jsx');
const SidebarHeader = require('./sidebar_header.jsx');
const SocketStore = require('../stores/socket_store.jsx');
const TeamStore = require('../stores/team_store.jsx');
const UnreadChannelIndicator = require('./unread_channel_indicator.jsx');
const UserStore = require('../stores/user_store.jsx');
const Utils = require('../utils/utils.jsx');
export default class Sidebar extends React.Component {
constructor(props) {
super(props);
this.badgesActive = false;
this.firstUnreadChannel = null;
this.lastUnreadChannel = null;
this.getStateFromStores = this.getStateFromStores.bind(this);
this.onChange = this.onChange.bind(this);
this.onScroll = this.onScroll.bind(this);
this.onResize = this.onResize.bind(this);
this.updateUnreadIndicators = this.updateUnreadIndicators.bind(this);
this.handleLeaveDirectChannel = this.handleLeaveDirectChannel.bind(this);
this.createChannelElement = this.createChannelElement.bind(this);
this.isLeaving = new Map();
const state = this.getStateFromStores();
state.modal = '';
state.loadingDMChannel = -1;
this.state = state;
}
getStateFromStores() {
const members = ChannelStore.getAllMembers();
var teamMemberMap = UserStore.getActiveOnlyProfiles();
var currentId = ChannelStore.getCurrentId();
var teammates = [];
for (var id in teamMemberMap) {
if (id === UserStore.getCurrentId()) {
continue;
}
teammates.push(teamMemberMap[id]);
}
const preferences = PreferenceStore.getPreferences(Constants.Preferences.CATEGORY_DIRECT_CHANNEL_SHOW);
// Create lists of all read and unread direct channels
var visibleDirectChannels = [];
var hiddenDirectChannels = [];
for (var i = 0; i < teammates.length; i++) {
const teammate = teammates[i];
if (teammate.id === UserStore.getCurrentId()) {
continue;
}
var channelName = '';
if (teammate.id > UserStore.getCurrentId()) {
channelName = UserStore.getCurrentId() + '__' + teammate.id;
} else {
channelName = teammate.id + '__' + UserStore.getCurrentId();
}
let forceShow = false;
let channel = ChannelStore.getByName(channelName);
if (channel) {
const member = members[channel.id];
const msgCount = channel.total_msg_count - member.msg_count;
// always show a channel if either it is the current one or if it is unread, but it is not currently being left
forceShow = (currentId === channel.id || msgCount > 0) && !this.isLeaving.get(channel.id);
} else {
channel = {};
channel.fake = true;
channel.name = channelName;
channel.last_post_at = 0;
channel.total_msg_count = 0;
channel.type = 'D';
}
channel.display_name = teammate.username;
channel.teammate_id = teammate.id;
channel.status = UserStore.getStatus(teammate.id);
if (preferences.some((preference) => (preference.name === teammate.id && preference.value !== 'false'))) {
visibleDirectChannels.push(channel);
} else if (forceShow) {
// make sure that unread direct channels are visible
const preference = PreferenceStore.setPreference(Constants.Preferences.CATEGORY_DIRECT_CHANNEL_SHOW, teammate.id, 'true');
AsyncClient.savePreferences([preference]);
visibleDirectChannels.push(channel);
} else {
hiddenDirectChannels.push(channel);
}
}
visibleDirectChannels.sort(this.sortChannelsByDisplayName);
hiddenDirectChannels.sort(this.sortChannelsByDisplayName);
return {
activeId: currentId,
channels: ChannelStore.getAll(),
members,
visibleDirectChannels,
hiddenDirectChannels
};
}
componentDidMount() {
ChannelStore.addChangeListener(this.onChange);
UserStore.addChangeListener(this.onChange);
UserStore.addStatusesChangeListener(this.onChange);
TeamStore.addChangeListener(this.onChange);
SocketStore.addChangeListener(this.onSocketChange);
PreferenceStore.addChangeListener(this.onChange);
AsyncClient.getDirectChannelPreferences();
$('.nav-pills__container').perfectScrollbar();
this.updateTitle();
this.updateUnreadIndicators();
$(window).on('resize', this.onResize);
}
shouldComponentUpdate(nextProps, nextState) {
if (!Utils.areStatesEqual(nextProps, this.props)) {
return true;
}
if (!Utils.areStatesEqual(nextState, this.state)) {
return true;
}
return false;
}
componentDidUpdate() {
this.updateTitle();
this.updateUnreadIndicators();
}
componentWillUnmount() {
$(window).off('resize', this.onResize);
ChannelStore.removeChangeListener(this.onChange);
UserStore.removeChangeListener(this.onChange);
UserStore.removeStatusesChangeListener(this.onChange);
TeamStore.removeChangeListener(this.onChange);
SocketStore.removeChangeListener(this.onSocketChange);
PreferenceStore.removeChangeListener(this.onChange);
}
onChange() {
var newState = this.getStateFromStores();
if (!Utils.areStatesEqual(newState, this.state)) {
this.setState(newState);
}
}
onSocketChange(msg) {
if (msg.action === 'posted') {
if (ChannelStore.getCurrentId() === msg.channel_id) {
if (window.isActive) {
AsyncClient.updateLastViewedAt();
}
} else {
AsyncClient.getChannels();
}
if (UserStore.getCurrentId() !== msg.user_id) {
var mentions = [];
if (msg.props.mentions) {
mentions = JSON.parse(msg.props.mentions);
}
var channel = ChannelStore.get(msg.channel_id);
const user = UserStore.getCurrentUser();
const member = ChannelStore.getMember(msg.channel_id);
var notifyLevel = member && member.notify_props ? member.notify_props.desktop : 'default';
if (notifyLevel === 'default') {
notifyLevel = user.notify_props.desktop;
}
if (notifyLevel === 'none') {
return;
} else if (notifyLevel === 'mention' && mentions.indexOf(user.id) === -1 && channel.type !== 'D') {
return;
}
var username = 'Someone';
if (UserStore.hasProfile(msg.user_id)) {
username = UserStore.getProfile(msg.user_id).username;
}
var title = 'Posted';
if (channel) {
title = channel.display_name;
}
var repRegex = new RegExp('
', 'g');
var post = JSON.parse(msg.props.post);
var msgProps = msg.props;
var notifyText = post.message.replace(repRegex, '\n').replace(/\n+/g, ' ').replace('
);
}
if (msgCount > 0) {
rowClass += ' has-badge';
}
// set up status icon for direct message channels
var status = null;
if (channel.type === 'D') {
var statusIcon = '';
if (channel.status === 'online') {
statusIcon = Constants.ONLINE_ICON_SVG;
} else if (channel.status === 'away') {
statusIcon = Constants.ONLINE_ICON_SVG;
} else {
statusIcon = Constants.OFFLINE_ICON_SVG;
}
status = (
);
}
// set up click handler to switch channels (or create a new channel for non-existant ones)
var handleClick = null;
var href = '#';
var teamURL = TeamStore.getCurrentTeamUrl();
if (!channel.fake) {
handleClick = function clickHandler(e) {
if (e.target.attributes.getNamedItem('data-close')) {
handleClose(channel);
} else {
Utils.switchChannel(channel);
}
e.preventDefault();
};
} else if (channel.fake && teamURL) {
// It's a direct message channel that doesn't exist yet so let's create it now
var otherUserId = Utils.getUserIdFromChannelName(channel);
if (this.state.loadingDMChannel === -1) {
handleClick = function clickHandler(e) {
e.preventDefault();
if (e.target.attributes.getNamedItem('data-close')) {
handleClose(channel);
} else {
this.setState({loadingDMChannel: index});
Client.createDirectChannel(channel, otherUserId,
(data) => {
this.setState({loadingDMChannel: -1});
AsyncClient.getChannel(data.id);
Utils.switchChannel(data);
},
() => {
this.setState({loadingDMChannel: -1});
window.location.href = TeamStore.getCurrentTeamUrl() + '/channels/' + channel.name;
}
);
}
}.bind(this);
}
}
let closeButton = null;
if (handleClose && !badge) {
closeButton = (
{'×'}
);
rowClass = ' has-close';
}
return (