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/components/sidebar_header_dropdown.jsx

@@ -45,7 +45,6 @@ export default class SidebarHeaderDropdown extends React.Component {
         this.showGetTeamInviteLinkModal = this.showGetTeamInviteLinkModal.bind(this);
         this.showTeamMembersModal = this.showTeamMembersModal.bind(this);
         this.hideTeamMembersModal = this.hideTeamMembersModal.bind(this);
-        this.handleSwitchTeams = this.handleSwitchTeams.bind(this);
 
         this.onTeamChange = this.onTeamChange.bind(this);
         this.openAccountSettings = this.openAccountSettings.bind(this);
@@ -55,8 +54,8 @@ export default class SidebarHeaderDropdown extends React.Component {
         this.handleClick = this.handleClick.bind(this);
 
         this.state = {
-            teams: TeamStore.getAll(),
             teamMembers: TeamStore.getMyTeamMembers(),
+            teamListings: TeamStore.getTeamListings(),
             showAboutModal: false,
             showDropdown: false,
             showTeamMembersModal: false,
@@ -131,11 +130,6 @@ export default class SidebarHeaderDropdown extends React.Component {
         });
     }
 
-    handleSwitchTeams() {
-        // The actual switching of teams is handled by the react-router Link
-        this.setState({showDropdown: false});
-    }
-
     componentDidMount() {
         TeamStore.addChangeListener(this.onTeamChange);
         document.addEventListener('keydown', this.openAccountSettings);
@@ -143,8 +137,8 @@ export default class SidebarHeaderDropdown extends React.Component {
 
     onTeamChange() {
         this.setState({
-            teams: TeamStore.getAll(),
-            teamMembers: TeamStore.getMyTeamMembers()
+            teamMembers: TeamStore.getMyTeamMembers(),
+            teamListings: TeamStore.getTeamListings()
         });
     }
 
@@ -182,14 +176,14 @@ export default class SidebarHeaderDropdown extends React.Component {
 
     render() {
         const config = global.mm_config;
-        var teamLink = '';
-        var inviteLink = '';
-        var manageLink = '';
-        var sysAdminLink = '';
-        var currentUser = this.props.currentUser;
-        var isAdmin = false;
-        var isSystemAdmin = false;
-        var teamSettings = null;
+        const currentUser = this.props.currentUser;
+        let teamLink = '';
+        let inviteLink = '';
+        let manageLink = '';
+        let sysAdminLink = '';
+        let isAdmin = false;
+        let isSystemAdmin = false;
+        let teamSettings = null;
         let integrationsLink = null;
 
         if (!currentUser) {
@@ -322,6 +316,7 @@ export default class SidebarHeaderDropdown extends React.Component {
         }
 
         const teams = [];
+        let moreTeams = false;
 
         if (config.EnableTeamCreation === 'true') {
             teams.push(
@@ -340,6 +335,31 @@ export default class SidebarHeaderDropdown extends React.Component {
             );
         }
 
+        const isAlreadyMember = this.state.teamMembers.reduce((result, item) => {
+            result[item.team_id] = true;
+            return result;
+        }, {});
+
+        for (const id in this.state.teamListings) {
+            if (this.state.teamListings.hasOwnProperty(id) && !isAlreadyMember[id]) {
+                moreTeams = true;
+                break;
+            }
+        }
+
+        if (moreTeams) {
+            teams.push(
+                <li key='joinTeam_li'>
+                    <Link to='/select_team'>
+                        <FormattedMessage
+                            id='navbar_dropdown.join'
+                            defaultMessage='Join Another Team'
+                        />
+                    </Link>
+                </li>
+            );
+        }
+
         teams.push(
             <li key='leaveTeam_li'>
                 <a
@@ -354,39 +374,6 @@ export default class SidebarHeaderDropdown extends React.Component {
             </li>
         );
 
-        if (this.state.teamMembers && this.state.teamMembers.length > 1) {
-            teams.push(
-                <li
-                    key='teamDiv'
-                    className='divider'
-                />
-            );
-
-            for (var index in this.state.teamMembers) {
-                if (this.state.teamMembers.hasOwnProperty(index)) {
-                    var teamMember = this.state.teamMembers[index];
-                    var team = this.state.teams[teamMember.team_id];
-
-                    if (team.name !== this.props.teamName) {
-                        teams.push(
-                            <li key={'team_' + team.name}>
-                                <Link
-                                    to={'/' + team.name + '/channels/town-square'}
-                                    onClick={this.handleSwitchTeams}
-                                >
-                                    <FormattedMessage
-                                        id='navbar_dropdown.switchTo'
-                                        defaultMessage='Switch to '
-                                    />
-                                    {team.display_name}
-                                </Link>
-                            </li>
-                        );
-                    }
-                }
-            }
-        }
-
         let helpLink = null;
         if (config.HelpLink) {
             helpLink = (