PLT-4167 Team Sidebar (#4569)

* PLT-4167 Team Sidebar

* Address feedback from PM

* change route from my_members to members

* bug fixes

* Updating styles for teams sidebar (#4681)

* Added PM changes

* Fix corner cases

* Addressing feedback

* use two different endpoints

* Bug fixes

* Rename model and client functions, using preferences to store last team and channel viewed

* Fix mobile notification count and closing the team sidebar

* unit test, fixed bad merge and retrieve from cached when available

* bug fixes

* use id for last channel in preferences, query optimization

* Updating multi team css (#4830)

webapp/actions/global_actions.jsx

@@ -43,6 +43,7 @@ export function emitChannelClickEvent(channel) {
         );
     }
     function switchToChannel(chan) {
+        const channelMember = ChannelStore.getMyMember(chan.id);
         const getMyChannelMembersPromise = AsyncClient.getChannelMember(chan.id, UserStore.getCurrentId());
 
         getMyChannelMembersPromise.then(() => {
@@ -56,6 +57,9 @@ export function emitChannelClickEvent(channel) {
             type: ActionTypes.CLICK_CHANNEL,
             name: chan.name,
             id: chan.id,
+            team_id: chan.team_id,
+            total_msg_count: chan.total_msg_count,
+            channelMember,
             prev: ChannelStore.getCurrentId()
         });
     }
@@ -443,7 +447,7 @@ export function viewLoggedIn() {
     PostStore.clearPendingPosts();
 }
 
-var lastTimeTypingSent = 0;
+let lastTimeTypingSent = 0;
 export function emitLocalUserTypingEvent(channelId, parentId) {
     const t = Date.now();
     if ((t - lastTimeTypingSent) > Constants.UPDATE_TYPING_MS) {
@@ -534,3 +538,35 @@ export function emitBrowserFocus(focus) {
         focus
     });
 }
+
+export function redirectUserToDefaultTeam() {
+    const teams = TeamStore.getAll();
+    const teamMembers = TeamStore.getMyTeamMembers();
+    let teamId = PreferenceStore.get('last', 'team');
+
+    if (!teams[teamId] && teamMembers.length > 0) {
+        let myTeams = [];
+        for (const index in teamMembers) {
+            if (teamMembers.hasOwnProperty(index)) {
+                const teamMember = teamMembers[index];
+                myTeams.push(teams[teamMember.team_id]);
+            }
+        }
+
+        if (myTeams.length > 0) {
+            myTeams = myTeams.sort((a, b) => a.display_name.localeCompare(b.display_name));
+            teamId = myTeams[0].id;
+        }
+    }
+
+    if (teams[teamId]) {
+        const channelId = PreferenceStore.get(teamId, 'channel');
+        let channel = ChannelStore.getChannelById(channelId);
+        if (!channel) {
+            channel = 'town-square';
+        }
+        browserHistory.push(`/${teams[teamId].name}/channels/${channel}`);
+    } else {
+        browserHistory.push('/select_team');
+    }
+}

webapp/actions/post_actions.jsx

@@ -18,23 +18,30 @@ const ActionTypes = Constants.ActionTypes;
 const Preferences = Constants.Preferences;
 
 export function handleNewPost(post, msg) {
+    const teamId = TeamStore.getCurrentId();
+
     if (ChannelStore.getCurrentId() === post.channel_id) {
         if (window.isActive) {
             AsyncClient.updateLastViewedAt(null, false);
         } else {
             AsyncClient.getChannel(post.channel_id);
         }
-    } else if (msg && (TeamStore.getCurrentId() === msg.data.team_id || msg.data.channel_type === Constants.DM_CHANNEL)) {
+    } else if (msg && (teamId === msg.data.team_id || msg.data.channel_type === Constants.DM_CHANNEL)) {
         if (Client.teamId) {
             AsyncClient.getChannel(post.channel_id);
         }
     }
 
-    var websocketMessageProps = null;
+    let websocketMessageProps = null;
     if (msg) {
         websocketMessageProps = msg.data;
     }
 
+    const myTeams = TeamStore.getMyTeamMembers();
+    if (msg.data.team_id !== teamId && myTeams.filter((m) => m.team_id === msg.data.team_id).length) {
+        AsyncClient.getMyTeamsUnread(teamId);
+    }
+
     if (post.root_id && PostStore.getPost(post.channel_id, post.root_id) == null) {
         Client.getPost(
             post.channel_id,

webapp/actions/websocket_actions.jsx

@@ -6,6 +6,7 @@ import $ from 'jquery';
 import UserStore from 'stores/user_store.jsx';
 import TeamStore from 'stores/team_store.jsx';
 import PostStore from 'stores/post_store.jsx';
+import PreferenceStore from 'stores/preference_store.jsx';
 import ChannelStore from 'stores/channel_store.jsx';
 import BrowserStore from 'stores/browser_store.jsx';
 import ErrorStore from 'stores/error_store.jsx';
@@ -122,6 +123,10 @@ function handleEvent(msg) {
         handleLeaveTeamEvent(msg);
         break;
 
+    case SocketEvents.UPDATE_TEAM:
+        handleUpdateTeamEvent(msg);
+        break;
+
     case SocketEvents.USER_ADDED:
         handleUserAddedEvent(msg);
         break;
@@ -229,21 +234,37 @@ function handleNewUserEvent(msg) {
     AsyncClient.getUser(msg.data.user_id);
     AsyncClient.getChannelStats();
     loadProfilesAndTeamMembersForDMSidebar();
+
+    if (msg.data.user_id === UserStore.getCurrentId()) {
+        AsyncClient.getMyTeamMembers();
+    }
 }
 
 function handleLeaveTeamEvent(msg) {
     if (UserStore.getCurrentId() === msg.data.user_id) {
         TeamStore.removeMyTeamMember(msg.data.team_id);
 
-        // if they are on the team being removed redirect them to the root
+        // if they are on the team being removed redirect them to default team
         if (TeamStore.getCurrentId() === msg.data.team_id) {
             TeamStore.setCurrentId('');
             Client.setTeamId('');
-            browserHistory.push('/');
+            PreferenceStore.deletePreference({
+                category: 'last',
+                name: 'team',
+                value: msg.data.team_id
+            });
+            GlobalActions.redirectUserToDefaultTeam();
         }
+    } else {
+        UserStore.removeProfileFromTeam(msg.data.team_id, msg.data.user_id);
+        TeamStore.removeMemberInTeam(msg.data.team_id, msg.data.user_id);
     }
 }
 
+function handleUpdateTeamEvent(msg) {
+    TeamStore.updateTeam(msg.data.team);
+}
+
 function handleDirectAddedEvent(msg) {
     AsyncClient.getChannel(msg.broadcast.channel_id);
     loadProfilesAndTeamMembersForDMSidebar();