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)
2016-12-22 15:20:36 -03:00
--- a/webapp/actions/global_actions.jsx
+++ b/webapp/actions/global_actions.jsx
@@ -53,6 +53,8 @@ export function emitChannelClickEvent(channel) {
            trackPage();
        });

+        BrowserStore.setGlobalItem(chan.team_id, chan.id);
+
        AppDispatcher.handleViewAction({
            type: ActionTypes.CLICK_CHANNEL,
            name: chan.name,
@@ -542,7 +544,11 @@ export function emitBrowserFocus(focus) {
 export function redirectUserToDefaultTeam() {
    const teams = TeamStore.getAll();
    const teamMembers = TeamStore.getMyTeamMembers();
-    let teamId = PreferenceStore.get('last', 'team');
+    let teamId = BrowserStore.getGlobalItem('team');
+
+    function redirect(teamName, channelName) {
+        browserHistory.push(`/${teamName}/channels/${channelName}`);
+    }

    if (!teams[teamId] && teamMembers.length > 0) {
        let myTeams = [];
@@ -560,12 +566,24 @@ export function redirectUserToDefaultTeam() {
    }

    if (teams[teamId]) {
-        const channelId = PreferenceStore.get(teamId, 'channel');
-        let channel = ChannelStore.getChannelById(channelId);
-        if (!channel) {
-            channel = 'town-square';
+        const channelId = BrowserStore.getGlobalItem(teamId);
+        const channel = ChannelStore.getChannelById(channelId);
+        if (channel) {
+            redirect(teams[teamId].name, channel);
+        } else if (channelId) {
+            Client.setTeamId(teamId);
+            Client.getChannel(
+                channelId,
+                (data) => {
+                    redirect(teams[teamId].name, data.channel.name);
+                },
+                () => {
+                    redirect(teams[teamId].name, 'town-square');
+                }
+            );
+        } else {
+            redirect(teams[teamId].name, 'town-square');
        }
-        browserHistory.push(`/${teams[teamId].name}/channels/${channel}`);
    } else {
        browserHistory.push('/select_team');
    }
--- a/webapp/actions/websocket_actions.jsx
+++ b/webapp/actions/websocket_actions.jsx
@@ -6,7 +6,6 @@ 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';
@@ -224,11 +223,7 @@ function handleLeaveTeamEvent(msg) {
        if (TeamStore.getCurrentId() === msg.data.team_id) {
            TeamStore.setCurrentId('');
            Client.setTeamId('');
-            PreferenceStore.deletePreference({
-                category: 'last',
-                name: 'team',
-                value: msg.data.team_id
-            });
+            BrowserStore.removeGlobalItem(msg.data.team_id);
            GlobalActions.redirectUserToDefaultTeam();
        }
    } else {
--- a/webapp/components/login/login_controller.jsx
+++ b/webapp/components/login/login_controller.jsx
@@ -6,6 +6,7 @@ import ErrorBar from 'components/error_bar.jsx';
 import FormError from 'components/form_error.jsx';

 import * as GlobalActions from 'actions/global_actions.jsx';
+import BrowserStore from 'stores/browser_store.jsx';
 import UserStore from 'stores/user_store.jsx';

 import Client from 'client/web_client.jsx';
@@ -52,7 +53,7 @@ export default class LoginController extends React.Component {

    componentDidMount() {
        document.title = global.window.mm_config.SiteName;
-
+        BrowserStore.removeGlobalItem('team');
        if (UserStore.getCurrentUser()) {
            GlobalActions.redirectUserToDefaultTeam();
        }
--- a/webapp/components/signup/signup_controller.jsx
+++ b/webapp/components/signup/signup_controller.jsx
@@ -59,7 +59,7 @@ export default class SignupController extends React.Component {

    componentDidMount() {
        AsyncClient.checkVersion();
-
+        BrowserStore.removeGlobalItem('team');
        if (this.props.location.query) {
            const hash = this.props.location.query.h;
            const data = this.props.location.query.d;
--- 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,
--- 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'/>}
                />
            );
        }
--- a/webapp/routes/route_team.jsx
+++ b/webapp/routes/route_team.jsx
@@ -14,7 +14,7 @@ const ActionTypes = Constants.ActionTypes;
 import * as AsyncClient from 'utils/async_client.jsx';
 import Client from 'client/web_client.jsx';
 import ChannelStore from 'stores/channel_store.jsx';
-import PreferenceStore from 'stores/preference_store.jsx';
+import BrowserStore from 'stores/browser_store.jsx';

 import emojiRoute from 'routes/route_emoji.jsx';
 import integrationsRoute from 'routes/route_integrations.jsx';
@@ -70,45 +70,46 @@ function preNeedsTeam(nextState, replace, callback) {
        browserHistory.push('/');
        return;
    }
-    if (nextState.location.pathname.indexOf('/channels/') > -1) {
-        GlobalActions.emitCloseRightHandSide();

-        TeamStore.saveMyTeam(team);
-        TeamStore.emitChange();
+    TeamStore.saveMyTeam(team);
+    BrowserStore.setGlobalItem('team', team.id);
+    TeamStore.emitChange();
+    GlobalActions.emitCloseRightHandSide();
+
+    if (nextState.location.pathname.indexOf('/channels/') > -1 ||
+        nextState.location.pathname.indexOf('/pl/') > -1) {
        loadProfilesAndTeamMembersForDMSidebar();
        AsyncClient.getMyTeamsUnread();
        AsyncClient.getMyChannelMembers();
-
-        const d1 = $.Deferred(); //eslint-disable-line new-cap
-
-        Client.getChannels(
-            (data) => {
-                AppDispatcher.handleServerAction({
-                    type: ActionTypes.RECEIVED_CHANNELS,
-                    channels: data
-                });
-
-                loadStatusesForChannelAndSidebar();
-
-                d1.resolve();
-            },
-            (err) => {
-                AsyncClient.dispatchError(err, 'getChannels');
-                d1.resolve();
-            }
-        );
-
-        $.when(d1).done(() => {
-            callback();
-        });
-    } else {
-        callback();
    }
+
+    const d1 = $.Deferred(); //eslint-disable-line new-cap
+
+    Client.getChannels(
+        (data) => {
+            AppDispatcher.handleServerAction({
+                type: ActionTypes.RECEIVED_CHANNELS,
+                channels: data
+            });
+
+            loadStatusesForChannelAndSidebar();
+
+            d1.resolve();
+        },
+        (err) => {
+            AsyncClient.dispatchError(err, 'getChannels');
+            d1.resolve();
+        }
+    );
+
+    $.when(d1).done(() => {
+        callback();
+    });
 }

 function selectLastChannel(nextState, replace, callback) {
    const team = TeamStore.getByName(nextState.params.team);
-    const channelId = PreferenceStore.get(team.id, 'channel');
+    const channelId = BrowserStore.getGlobalItem(team.id);
    const channel = ChannelStore.getChannelById(channelId);

    let channelName = 'town-square';
--- a/webapp/sass/layout/_team-sidebar.scss
+++ b/webapp/sass/layout/_team-sidebar.scss
@@ -23,13 +23,29 @@
                .team-btn {
                    @include border-radius(2px);
                    background-color: alpha-color($black, .3);
+                    border: 1px solid transparent;
                    display: table-cell;
+                    font-size: 12px;
                    font-weight: bold;
-                    height: 35px;
+                    padding: 4px 5px;
                    position: relative;
                    text-align: center;
-                    vertical-align: middle;
-                    width: 35px;
+                    vertical-align: top;
+                    width: 40px;
+
+                    .team-btn__initials {
+                        text-align: left;
+                    }
+
+                    .team-btn__content {
+                        bottom: 4px;
+                        font-size: 8.5px;
+                        font-weight: normal;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        width: 31px;
+                    }

                    .badge {
                        font-size: 10px;
@@ -37,12 +53,17 @@
                        right: -6px;
                        top: -3px;
                    }
+
+                    &.team-btn__add {
+                        height: 39px;
+                        vertical-align: middle;
+                    }
                }

                &.active {
                    .team-btn {
                        background-color: transparent;
-                        border: 1px solid $white;
+                        border-color: $white;
                    }
                }