1 files changed, 33 insertions, 122 deletions

diff --git a/web/react/components/sidebar_header.jsx b/web/react/components/sidebar_header.jsx
index af65b7e1d..fb79f8b1e 100644
--- a/web/react/components/sidebar_header.jsx
+++ b/web/react/components/sidebar_header.jsx
@@ -1,133 +1,26 @@
 // 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 NavbarDropdown = require('./navbar_dropdown.jsx');
 var UserStore = require('../stores/user_store.jsx');
-var TeamStore = require('../stores/team_store.jsx');
+import {config} from '../utils/config.js';
 
-var Constants = require('../utils/constants.jsx');
+export default class SidebarHeader extends React.Component {
+    constructor(props) {
+        super(props);
 
-function getStateFromStores() {
-    return {teams: UserStore.getTeams(), currentTeam: TeamStore.getCurrent()};
-}
-
-var NavbarDropdown = React.createClass({
-    handleLogoutClick: function(e) {
-        e.preventDefault();
-        client.logout();
-    },
-    blockToggle: false,
-    componentDidMount: function() {
-        UserStore.addTeamsChangeListener(this.onListenerChange);
-        TeamStore.addChangeListener(this.onListenerChange);
-
-        var self = this;
-        $(this.refs.dropdown.getDOMNode()).on('hide.bs.dropdown', function() {
-            self.blockToggle = true;
-            setTimeout(function() {
-                self.blockToggle = false;
-            }, 100);
-        });
-    },
-    componentWillUnmount: function() {
-        UserStore.removeTeamsChangeListener(this.onListenerChange);
-        TeamStore.removeChangeListener(this.onListenerChange);
-
-        $(this.refs.dropdown.getDOMNode()).off('hide.bs.dropdown');
-    },
-    onListenerChange: function() {
-        if (this.isMounted()) {
-            var newState = getStateFromStores();
-            if (!utils.areStatesEqual(newState, this.state)) {
-                this.setState(newState);
-            }
-        }
-    },
-    getInitialState: function() {
-        return getStateFromStores();
-    },
-    render: function() {
-        var teamLink = '';
-        var inviteLink = '';
-        var manageLink = '';
-        var currentUser = UserStore.getCurrentUser();
-        var isAdmin = false;
-        var teamSettings = null;
-
-        if (currentUser != null) {
-            isAdmin = currentUser.roles.indexOf('admin') > -1;
-
-            inviteLink = (<li> <a href='#' data-toggle='modal' data-target='#invite_member'>Invite New Member</a> </li>);
-
-            if (this.props.teamType === 'O') {
-                teamLink = (
-                    <li>
-                        <a href='#' data-toggle='modal' data-target='#get_link' data-title='Team Invite' data-value={utils.getWindowLocationOrigin() + '/signup_user_complete/?id=' + currentUser.team_id}>Get Team Invite Link</a>
-                    </li>
-                );
-            }
-        }
-
-        if (isAdmin) {
-            manageLink = (<li> <a href='#' data-toggle='modal' data-target='#team_members'>Manage Team</a> </li>);
-            teamSettings = (<li> <a href='#' data-toggle='modal' data-target='#team_settings'>Team Settings</a> </li>);
-        }
+        this.toggleDropdown = this.toggleDropdown.bind(this);
 
-        var teams = [];
-
-        teams.push(<li className='divider' key='div'></li>);
-        if (this.state.teams.length > 1 && this.state.currentTeam) {
-            var curTeamName = this.state.currentTeam.name;
-            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='newTeam_li'><a key='newTeam_a' target="_blank" href={utils.getWindowLocationOrigin() + '/signup_team' }>Create a New Team</a></li>);
-
-        return (
-            <ul className='nav navbar-nav navbar-right'>
-                <li ref='dropdown' className='dropdown'>
-                    <a href='#' className='dropdown-toggle' data-toggle='dropdown' role='button' aria-expanded='false'>
-                        <span className='dropdown__icon' dangerouslySetInnerHTML={{__html: Constants.MENU_ICON}} />
-                    </a>
-                    <ul className='dropdown-menu' role='menu'>
-                        <li><a href='#' data-toggle='modal' data-target='#user_settings'>Account Settings</a></li>
-                        {teamSettings}
-                        {inviteLink}
-                        {teamLink}
-                        {manageLink}
-                        <li><a href='#' onClick={this.handleLogoutClick}>Logout</a></li>
-                        {teams}
-                        <li className='divider'></li>
-                        <li><a target='_blank' href={config.HelpLink}>Help</a></li>
-                        <li><a target='_blank' href={config.ReportProblemLink}>Report a Problem</a></li>
-                    </ul>
-                </li>
-            </ul>
-        );
+        this.state = {};
     }
-});
-
-module.exports = React.createClass({
-    displayName: 'SidebarHeader',
-    getDefaultProps: function() {
-        return {
-            teamDisplayName: config.SiteName
-        };
-    },
-
-    toggleDropdown: function() {
+    toggleDropdown() {
         if (this.refs.dropdown.blockToggle) {
             this.refs.dropdown.blockToggle = false;
             return;
         }
         $('.team__header').find('.dropdown-toggle').dropdown('toggle');
-    },
-
-    render: function() {
+    }
+    render() {
         var me = UserStore.getCurrentUser();
         var profilePicture = null;
 
@@ -136,20 +29,38 @@ module.exports = React.createClass({
         }
 
         if (me.last_picture_update) {
-            profilePicture = (<img className='user__picture' src={'/api/v1/users/' + me.id + '/image?time=' + me.update_at} />);
+            profilePicture = (<img
+                                className='user__picture'
+                                src={'/api/v1/users/' + me.id + '/image?time=' + me.update_at}
+                            />);
         }
 
         return (
             <div className='team__header theme'>
-                <a href='#' onClick={this.toggleDropdown}>
+                <a
+                    href='#'
+                    onClick={this.toggleDropdown}
+                >
                     {profilePicture}
                     <div className='header__info'>
                         <div className='user__name'>{'@' + me.username}</div>
-                        <div className='team__name'>{this.props.teamDisplayName }</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>
         );
     }
-});
+}
+
+SidebarHeader.defaultProps = {
+    teamDisplayName: config.SiteName,
+    teamType: ''
+};
+SidebarHeader.propTypes = {
+    teamDisplayName: React.PropTypes.string,
+    teamType: React.PropTypes.string
+};