PLT 6416 Add StatusDropdown to profile picture in top left (#6327) (#6418)

* PLT-6416 the profile picture is always shown in the top left (#6327)

* PLT-6416 Add status icon to profile picture in left sidebar (#6327)

* PLT-6416 Add StatusDropdown to profile picture in top left (#6327)

* Fixing theme stuff for status picker

* PLT-6416 Automatically close status dropdown after selection (#6327)

* PLT-6416 Avoid render status dropdown in sidebar if isMobile (#6327)

* PLT-6416 Change icon for status change to caret-down  (#6327)

* PLT-6416 Update visibility of status dropdown after window size (#6327)

* PLT-6416 Refactor status dropdown for better mouse usability (#6327)

* PLT-6416 Change status dropdown to the redux way (#6327)

* PLT-6416 Fix header style of admin sidebar (#6327)

1 files changed, 35 insertions, 28 deletions

diff --git a/webapp/components/sidebar_header.jsx b/webapp/components/sidebar_header.jsx
index 493864a6f..51885d152 100644
--- a/webapp/components/sidebar_header.jsx
+++ b/webapp/components/sidebar_header.jsx
@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 
-import Client from 'client/web_client.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
 import * as Utils from 'utils/utils.jsx';
 
@@ -14,57 +13,67 @@ import {Tooltip, OverlayTrigger} from 'react-bootstrap';
 
 import {Preferences, TutorialSteps, Constants} from 'utils/constants.jsx';
 import {createMenuTip} from 'components/tutorial/tutorial_tip.jsx';
+import StatusDropdown from 'components/status_dropdown/index.jsx';
 
 export default class SidebarHeader extends React.Component {
     constructor(props) {
         super(props);
 
-        this.toggleDropdown = this.toggleDropdown.bind(this);
-        this.onPreferenceChange = this.onPreferenceChange.bind(this);
-
         this.state = this.getStateFromStores();
     }
 
     componentDidMount() {
         PreferenceStore.addChangeListener(this.onPreferenceChange);
+        window.addEventListener('resize', this.handleResize);
     }
 
     componentWillUnmount() {
         PreferenceStore.removeChangeListener(this.onPreferenceChange);
+        window.removeEventListener('resize', this.handleResize);
+    }
+
+    handleResize = () => {
+        const isMobile = Utils.isMobile();
+        this.setState({isMobile});
     }
 
-    getStateFromStores() {
+    getPreferences = () => {
+        if (!this.props.currentUser) {
+            return {};
+        }
         const tutorialStep = PreferenceStore.getInt(Preferences.TUTORIAL_STEP, this.props.currentUser.id, 999);
+        const showTutorialTip = tutorialStep === TutorialSteps.MENU_POPOVER && !Utils.isMobile();
 
-        return {showTutorialTip: tutorialStep === TutorialSteps.MENU_POPOVER && !Utils.isMobile()};
+        return {showTutorialTip};
     }
 
-    onPreferenceChange() {
-        this.setState(this.getStateFromStores());
+    getStateFromStores = () => {
+        const preferences = this.getPreferences();
+        const isMobile = Utils.isMobile();
+        return {...preferences, isMobile};
     }
 
-    toggleDropdown(e) {
+    onPreferenceChange = () => {
+        this.setState(this.getPreferences());
+    }
+
+    toggleDropdown = (e) => {
         e.preventDefault();
 
         this.refs.dropdown.toggleDropdown();
     }
 
-    render() {
-        var me = this.props.currentUser;
-        var profilePicture = null;
-
-        if (!me) {
+    renderStatusDropdown = () => {
+        if (this.state.isMobile) {
             return null;
         }
+        return (
+            <StatusDropdown/>
+        );
+    }
 
-        if (me.last_picture_update) {
-            profilePicture = (
-                <img
-                    className='user__picture'
-                    src={Client.getUsersRoute() + '/' + me.id + '/image?time=' + me.last_picture_update}
-                />
-            );
-        }
+    render() {
+        const statusDropdown = this.renderStatusDropdown();
 
         let tutorialTip = null;
         if (this.state.showTutorialTip) {
@@ -93,12 +102,9 @@ export default class SidebarHeader extends React.Component {
         return (
             <div className='team__header theme'>
                 {tutorialTip}
-                <div>
-                    {profilePicture}
-                    <div className='header__info'>
-                        <div className='user__name'>{'@' + me.username}</div>
-                        {teamNameWithToolTip}
-                    </div>
+                <div className='header__info'>
+                    <div className='user__name'>{'@' + this.props.currentUser.username}</div>
+                    {teamNameWithToolTip}
                 </div>
                 <SidebarHeaderDropdown
                     ref='dropdown'
@@ -107,6 +113,7 @@ export default class SidebarHeader extends React.Component {
                     teamName={this.props.teamName}
                     currentUser={this.props.currentUser}
                 />
+                {statusDropdown}
             </div>
         );
     }