Fix team switch (#4851)

* Fix team switch

* Fix channel switching by using BrowserStore

* Fixes plt-5076 and plt-5068

* Updating styles for Teams sidebar (#4875)

2 files changed, 53 insertions, 19 deletions

diff --git a/webapp/components/team_sidebar/components/team_button.jsx b/webapp/components/team_sidebar/components/team_button.jsx
index 0033ae25a..203e1de00 100644
--- a/webapp/components/team_sidebar/components/team_button.jsx
+++ b/webapp/components/team_sidebar/components/team_button.jsx
@@ -7,6 +7,9 @@ import React from 'react';
 import {Link} from 'react-router/es6';
 import {Tooltip, OverlayTrigger} from 'react-bootstrap';
 
+import {isMobile} from 'utils/utils.jsx';
+import {isMobileApp} from 'utils/user_agent.jsx';
+
 export default class TeamButton extends React.Component {
     constructor(props) {
         super(props);
@@ -20,6 +23,7 @@ export default class TeamButton extends React.Component {
 
     render() {
         let teamClass = this.props.active ? 'active' : '';
+        const btnClass = this.props.btnClass;
         const disabled = this.props.disabled ? 'team-disabled' : '';
         const handleClick = (this.props.active || this.props.disabled) ? this.handleDisabled : null;
         let badge;
@@ -34,6 +38,44 @@ export default class TeamButton extends React.Component {
             }
         }
 
+        let btn;
+        let content = this.props.content;
+        if (!content) {
+            content = (
+                <div className='team-btn__initials'>
+                    {this.props.displayName.substring(0, 2)}
+                    <div className='team-btn__content'>
+                        {this.props.displayName}
+                    </div>
+                </div>
+            );
+        }
+        if (!isMobile() && !isMobileApp()) {
+            btn = (
+                <OverlayTrigger
+                    delayShow={Constants.OVERLAY_TIME_DELAY}
+                    placement={this.props.placement}
+                    overlay={
+                        <Tooltip id={`tooltip-${this.props.url}`}>
+                            {this.props.displayName}
+                        </Tooltip>
+                    }
+                >
+                    <div className={'team-btn ' + btnClass}>
+                        {badge}
+                        {content}
+                    </div>
+                </OverlayTrigger>
+            );
+        } else {
+            btn = (
+                <div className={'team-btn ' + btnClass}>
+                    {badge}
+                    {content}
+                </div>
+            );
+        }
+
         return (
             <div
                 className={`team-container ${teamClass}`}
@@ -43,20 +85,7 @@ export default class TeamButton extends React.Component {
                     to={this.props.url}
                     onClick={handleClick}
                 >
-                    <OverlayTrigger
-                        delayShow={Constants.OVERLAY_TIME_DELAY}
-                        placement={this.props.placement}
-                        overlay={
-                            <Tooltip id={`tooltip-${this.props.url}`}>
-                                {this.props.tip}
-                            </Tooltip>
-                        }
-                    >
-                        <div className='team-btn'>
-                            {badge}
-                            {this.props.contents}
-                        </div>
-                    </OverlayTrigger>
+                    {btn}
                 </Link>
             </div>
         );
@@ -64,6 +93,7 @@ export default class TeamButton extends React.Component {
 }
 
 TeamButton.defaultProps = {
+    btnClass: '',
     tip: '',
     placement: 'right',
     active: false,
@@ -73,9 +103,11 @@ TeamButton.defaultProps = {
 };
 
 TeamButton.propTypes = {
+    btnClass: React.PropTypes.string,
     url: React.PropTypes.string.isRequired,
-    contents: React.PropTypes.node.isRequired,
-    tip: React.PropTypes.node,
+    displayName: React.PropTypes.string,
+    content: React.PropTypes.node,
+    tip: React.PropTypes.node.isRequired,
     active: React.PropTypes.bool,
     disabled: React.PropTypes.bool,
     unread: React.PropTypes.bool,
diff --git a/webapp/components/team_sidebar/team_sidebar_controller.jsx b/webapp/components/team_sidebar/team_sidebar_controller.jsx
index f005afeb3..24cd48d39 100644
--- a/webapp/components/team_sidebar/team_sidebar_controller.jsx
+++ b/webapp/components/team_sidebar/team_sidebar_controller.jsx
@@ -121,7 +121,7 @@ export default class TeamSidebar extends React.Component {
                     url={`/${team.name}`}
                     tip={team.display_name}
                     active={team.id === this.state.currentTeamId}
-                    contents={team.display_name.substring(0, 1).toUpperCase()}
+                    displayName={team.display_name}
                     unread={team.unread}
                     mentions={team.mentions}
                 />
@@ -131,6 +131,7 @@ export default class TeamSidebar extends React.Component {
         if (moreTeams) {
             teams.push(
                 <TeamButton
+                    btnClass='team-btn__add'
                     key='more_teams'
                     url='/select_team'
                     tip={
@@ -139,12 +140,13 @@ export default class TeamSidebar extends React.Component {
                             defaultMessage='Other teams you can join.'
                         />
                     }
-                    contents={<i className='fa fa-plus'/>}
+                    content={<i className='fa fa-plus'/>}
                 />
             );
         } else if (global.window.mm_config.EnableTeamCreation === 'true' || isSystemAdmin) {
             teams.push(
                 <TeamButton
+                    btnClass='team-btn__add'
                     key='more_teams'
                     url='/create_team'
                     tip={
@@ -153,7 +155,7 @@ export default class TeamSidebar extends React.Component {
                             defaultMessage='Create a New Team'
                         />
                     }
-                    contents={<i className='fa fa-plus'/>}
+                    content={<i className='fa fa-plus'/>}
                 />
             );
         }