Start moving webapp to Redux (#6140)

* Start moving webapp to Redux

* Fix localforage import

* Updates per feedback

* Feedback udpates and a few fixes

* Minor updates

* Fix statuses, config not loading properly, getMe sanitizing too much

* Fix preferences

* Fix user autocomplete

* Fix sessions and audits

* Fix error handling for all redux actions

* Use new directory structure for components and containers

* Refresh immediately on logout instead of after timeout

* Add fetch polyfill

webapp/components/user_settings/user_settings.jsx

@@ -4,8 +4,8 @@
 import UserStore from 'stores/user_store.jsx';
 import * as utils from 'utils/utils.jsx';
 import NotificationsTab from './user_settings_notifications.jsx';
-import SecurityTab from './user_settings_security.jsx';
-import GeneralTab from './user_settings_general.jsx';
+import SecurityTab from './user_settings_security';
+import GeneralTab from './user_settings_general';
 import DisplayTab from './user_settings_display.jsx';
 import AdvancedTab from './user_settings_advanced.jsx';
 

webapp/components/user_settings/user_settings_general/index.js

@@ -0,0 +1,24 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {getMe} from 'mattermost-redux/actions/users';
+
+import UserSettingsGeneralTab from './user_settings_general.jsx';
+
+function mapStateToProps(state, ownProps) {
+    return {
+        ...ownProps
+    };
+}
+
+function mapDispatchToProps(dispatch) {
+    return {
+        actions: bindActionCreators({
+            getMe
+        }, dispatch)
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(UserSettingsGeneralTab);

webapp/components/user_settings/user_settings_general/user_settings_general.jsx

@@ -2,16 +2,15 @@
 // See License.txt for license information.
 
 import $ from 'jquery';
-import SettingItemMin from '../setting_item_min.jsx';
-import SettingItemMax from '../setting_item_max.jsx';
-import SettingPicture from '../setting_picture.jsx';
+import SettingItemMin from 'components/setting_item_min.jsx';
+import SettingItemMax from 'components/setting_item_max.jsx';
+import SettingPicture from 'components/setting_picture.jsx';
 
 import UserStore from 'stores/user_store.jsx';
 import ErrorStore from 'stores/error_store.jsx';
 
 import Client from 'client/web_client.jsx';
 import Constants from 'utils/constants.jsx';
-import * as AsyncClient from 'utils/async_client.jsx';
 import * as Utils from 'utils/utils.jsx';
 
 import {intlShape, injectIntl, defineMessages, FormattedMessage, FormattedHTMLMessage, FormattedDate} from 'react-intl';
@@ -80,6 +79,19 @@ const holders = defineMessages({
 import React from 'react';
 
 class UserSettingsGeneralTab extends React.Component {
+    static propTypes = {
+        intl: intlShape.isRequired,
+        user: React.PropTypes.object.isRequired,
+        updateSection: React.PropTypes.func.isRequired,
+        updateTab: React.PropTypes.func.isRequired,
+        activeSection: React.PropTypes.string.isRequired,
+        closeModal: React.PropTypes.func.isRequired,
+        collapseModal: React.PropTypes.func.isRequired,
+        actions: React.PropTypes.shape({
+            getMe: React.PropTypes.func.isRequired
+        }).isRequired
+    }
+
     constructor(props) {
         super(props);
         this.submitActive = false;
@@ -205,7 +217,7 @@ class UserSettingsGeneralTab extends React.Component {
         updateUser(user, type,
             () => {
                 this.updateSection('');
-                AsyncClient.getMe();
+                this.props.actions.getMe();
                 const verificationEnabled = global.window.mm_config.SendEmailNotifications === 'true' && global.window.mm_config.RequireEmailVerification === 'true' && emailUpdated;
 
                 if (verificationEnabled) {
@@ -1194,14 +1206,4 @@ class UserSettingsGeneralTab extends React.Component {
     }
 }
 
-UserSettingsGeneralTab.propTypes = {
-    intl: intlShape.isRequired,
-    user: React.PropTypes.object.isRequired,
-    updateSection: React.PropTypes.func.isRequired,
-    updateTab: React.PropTypes.func.isRequired,
-    activeSection: React.PropTypes.string.isRequired,
-    closeModal: React.PropTypes.func.isRequired,
-    collapseModal: React.PropTypes.func.isRequired
-};
-
 export default injectIntl(UserSettingsGeneralTab);

webapp/components/user_settings/user_settings_security/index.js

@@ -0,0 +1,24 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {getMe} from 'mattermost-redux/actions/users';
+
+import SecurityTab from './user_settings_security.jsx';
+
+function mapStateToProps(state, ownProps) {
+    return {
+        ...ownProps
+    };
+}
+
+function mapDispatchToProps(dispatch) {
+    return {
+        actions: bindActionCreators({
+            getMe
+        }, dispatch)
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SecurityTab);

webapp/components/user_settings/user_settings_security/user_settings_security.jsx

@@ -1,15 +1,14 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import SettingItemMin from '../setting_item_min.jsx';
-import SettingItemMax from '../setting_item_max.jsx';
-import AccessHistoryModal from '../access_history_modal.jsx';
-import ActivityLogModal from '../activity_log_modal.jsx';
-import ToggleModalButton from '../toggle_modal_button.jsx';
+import SettingItemMin from 'components/setting_item_min.jsx';
+import SettingItemMax from 'components/setting_item_max.jsx';
+import AccessHistoryModal from 'components/access_history_modal';
+import ActivityLogModal from 'components/activity_log_modal';
+import ToggleModalButton from 'components/toggle_modal_button.jsx';
 
 import PreferenceStore from 'stores/preference_store.jsx';
 
-import * as AsyncClient from 'utils/async_client.jsx';
 import * as Utils from 'utils/utils.jsx';
 import Constants from 'utils/constants.jsx';
 
@@ -23,6 +22,19 @@ import {browserHistory, Link} from 'react-router/es6';
 import icon50 from 'images/icon50x50.png';
 
 export default class SecurityTab extends React.Component {
+    static propTypes = {
+        user: React.PropTypes.object,
+        activeSection: React.PropTypes.string,
+        updateSection: React.PropTypes.func,
+        updateTab: React.PropTypes.func,
+        closeModal: React.PropTypes.func.isRequired,
+        collapseModal: React.PropTypes.func.isRequired,
+        setEnforceFocus: React.PropTypes.func.isRequired,
+        actions: React.PropTypes.shape({
+            getMe: React.PropTypes.func.isRequired
+        }).isRequired
+    }
+
     constructor(props) {
         super(props);
 
@@ -98,7 +110,7 @@ export default class SecurityTab extends React.Component {
             newPassword,
             () => {
                 this.props.updateSection('');
-                AsyncClient.getMe();
+                this.props.actions.getMe();
                 this.setState(this.getDefaultState());
             },
             (err) => {
@@ -1022,12 +1034,3 @@ SecurityTab.defaultProps = {
     user: {},
     activeSection: ''
 };
-SecurityTab.propTypes = {
-    user: React.PropTypes.object,
-    activeSection: React.PropTypes.string,
-    updateSection: React.PropTypes.func,
-    updateTab: React.PropTypes.func,
-    closeModal: React.PropTypes.func.isRequired,
-    collapseModal: React.PropTypes.func.isRequired,
-    setEnforceFocus: React.PropTypes.func.isRequired
-};