Make proper async calls when switching channels

1 files changed, 16 insertions, 52 deletions

diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx
index b4c037183..a436de57d 100644
--- a/web/react/components/sidebar.jsx
+++ b/web/react/components/sidebar.jsx
@@ -20,7 +20,6 @@ import * as Utils from '../utils/utils.jsx';
 import Constants from '../utils/constants.jsx';
 const Preferences = Constants.Preferences;
 const TutorialSteps = Constants.TutorialSteps;
-const NotificationPrefs = Constants.NotificationPrefs;
 
 const Tooltip = ReactBootstrap.Tooltip;
 const OverlayTrigger = ReactBootstrap.OverlayTrigger;
@@ -39,7 +38,6 @@ export default class Sidebar extends React.Component {
         this.onScroll = this.onScroll.bind(this);
         this.updateUnreadIndicators = this.updateUnreadIndicators.bind(this);
         this.handleLeaveDirectChannel = this.handleLeaveDirectChannel.bind(this);
-        this.updateScrollbar = this.updateScrollbar.bind(this);
         this.handleResize = this.handleResize.bind(this);
 
         this.showNewChannelModal = this.showNewChannelModal.bind(this);
@@ -49,8 +47,6 @@ export default class Sidebar extends React.Component {
 
         this.createChannelElement = this.createChannelElement.bind(this);
         this.updateTitle = this.updateTitle.bind(this);
-        this.setUnreadCountPerChannel = this.setUnreadCountPerChannel.bind(this);
-        this.getUnreadCount = this.getUnreadCount.bind(this);
 
         this.isLeaving = new Map();
 
@@ -60,43 +56,15 @@ export default class Sidebar extends React.Component {
         state.loadingDMChannel = -1;
         state.windowWidth = Utils.windowWidth();
         this.state = state;
-
-        this.unreadCountPerChannel = {};
-        this.setUnreadCountPerChannel();
-    }
-    setUnreadCountPerChannel() {
-        const channels = ChannelStore.getAll();
-        const members = ChannelStore.getAllMembers();
-        const channelUnreadCounts = {};
-
-        channels.forEach((ch) => {
-            const chMember = members[ch.id];
-            let chMentionCount = chMember.mention_count;
-            let chUnreadCount = ch.total_msg_count - chMember.msg_count - chMentionCount;
-
-            if (ch.type === 'D') {
-                chMentionCount = chUnreadCount;
-                chUnreadCount = 0;
-            } else if (chMember.notify_props && chMember.notify_props.mark_unread === NotificationPrefs.MENTION) {
-                chUnreadCount = 0;
-            }
-
-            channelUnreadCounts[ch.id] = {msgs: chUnreadCount, mentions: chMentionCount};
-        });
-
-        this.unreadCountPerChannel = channelUnreadCounts;
     }
-    getUnreadCount(channelId) {
-        let mentions = 0;
+    getTotalUnreadCount() {
         let msgs = 0;
+        let mentions = 0;
+        const unreadCounts = this.state.unreadCounts;
 
-        if (channelId) {
-            return this.unreadCountPerChannel[channelId] ? this.unreadCountPerChannel[channelId] : {msgs, mentions};
-        }
-
-        Object.keys(this.unreadCountPerChannel).forEach((chId) => {
-            msgs += this.unreadCountPerChannel[chId].msgs;
-            mentions += this.unreadCountPerChannel[chId].mentions;
+        Object.keys(unreadCounts).forEach((chId) => {
+            msgs += unreadCounts[chId].msgs;
+            mentions += unreadCounts[chId].mentions;
         });
 
         return {msgs, mentions};
@@ -157,6 +125,7 @@ export default class Sidebar extends React.Component {
             privateChannels,
             visibleDirectChannels,
             hiddenDirectChannelCount,
+            unreadCounts: JSON.parse(JSON.stringify(ChannelStore.getUnreadCounts())),
             showTutorialTip: parseInt(tutorialPref.value, 10) === TutorialSteps.CHANNEL_POPOVER
         };
     }
@@ -170,7 +139,6 @@ export default class Sidebar extends React.Component {
 
         this.updateTitle();
         this.updateUnreadIndicators();
-        this.updateScrollbar();
 
         window.addEventListener('resize', this.handleResize);
 
@@ -187,7 +155,6 @@ export default class Sidebar extends React.Component {
     componentDidUpdate() {
         this.updateTitle();
         this.updateUnreadIndicators();
-        this.updateScrollbar();
     }
     componentWillUnmount() {
         window.removeEventListener('resize', this.handleResize);
@@ -204,10 +171,9 @@ export default class Sidebar extends React.Component {
             windowHeight: Utils.windowHeight()
         });
     }
-    updateScrollbar() {
-    }
     onChange() {
-        this.setState(this.getStateFromStores());
+        const newState = this.getStateFromStores();
+        this.setState(newState);
     }
     updateTitle() {
         const channel = ChannelStore.getCurrent();
@@ -222,7 +188,7 @@ export default class Sidebar extends React.Component {
                 currentChannelName = Utils.getDirectTeammate(channel.id).username;
             }
 
-            const unread = this.getUnreadCount();
+            const unread = this.getTotalUnreadCount();
             const mentionTitle = unread.mentions > 0 ? '(' + unread.mentions + ') ' : '';
             const unreadTitle = unread.msgs > 0 ? '* ' : '';
             document.title = mentionTitle + unreadTitle + currentChannelName + ' - ' + TeamStore.getCurrent().display_name + ' ' + currentSiteName;
@@ -348,13 +314,13 @@ export default class Sidebar extends React.Component {
     }
 
     createChannelElement(channel, index, arr, handleClose) {
-        var members = this.state.members;
-        var activeId = this.state.activeId;
-        var channelMember = members[channel.id];
-        var unreadCount = this.getUnreadCount(channel.id);
-        var msgCount;
+        const members = this.state.members;
+        const activeId = this.state.activeId;
+        const channelMember = members[channel.id];
+        const unreadCount = this.state.unreadCounts[channel.id] || {msgs: 0, mentions: 0};
+        let msgCount;
 
-        var linkClass = '';
+        let linkClass = '';
         if (channel.id === activeId) {
             linkClass = 'active';
         }
@@ -511,8 +477,6 @@ export default class Sidebar extends React.Component {
     render() {
         this.badgesActive = false;
 
-        this.setUnreadCountPerChannel();
-
         // keep track of the first and last unread channels so we can use them to set the unread indicators
         this.firstUnreadChannel = null;
         this.lastUnreadChannel = null;