Merge pull request #332 from nickago/MM-1720

MM-1720 Switch teams menu no longer display the team you are currently on

web/react/components/sidebar_header.jsx

@@ -1,15 +1,15 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-
 var utils = require('../utils/utils.jsx');
 var client = require('../utils/client.jsx');
 var UserStore = require('../stores/user_store.jsx');
+var TeamStore = require('../stores/team_store.jsx');
 
 var Constants = require('../utils/constants.jsx');
 
 function getStateFromStores() {
-    return { teams: UserStore.getTeams() };
+    return {teams: UserStore.getTeams(), currentTeam: TeamStore.getCurrent()};
 }
 
 var NavbarDropdown = React.createClass({
@@ -19,20 +19,24 @@ var NavbarDropdown = React.createClass({
     },
     blockToggle: false,
     componentDidMount: function() {
-        UserStore.addTeamsChangeListener(this._onChange);
+        UserStore.addTeamsChangeListener(this.onListenerChange);
+        TeamStore.addChangeListener(this.onListenerChange);
 
         var self = this;
-        $(this.refs.dropdown.getDOMNode()).on('hide.bs.dropdown', function(e) {
+        $(this.refs.dropdown.getDOMNode()).on('hide.bs.dropdown', function() {
             self.blockToggle = true;
-            setTimeout(function(){self.blockToggle = false;}, 100);
+            setTimeout(function() {
+                self.blockToggle = false;
+            }, 100);
         });
     },
     componentWillUnmount: function() {
-        UserStore.removeTeamsChangeListener(this._onChange);
+        UserStore.removeTeamsChangeListener(this.onListenerChange);
+        TeamStore.removeChangeListener(this.onListenerChange);
 
         $(this.refs.dropdown.getDOMNode()).off('hide.bs.dropdown');
     },
-    _onChange: function() {
+    onListenerChange: function() {
         if (this.isMounted()) {
             var newState = getStateFromStores();
             if (!utils.areStatesEqual(newState, this.state)) {
@@ -44,62 +48,65 @@ var NavbarDropdown = React.createClass({
         return getStateFromStores();
     },
     render: function() {
-        var team_link = "";
+        var teamLink = '';
-        var invite_link = "";
+        var inviteLink = '';
-        var manage_link = "";
+        var manageLink = '';
-        var rename_link = "";
+        var renameLink = '';
         var currentUser = UserStore.getCurrentUser();
         var isAdmin = false;
+        var teamSettings = null;
 
         if (currentUser != null) {
-            isAdmin = currentUser.roles.indexOf("admin") > -1;
+            isAdmin = currentUser.roles.indexOf('admin') > -1;
 
-            invite_link = ( <li> <a href="#" data-toggle="modal" data-target="#invite_member">Invite New Member</a> </li>);
+            inviteLink = (<li> <a href='#' data-toggle='modal' data-target='#invite_member'>Invite New Member</a> </li>);
 
-            if (this.props.teamType == "O") {
+            if (this.props.teamType === 'O') {
-                team_link = (
+                teamLink = (
                     <li>
-                        <a href="#" data-toggle="modal" data-target="#get_link" data-title="Team Invite" data-value={location.origin+"/signup_user_complete/?id="+currentUser.team_id}>Get Team Invite Link</a>
+                        <a href='#' data-toggle='modal' data-target='#get_link' data-title='Team Invite' data-value={location.origin + '/signup_user_complete/?id=' + currentUser.team_id}>Get Team Invite Link</a>
                     </li>
                 );
             }
         }
 
         if (isAdmin) {
-            manage_link = ( <li> <a href="#" data-toggle="modal" data-target="#team_members">Manage Team</a> </li>);
+            manageLink = (<li> <a href='#' data-toggle='modal' data-target='#team_members'>Manage Team</a> </li>);
-            rename_link = ( <li> <a href="#" data-toggle="modal" data-target="#rename_team_link">Rename</a> </li>);
+            renameLink = (<li> <a href='#' data-toggle='modal' data-target='#rename_team_link'>Rename</a> </li>);
+            teamSettings = (<li> <a href='#' data-toggle='modal' data-target='#team_settings'>Team Settings</a> </li>);
         }
 
         var teams = [];
 
-        teams.push(<li className="divider" key="div"></li>);
+        teams.push(<li className='divider' key='div'></li>);
-        if (this.state.teams.length > 1) {
+        if (this.state.teams.length > 1 && this.state.currentTeam) {
-            for (var i = 0; i < this.state.teams.length; i++) {
+            var curTeamName = this.state.currentTeam.name;
-                var teamName = this.state.teams[i];
+            this.state.teams.forEach(function(teamName) {
-
+                if (teamName !== curTeamName) {
-                teams.push(<li key={ teamName }><a href={utils.getWindowLocationOrigin() + "/" + teamName }>Switch to { teamName }</a></li>);
+                    teams.push(<li key={teamName}><a href={utils.getWindowLocationOrigin() + '/' + teamName}>Switch to {teamName}</a></li>);
-            }
+                }
+            });
         }
-        teams.push(<li><a href={utils.getWindowLocationOrigin() + "/signup_team" }>Create a New Team</a></li>);
+        teams.push(<li><a href={utils.getWindowLocationOrigin() + '/signup_team'}>Create a New Team</a></li>);
 
         return (
-            <ul className="nav navbar-nav navbar-right">
+            <ul className='nav navbar-nav navbar-right'>
-                <li ref="dropdown" className="dropdown">
+                <li ref='dropdown' className='dropdown'>
-                    <a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
+                    <a href='#' className='dropdown-toggle' data-toggle='dropdown' role='button' aria-expanded='false'>
-                        <span className="dropdown__icon" dangerouslySetInnerHTML={{__html: Constants.MENU_ICON }} />
+                        <span className='dropdown__icon' dangerouslySetInnerHTML={{__html: Constants.MENU_ICON}} />
                     </a>
-                    <ul className="dropdown-menu" role="menu">
+                    <ul className='dropdown-menu' role='menu'>
-                        <li><a href="#" data-toggle="modal" data-target="#user_settings1">Account Settings</a></li>
+                        <li><a href='#' data-toggle='modal' data-target='#user_settings1'>Account Settings</a></li>
-                        { isAdmin ? <li><a href="#" data-toggle="modal" data-target="#team_settings">Team Settings</a></li> : null }
+                        {teamSettings}
-                        { invite_link }
+                        {inviteLink}
-                        { team_link }
+                        {teamLink}
-                        { manage_link }
+                        {manageLink}
-                        { rename_link }
+                        {renameLink}
-                        <li><a href="#" onClick={this.handleLogoutClick}>Logout</a></li>
+                        <li><a href='#' onClick={this.handleLogoutClick}>Logout</a></li>
-                        { teams }
+                        {teams}
-                        <li className="divider"></li>
+                        <li className='divider'></li>
-                        <li><a target="_blank" href={config.HelpLink}>Help</a></li>
+                        <li><a target='_blank' href={config.HelpLink}>Help</a></li>
-                        <li><a target="_blank" href={config.ReportProblemLink}>Report a Problem</a></li>
+                        <li><a target='_blank' href={config.ReportProblemLink}>Report a Problem</a></li>
                     </ul>
                 </li>
             </ul>
@@ -109,14 +116,13 @@ var NavbarDropdown = React.createClass({
 
 module.exports = React.createClass({
     displayName: 'SidebarHeader',
-
     getDefaultProps: function() {
         return {
             teamDisplayName: config.SiteName
         };
     },
 
-    toggleDropdown: function(e) {
+    toggleDropdown: function() {
         if (this.refs.dropdown.blockToggle) {
             this.refs.dropdown.blockToggle = false;
             return;
@@ -126,25 +132,26 @@ module.exports = React.createClass({
 
     render: function() {
         var me = UserStore.getCurrentUser();
+        var profilePicture = null;
 
         if (!me) {
             return null;
         }
 
+        if (me.last_picture_update) {
+            profilePicture = (<img className='user__picture' src={'/api/v1/users/' + me.id + '/image?time=' + me.update_at} />);
+        }
+
         return (
-            <div className="team__header theme">
+            <div className='team__header theme'>
-                <a href="#" onClick={this.toggleDropdown}>
+                <a href='#' onClick={this.toggleDropdown}>
-                    { me.last_picture_update ?
+                    {profilePicture}
-                    <img className="user__picture" src={"/api/v1/users/" + me.id + "/image?time=" + me.update_at} />
+                    <div className='header__info'>
-                    :
+                        <div className='user__name'>{'@' + me.username}</div>
-                    null
+                        <div className='team__name'>{this.props.teamDisplayName }</div>
-                    }
-                    <div className="header__info">
-                        <div className="user__name">{ '@' + me.username}</div>
-                        <div className="team__name">{ this.props.teamDisplayName }</div>
                     </div>
                 </a>
-                <NavbarDropdown ref="dropdown" teamType={this.props.teamType} />
+                <NavbarDropdown ref='dropdown' teamType={this.props.teamType} />
             </div>
         );
     }