PLT-4430 improve slow channel switching (#4331)

* PLT-4430 improve slow channel switching

* Update client side unit tests

* Convert getChannelsUnread to getMyChannelMembers and address other feedback

* Pull channel members on websocket reconnect

9 files changed, 83 insertions, 31 deletions

diff --git a/webapp/actions/global_actions.jsx b/webapp/actions/global_actions.jsx
index 23ff5a295..123c1c392 100644
--- a/webapp/actions/global_actions.jsx
+++ b/webapp/actions/global_actions.jsx
@@ -42,8 +42,6 @@ export function emitChannelClickEvent(channel) {
         );
     }
     function switchToChannel(chan) {
-        AsyncClient.getChannels(true);
-        AsyncClient.getMoreChannels(true);
         AsyncClient.getChannelStats(chan.id);
         AsyncClient.updateLastViewedAt(chan.id);
         loadPosts(chan.id);
@@ -436,10 +434,6 @@ export function loadDefaultLocale() {
 }
 
 export function viewLoggedIn() {
-    AsyncClient.getChannels();
-    AsyncClient.getMoreChannels();
-    AsyncClient.getChannelStats();
-
     // Clear pending posts (shouldn't have pending posts if we are loading)
     PostStore.clearPendingPosts();
 }
diff --git a/webapp/actions/post_actions.jsx b/webapp/actions/post_actions.jsx
index 462576021..1a2056a2e 100644
--- a/webapp/actions/post_actions.jsx
+++ b/webapp/actions/post_actions.jsx
@@ -120,7 +120,7 @@ export function setUnreadPost(channelId, postId) {
         member.msg_count = channel.total_msg_count - unreadPosts;
         member.mention_count = 0;
         ChannelStore.storeMyChannelMember(member);
-        ChannelStore.setUnreadCount(channelId);
+        ChannelStore.setUnreadCountByChannel(channelId);
         AsyncClient.setLastViewedAt(lastViewed, channelId);
     }
 
diff --git a/webapp/actions/websocket_actions.jsx b/webapp/actions/websocket_actions.jsx
index c3a3010b0..e58bded0d 100644
--- a/webapp/actions/websocket_actions.jsx
+++ b/webapp/actions/websocket_actions.jsx
@@ -76,6 +76,7 @@ function handleFirstConnect() {
 function handleReconnect() {
     if (Client.teamId) {
         AsyncClient.getChannels();
+        AsyncClient.getMyChannelMembers();
         loadPosts(ChannelStore.getCurrentId());
     }
 
diff --git a/webapp/client/client.jsx b/webapp/client/client.jsx
index 596242e41..fd091fd69 100644
--- a/webapp/client/client.jsx
+++ b/webapp/client/client.jsx
@@ -1357,6 +1357,15 @@ export default class Client {
             end(this.handleResponse.bind(this, 'getChannelCounts', success, error));
     }
 
+    getMyChannelMembers(success, error) {
+        request.
+        get(`${this.getChannelsRoute()}/members`).
+        set(this.defaultHeaders).
+        type('application/json').
+        accept('application/json').
+        end(this.handleResponse.bind(this, 'getMyChannelMembers', success, error));
+    }
+
     getChannelStats(channelId, success, error) {
         request.
             get(`${this.getChannelNeededRoute(channelId)}/stats`).
diff --git a/webapp/routes/route_team.jsx b/webapp/routes/route_team.jsx
index e63be5a5e..608052a58 100644
--- a/webapp/routes/route_team.jsx
+++ b/webapp/routes/route_team.jsx
@@ -75,10 +75,11 @@ function preNeedsTeam(nextState, replace, callback) {
         (data) => {
             AppDispatcher.handleServerAction({
                 type: ActionTypes.RECEIVED_CHANNELS,
-                channels: data.channels,
-                members: data.members
+                channels: data
             });
 
+            AsyncClient.getMyChannelMembers();
+
             d1.resolve();
         },
         (err) => {
diff --git a/webapp/stores/channel_store.jsx b/webapp/stores/channel_store.jsx
index 20e7c966f..2ca01fc6e 100644
--- a/webapp/stores/channel_store.jsx
+++ b/webapp/stores/channel_store.jsx
@@ -156,7 +156,7 @@ class ChannelStoreClass extends EventEmitter {
                 if (c) {
                     cm[cmid].msg_count = this.get(id).total_msg_count;
                     cm[cmid].mention_count = 0;
-                    this.setUnreadCount(id);
+                    this.setUnreadCountByChannel(id);
                 }
                 break;
             }
@@ -250,6 +250,12 @@ class ChannelStoreClass extends EventEmitter {
         this.myChannelMembers = channelMembers;
     }
 
+    storeMyChannelMembersList(channelMembers) {
+        channelMembers.forEach((m) => {
+            this.myChannelMembers[m.channel_id] = m;
+        });
+    }
+
     getMyMembers() {
         return this.myChannelMembers;
     }
@@ -278,7 +284,13 @@ class ChannelStoreClass extends EventEmitter {
         return this.postMode;
     }
 
-    setUnreadCount(id) {
+    setUnreadCountsByMembers(members) {
+        members.forEach((m) => {
+            this.setUnreadCountByChannel(m.channel_id);
+        });
+    }
+
+    setUnreadCountByChannel(id) {
         const ch = this.get(id);
         const chMember = this.getMyMember(id);
 
@@ -292,13 +304,6 @@ class ChannelStoreClass extends EventEmitter {
         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};
     }
@@ -362,12 +367,6 @@ ChannelStore.dispatchToken = AppDispatcher.register((payload) => {
 
     case ActionTypes.RECEIVED_CHANNELS:
         ChannelStore.storeChannels(action.channels);
-        ChannelStore.storeMyChannelMembers(action.members);
-        currentId = ChannelStore.getCurrentId();
-        if (currentId && window.isActive) {
-            ChannelStore.resetCounts(currentId);
-        }
-        ChannelStore.setUnreadCounts();
         ChannelStore.emitChange();
         break;
 
@@ -380,10 +379,18 @@ ChannelStore.dispatchToken = AppDispatcher.register((payload) => {
         if (currentId && window.isActive) {
             ChannelStore.resetCounts(currentId);
         }
-        ChannelStore.setUnreadCount(action.channel.id);
+        ChannelStore.setUnreadCountByChannel(action.channel.id);
         ChannelStore.emitChange();
         break;
 
+    case ActionTypes.RECEIVED_MY_CHANNEL_MEMBERS:
+        ChannelStore.storeMyChannelMembersList(action.members);
+        currentId = ChannelStore.getCurrentId();
+        if (currentId && window.isActive) {
+            ChannelStore.resetCounts(currentId);
+        }
+        ChannelStore.setUnreadCountsByMembers(action.members);
+        break;
     case ActionTypes.RECEIVED_MORE_CHANNELS:
         ChannelStore.storeMoreChannels(action.channels);
         ChannelStore.emitMoreChange();
diff --git a/webapp/tests/client_channel.test.jsx b/webapp/tests/client_channel.test.jsx
index 92145f6e1..b7fa57dc8 100644
--- a/webapp/tests/client_channel.test.jsx
+++ b/webapp/tests/client_channel.test.jsx
@@ -232,7 +232,7 @@ describe('Client.Channels', function() {
         TestHelper.initBasic(() => {
             TestHelper.basicClient().getChannels(
                 function(data) {
-                    assert.equal(data.channels.length, 3);
+                    assert.equal(data.length, 3);
                     done();
                 },
                 function(err) {
@@ -261,7 +261,7 @@ describe('Client.Channels', function() {
         TestHelper.initBasic(() => {
             TestHelper.basicClient().getMoreChannels(
                 function(data) {
-                    assert.equal(data.channels.length, 0);
+                    assert.equal(data.length, 0);
                     done();
                 },
                 function(err) {
@@ -285,6 +285,20 @@ describe('Client.Channels', function() {
         });
     });
 
+    it('getMyChannelMembers', function(done) {
+        TestHelper.initBasic(() => {
+            TestHelper.basicClient().getMyChannelMembers(
+                function(data) {
+                    assert.equal(data.length > 0, true);
+                    done();
+                },
+                function(err) {
+                    done(new Error(err.message));
+                }
+            );
+        });
+    });
+
     it('getChannelStats', function(done) {
         TestHelper.initBasic(() => {
             TestHelper.basicClient().getChannelStats(
diff --git a/webapp/utils/async_client.jsx b/webapp/utils/async_client.jsx
index ee9d1a4f0..67100ea3f 100644
--- a/webapp/utils/async_client.jsx
+++ b/webapp/utils/async_client.jsx
@@ -80,8 +80,7 @@ export function getChannels(doVersionCheck) {
 
             AppDispatcher.handleServerAction({
                 type: ActionTypes.RECEIVED_CHANNELS,
-                channels: data.channels,
-                members: data.members
+                channels: data
             });
         },
         (err) => {
@@ -115,6 +114,33 @@ export function getChannel(id) {
     );
 }
 
+export function getMyChannelMembers(doVersionCheck) {
+    if (isCallInProgress('getMyChannelMembers')) {
+        return;
+    }
+
+    callTracker.getMyChannelMembers = utils.getTimestamp();
+
+    Client.getMyChannelMembers(
+        (data) => {
+            callTracker.getMyChannelMembers = 0;
+
+            if (doVersionCheck) {
+                checkVersion();
+            }
+
+            AppDispatcher.handleServerAction({
+                type: ActionTypes.RECEIVED_MY_CHANNEL_MEMBERS,
+                members: data
+            });
+        },
+        (err) => {
+            callTracker.getChannelsUnread = 0;
+            dispatchError(err, 'getMyChannelMembers');
+        }
+    );
+}
+
 export function updateLastViewedAt(id, active) {
     let channelId;
     if (id) {
@@ -205,8 +231,7 @@ export function getMoreChannels(force) {
 
                 AppDispatcher.handleServerAction({
                     type: ActionTypes.RECEIVED_MORE_CHANNELS,
-                    channels: data.channels,
-                    members: data.members
+                    channels: data
                 });
             },
             (err) => {
diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx
index f87b36fc8..6ea8d040e 100644
--- a/webapp/utils/constants.jsx
+++ b/webapp/utils/constants.jsx
@@ -73,6 +73,7 @@ export const ActionTypes = keyMirror({
     RECEIVED_CHANNEL: null,
     RECEIVED_MORE_CHANNELS: null,
     RECEIVED_CHANNEL_STATS: null,
+    RECEIVED_MY_CHANNEL_MEMBERS: null,
 
     FOCUS_POST: null,
     RECEIVED_POSTS: null,