Merge pull request #1577 from mattermost/plt-1307

PLT-1307 Make proper async calls when switching channels

web/react/components/sidebar.jsx

@@ -19,7 +19,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;
@@ -38,7 +37,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);
@@ -48,8 +46,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();
 
@@ -59,43 +55,15 @@ export default class Sidebar extends React.Component {
         state.loadingDMChannel = -1;
         state.windowWidth = Utils.windowWidth();
         this.state = state;
-
-        this.unreadCountPerChannel = {};
-        this.setUnreadCountPerChannel();
     }
-    setUnreadCountPerChannel() {
+    getTotalUnreadCount() {
-        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;
         let msgs = 0;
+        let mentions = 0;
+        const unreadCounts = this.state.unreadCounts;
 
-        if (channelId) {
+        Object.keys(unreadCounts).forEach((chId) => {
-            return this.unreadCountPerChannel[channelId] ? this.unreadCountPerChannel[channelId] : {msgs, mentions};
+            msgs += unreadCounts[chId].msgs;
-        }
+            mentions += unreadCounts[chId].mentions;
-
-        Object.keys(this.unreadCountPerChannel).forEach((chId) => {
-            msgs += this.unreadCountPerChannel[chId].msgs;
-            mentions += this.unreadCountPerChannel[chId].mentions;
         });
 
         return {msgs, mentions};
@@ -156,6 +124,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
         };
     }
@@ -169,7 +138,6 @@ export default class Sidebar extends React.Component {
 
         this.updateTitle();
         this.updateUnreadIndicators();
-        this.updateScrollbar();
 
         window.addEventListener('resize', this.handleResize);
 
@@ -186,7 +154,6 @@ export default class Sidebar extends React.Component {
     componentDidUpdate() {
         this.updateTitle();
         this.updateUnreadIndicators();
-        this.updateScrollbar();
     }
     componentWillUnmount() {
         window.removeEventListener('resize', this.handleResize);
@@ -203,8 +170,6 @@ export default class Sidebar extends React.Component {
             windowHeight: Utils.windowHeight()
         });
     }
-    updateScrollbar() {
-    }
     onChange() {
         this.setState(this.getStateFromStores());
     }
@@ -221,7 +186,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;
@@ -347,13 +312,13 @@ export default class Sidebar extends React.Component {
     }
 
     createChannelElement(channel, index, arr, handleClose) {
-        var members = this.state.members;
+        const members = this.state.members;
-        var activeId = this.state.activeId;
+        const activeId = this.state.activeId;
-        var channelMember = members[channel.id];
+        const channelMember = members[channel.id];
-        var unreadCount = this.getUnreadCount(channel.id);
+        const unreadCount = this.state.unreadCounts[channel.id] || {msgs: 0, mentions: 0};
-        var msgCount;
+        let msgCount;
 
-        var linkClass = '';
+        let linkClass = '';
         if (channel.id === activeId) {
             linkClass = 'active';
         }
@@ -510,8 +475,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;

web/react/dispatcher/event_helpers.jsx

@@ -11,8 +11,8 @@ import * as Client from '../utils/client.jsx';
 
 export function emitChannelClickEvent(channel) {
     AsyncClient.getChannels();
-    AsyncClient.getChannelExtraInfo();
+    AsyncClient.getChannelExtraInfo(channel.id);
-    AsyncClient.updateLastViewedAt();
+    AsyncClient.updateLastViewedAt(channel.id);
     AsyncClient.getPosts(channel.id);
 
     AppDispatcher.handleViewAction({

web/react/stores/channel_store.jsx

@@ -7,6 +7,7 @@ import EventEmitter from 'events';
 var Utils;
 import Constants from '../utils/constants.jsx';
 const ActionTypes = Constants.ActionTypes;
+const NotificationPrefs = Constants.NotificationPrefs;
 
 const CHANGE_EVENT = 'change';
 const LEAVE_EVENT = 'leave';
@@ -37,6 +38,10 @@ class ChannelStoreClass extends EventEmitter {
         this.getByName = this.getByName.bind(this);
         this.pSetPostMode = this.pSetPostMode.bind(this);
         this.getPostMode = this.getPostMode.bind(this);
+        this.setUnreadCount = this.setUnreadCount.bind(this);
+        this.setUnreadCounts = this.setUnreadCounts.bind(this);
+        this.getUnreadCount = this.getUnreadCount.bind(this);
+        this.getUnreadCounts = this.getUnreadCounts.bind(this);
 
         this.currentId = null;
         this.postMode = this.POST_MODE_CHANNEL;
@@ -45,6 +50,7 @@ class ChannelStoreClass extends EventEmitter {
         this.moreChannels = {};
         this.moreChannels.loading = true;
         this.extraInfos = {};
+        this.unreadCounts = {};
     }
     get POST_MODE_CHANNEL() {
         return 1;
@@ -120,18 +126,18 @@ class ChannelStoreClass extends EventEmitter {
         this.currentId = id;
     }
     resetCounts(id) {
-        var cm = this.pGetChannelMembers();
+        const cm = this.channelMembers;
         for (var cmid in cm) {
             if (cm[cmid].channel_id === id) {
                 var c = this.get(id);
                 if (c) {
                     cm[cmid].msg_count = this.get(id).total_msg_count;
                     cm[cmid].mention_count = 0;
+                    this.setUnreadCount(id);
                 }
                 break;
             }
         }
-        this.pStoreChannelMembers(cm);
     }
     getCurrentId() {
         return this.currentId;
@@ -250,6 +256,38 @@ class ChannelStoreClass extends EventEmitter {
     getPostMode() {
         return this.postMode;
     }
+
+    setUnreadCount(id) {
+        const ch = this.get(id);
+        const chMember = this.getMember(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;
+        }
+
+        this.unreadCounts[id] = {msgs: chUnreadCount, mentions: chMentionCount};
+    }
+
+    setUnreadCounts() {
+        const channels = this.getAll();
+        channels.forEach((ch) => {
+            this.setUnreadCount(ch.id);
+        });
+    }
+
+    getUnreadCount(id) {
+        return this.unreadCounts[id] || {msgs: 0, mentions: 0};
+    }
+
+    getUnreadCounts() {
+        return this.unreadCounts;
+    }
 }
 
 var ChannelStore = new ChannelStoreClass();
@@ -281,6 +319,7 @@ ChannelStore.dispatchToken = AppDispatcher.register((payload) => {
         if (currentId) {
             ChannelStore.resetCounts(currentId);
         }
+        ChannelStore.setUnreadCounts();
         ChannelStore.emitChange();
         break;
 
@@ -291,6 +330,7 @@ ChannelStore.dispatchToken = AppDispatcher.register((payload) => {
         if (currentId) {
             ChannelStore.resetCounts(currentId);
         }
+        ChannelStore.setUnreadCount(action.channel.id);
         ChannelStore.emitChange();
         break;
 

web/react/utils/async_client.jsx

@@ -106,10 +106,15 @@ export function getChannel(id) {
     );
 }
 
-export function updateLastViewedAt() {
+export function updateLastViewedAt(id) {
-    const channelId = ChannelStore.getCurrentId();
+    let channelId;
+    if (id) {
+        channelId = id;
+    } else {
+        channelId = ChannelStore.getCurrentId();
+    }
 
-    if (channelId === null) {
+    if (channelId == null) {
         return;
     }
 
@@ -159,8 +164,13 @@ export function getMoreChannels(force) {
     }
 }
 
-export function getChannelExtraInfo() {
+export function getChannelExtraInfo(id) {
-    const channelId = ChannelStore.getCurrentId();
+    let channelId;
+    if (id) {
+        channelId = id;
+    } else {
+        channelId = ChannelStore.getCurrentId();
+    }
 
     if (channelId != null) {
         if (isCallInProgress('getChannelExtraInfo_' + channelId)) {