Move remaining actions over to use redux and v4 endpoints (#6720)

2017-06-26 08:16:57 -04:00
--- a/webapp/components/admin_console/system_users/system_users.jsx
+++ b/webapp/components/admin_console/system_users/system_users.jsx
@@ -16,7 +16,7 @@ import AnalyticsStore from 'stores/analytics_store.jsx';
 import TeamStore from 'stores/team_store.jsx';
 import UserStore from 'stores/user_store.jsx';

-import {getStandardAnalytics} from 'utils/async_client.jsx';
+import {getStandardAnalytics} from 'actions/admin_actions.jsx';
 import {Constants, StatTypes, UserSearchOptions} from 'utils/constants.jsx';
 import * as Utils from 'utils/utils.jsx';

--- a/webapp/components/admin_console/system_users/system_users_list.jsx
+++ b/webapp/components/admin_console/system_users/system_users_list.jsx
@@ -1,16 +1,19 @@
-import PropTypes from 'prop-types';
-
 // Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.

 import React from 'react';
+import PropTypes from 'prop-types';
 import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';

 import ManageTeamsModal from 'components/admin_console/manage_teams_modal/manage_teams_modal.jsx';
 import ResetPasswordModal from 'components/admin_console/reset_password_modal.jsx';
 import SearchableUserList from 'components/searchable_user_list/searchable_user_list.jsx';

-import {getUser} from 'utils/async_client.jsx';
+import store from 'stores/redux_store.jsx';
+const dispatch = store.dispatch;
+const getState = store.getState;
+
+import {getUser} from 'mattermost-redux/actions/users';
 import {Constants} from 'utils/constants.jsx';
 import * as Utils from 'utils/utils.jsx';

@@ -107,7 +110,7 @@ export default class SystemUsersList extends React.Component {
    }

    doPasswordResetSubmit(user) {
-        getUser(user.id);
+        getUser(user.id)(dispatch, getState);

        this.setState({
            showPasswordModal: false,
--- a/webapp/components/analytics/system_analytics.jsx
+++ b/webapp/components/analytics/system_analytics.jsx
@@ -8,7 +8,7 @@ import StatisticCount from './statistic_count.jsx';
 import AnalyticsStore from 'stores/analytics_store.jsx';

 import * as Utils from 'utils/utils.jsx';
-import * as AsyncClient from 'utils/async_client.jsx';
+import * as AdminActions from 'actions/admin_actions.jsx';
 import Constants from 'utils/constants.jsx';
 const StatTypes = Constants.StatTypes;

@@ -28,12 +28,12 @@ export default class SystemAnalytics extends React.Component {
    componentDidMount() {
        AnalyticsStore.addChangeListener(this.onChange);

-        AsyncClient.getStandardAnalytics();
-        AsyncClient.getPostsPerDayAnalytics();
-        AsyncClient.getUsersPerDayAnalytics();
+        AdminActions.getStandardAnalytics();
+        AdminActions.getPostsPerDayAnalytics();
+        AdminActions.getUsersPerDayAnalytics();

        if (global.window.mm_license.IsLicensed === 'true') {
-            AsyncClient.getAdvancedAnalytics();
+            AdminActions.getAdvancedAnalytics();
        }
    }

--- a/webapp/components/analytics/team_analytics/team_analytics.jsx
+++ b/webapp/components/analytics/team_analytics/team_analytics.jsx
@@ -11,7 +11,7 @@ import LoadingScreen from 'components/loading_screen.jsx';
 import AnalyticsStore from 'stores/analytics_store.jsx';
 import BrowserStore from 'stores/browser_store.jsx';

-import * as AsyncClient from 'utils/async_client.jsx';
+import * as AdminActions from 'actions/admin_actions.jsx';
 import {StatTypes} from 'utils/constants.jsx';

 import LineChart from 'components/analytics/line_chart.jsx';
@@ -71,10 +71,9 @@ export default class TeamAnalytics extends React.Component {
    }

    getData(id) {
-        AsyncClient.getStandardAnalytics(id);
-        AsyncClient.getPostsPerDayAnalytics(id);
-        AsyncClient.getUsersPerDayAnalytics(id);
-        AsyncClient.getRecentAndNewUsersAnalytics(id);
+        AdminActions.getStandardAnalytics(id);
+        AdminActions.getPostsPerDayAnalytics(id);
+        AdminActions.getUsersPerDayAnalytics(id);
    }

    componentWillUnmount() {
--- a/webapp/components/announcement_bar/announcement_bar.jsx
+++ b/webapp/components/announcement_bar/announcement_bar.jsx
@@ -9,7 +9,7 @@ import AnalyticsStore from 'stores/analytics_store.jsx';
 import ErrorStore from 'stores/error_store.jsx';
 import UserStore from 'stores/user_store.jsx';

-import * as AsyncClient from 'utils/async_client.jsx';
+import * as AdminActions from 'actions/admin_actions.jsx';
 import {ErrorBarTypes, StatTypes} from 'utils/constants.jsx';
 import {isLicenseExpiring, isLicenseExpired, isLicensePastGracePeriod, displayExpiryDate} from 'utils/license_utils.jsx';
 import * as Utils from 'utils/utils.jsx';
@@ -150,7 +150,7 @@ export default class AnnouncementBar extends React.PureComponent {
    onErrorChange() {
        const newState = this.getState();
        if (newState.message === ErrorBarTypes.LICENSE_EXPIRING && !this.state.totalUsers) {
-            AsyncClient.getStandardAnalytics();
+            AdminActions.getStandardAnalytics();
        }
        this.setState(newState);
    }
--- a/webapp/components/channel_view.jsx
+++ b/webapp/components/channel_view.jsx
@@ -25,11 +25,9 @@ export default class ChannelView extends React.Component {

        this.state = this.getStateFromStores(props);
    }
-    getStateFromStores(props) {
-        const channel = ChannelStore.getByName(props.params.channel);
-        const channelId = channel ? channel.id : '';
+    getStateFromStores() {
        return {
-            channelId
+            channelId: ChannelStore.getCurrentId()
        };
    }
    isStateValid() {
--- a/webapp/components/emoji/components/add_emoji.jsx
+++ b/webapp/components/emoji/components/add_emoji.jsx
@@ -1,11 +1,10 @@
-import PropTypes from 'prop-types';
-
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.

 import React from 'react';
+import PropTypes from 'prop-types';

-import * as AsyncClient from 'utils/async_client.jsx';
+import * as EmojiActions from 'actions/emoji_actions.jsx';
 import EmojiStore from 'stores/emoji_store.jsx';

 import BackstageHeader from 'components/backstage/components/backstage_header.jsx';
@@ -115,7 +114,7 @@ export default class AddEmoji extends React.Component {
            return;
        }

-        AsyncClient.addEmoji(
+        EmojiActions.addEmoji(
            emoji,
            this.state.image,
            () => {
--- a/webapp/components/emoji/components/emoji_list.jsx
+++ b/webapp/components/emoji/components/emoji_list.jsx
@@ -7,14 +7,12 @@ import LoadingScreen from 'components/loading_screen.jsx';
 import EmojiStore from 'stores/emoji_store.jsx';
 import UserStore from 'stores/user_store.jsx';

-import {loadEmoji} from 'actions/emoji_actions.jsx';
+import * as EmojiActions from 'actions/emoji_actions.jsx';

-import * as AsyncClient from 'utils/async_client.jsx';
 import * as Utils from 'utils/utils.jsx';

-import PropTypes from 'prop-types';
-
 import React from 'react';
+import PropTypes from 'prop-types';
 import {Link} from 'react-router';
 import {FormattedMessage} from 'react-intl';

@@ -38,7 +36,7 @@ export default class EmojiList extends React.Component {

        this.state = {
            emojis: EmojiStore.getCustomEmojiMap(),
-            loading: !EmojiStore.hasReceivedCustomEmojis(),
+            loading: true,
            filter: '',
            users: UserStore.getProfiles()
        };
@@ -49,7 +47,7 @@ export default class EmojiList extends React.Component {
        UserStore.addChangeListener(this.handleUserChange);

        if (window.mm_config.EnableCustomEmoji === 'true') {
-            loadEmoji();
+            EmojiActions.loadEmoji().then(() => this.setState({loading: false}));
        }

        this.updateTitle();
@@ -71,8 +69,7 @@ export default class EmojiList extends React.Component {

    handleEmojiChange() {
        this.setState({
-            emojis: EmojiStore.getCustomEmojiMap(),
-            loading: !EmojiStore.hasReceivedCustomEmojis()
+            emojis: EmojiStore.getCustomEmojiMap()
        });
    }

@@ -87,7 +84,7 @@ export default class EmojiList extends React.Component {
    }

    deleteEmoji(emoji) {
-        AsyncClient.deleteEmoji(emoji.id);
+        EmojiActions.deleteEmoji(emoji.id);
    }

    render() {
--- a/webapp/components/get_public_link_modal.jsx
+++ b/webapp/components/get_public_link_modal.jsx
@@ -3,7 +3,7 @@

 import React from 'react';

-import * as AsyncClient from 'utils/async_client.jsx';
+import {getPublicLink} from 'actions/file_actions.jsx';
 import Constants from 'utils/constants.jsx';
 import ModalStore from 'stores/modal_store.jsx';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
@@ -34,7 +34,7 @@ export default class GetPublicLinkModal extends React.Component {

    componentDidUpdate(prevProps, prevState) {
        if (this.state.show && !prevState.show) {
-            AsyncClient.getPublicLink(this.state.fileId, this.handlePublicLink);
+            getPublicLink(this.state.fileId, this.handlePublicLink);
        }
    }

--- a/webapp/components/login/login_controller.jsx
+++ b/webapp/components/login/login_controller.jsx
@@ -11,8 +11,7 @@ import {checkMfa, webLogin} from 'actions/user_actions.jsx';
 import BrowserStore from 'stores/browser_store.jsx';
 import UserStore from 'stores/user_store.jsx';

-import Client from 'client/web_client.jsx';
-import * as AsyncClient from 'utils/async_client.jsx';
+import {Client4} from 'mattermost-redux/client';
 import * as TextFormatting from 'utils/text_formatting.jsx';

 import * as Utils from 'utils/utils.jsx';
@@ -71,8 +70,6 @@ export default class LoginController extends React.Component {
        if (this.props.location.query.extra === Constants.SIGNIN_VERIFIED && this.props.location.query.email) {
            this.refs.password.focus();
        }
-
-        AsyncClient.checkVersion();
    }

    preSubmit(e) {
@@ -243,7 +240,7 @@ export default class LoginController extends React.Component {
            return (
                <div>
                    <img
-                        src={Client.getAdminRoute() + '/get_brand_image'}
+                        src={Client4.getBrandImageUrl(0)}
                    />
                    <p dangerouslySetInnerHTML={{__html: TextFormatting.formatText(text)}}/>
                </div>
@@ -493,7 +490,7 @@ export default class LoginController extends React.Component {
                <a
                    className='btn btn-custom-login gitlab'
                    key='gitlab'
-                    href={Client.getOAuthRoute() + '/gitlab/login' + this.props.location.search}
+                    href={Client4.getUrl() + '/oauth/gitlab/login' + this.props.location.search}
                >
                    <span>
                        <span className='icon'/>
@@ -513,7 +510,7 @@ export default class LoginController extends React.Component {
                <a
                    className='btn btn-custom-login google'
                    key='google'
-                    href={Client.getOAuthRoute() + '/google/login' + this.props.location.search}
+                    href={Client4.getUrl() + '/oauth/google/login' + this.props.location.search}
                >
                    <span>
                        <span className='icon'/>
@@ -533,7 +530,7 @@ export default class LoginController extends React.Component {
                <a
                    className='btn btn-custom-login office365'
                    key='office365'
-                    href={Client.getOAuthRoute() + '/office365/login' + this.props.location.search}
+                    href={Client4.getUrl() + '/oauth/office365/login' + this.props.location.search}
                >
                    <span>
                        <span className='icon'/>
--- a/webapp/components/password_reset_send_link.jsx
+++ b/webapp/components/password_reset_send_link.jsx
@@ -4,7 +4,7 @@
 import $ from 'jquery';
 import ReactDOM from 'react-dom';
 import * as Utils from 'utils/utils.jsx';
-import client from 'client/web_client.jsx';
+import {sendPasswordResetEmail} from 'actions/user_actions.jsx';

 import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';

@@ -45,7 +45,7 @@ class PasswordResetSendLink extends React.Component {
            error: ''
        });

-        client.sendPasswordReset(
+        sendPasswordResetEmail(
            email,
            () => {
                this.setState({
--- a/webapp/components/post_view/post_list.jsx
+++ b/webapp/components/post_view/post_list.jsx
@@ -40,7 +40,7 @@ export default class PostList extends React.PureComponent {
        /**
         * The channel the posts are in
         */
-        channel: PropTypes.object,
+        channel: PropTypes.object.isRequired,

        /**
         * The last time the channel was viewed, sets the new message separator
--- a/webapp/components/root.jsx
+++ b/webapp/components/root.jsx
@@ -3,7 +3,7 @@

 import * as GlobalActions from 'actions/global_actions.jsx';
 import LocalizationStore from 'stores/localization_store.jsx';
-import Client from 'client/web_client.jsx';
+import {Client4} from 'mattermost-redux/client';

 import {IntlProvider} from 'react-intl';

@@ -85,7 +85,7 @@ export default class Root extends React.Component {
    localizationChanged() {
        const locale = LocalizationStore.getLocale();

-        Client.setAcceptLanguage(locale);
+        Client4.setAcceptLanguage(locale);
        this.setState({locale, translations: LocalizationStore.getTranslations()});
    }

--- a/webapp/components/sidebar.jsx
+++ b/webapp/components/sidebar.jsx
@@ -18,7 +18,6 @@ import PreferenceStore from 'stores/preference_store.jsx';
 import ModalStore from 'stores/modal_store.jsx';

 import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
-import * as AsyncClient from 'utils/async_client.jsx';
 import {sortTeamsByDisplayName} from 'utils/team_utils.jsx';
 import * as Utils from 'utils/utils.jsx';
 import * as ChannelUtils from 'utils/channel_utils.jsx';
@@ -42,8 +41,12 @@ import favicon from 'images/favicon/favicon-16x16.png';
 import redFavicon from 'images/favicon/redfavicon-16x16.png';

 import store from 'stores/redux_store.jsx';
+const dispatch = store.dispatch;
+const getState = store.getState;
+
 import {getMyPreferences} from 'mattermost-redux/selectors/entities/preferences';
 import {getUsers} from 'mattermost-redux/selectors/entities/users';
+import {savePreferences} from 'mattermost-redux/actions/preferences';

 export default class Sidebar extends React.Component {
    constructor(props) {
@@ -381,13 +384,8 @@ export default class Sidebar extends React.Component {
                category = Constants.Preferences.CATEGORY_GROUP_CHANNEL_SHOW;
            }

-            AsyncClient.savePreference(
-                category,
-                id,
-                'false',
-                () => {
-                    this.isLeaving.set(channel.id, false);
-                },
+            const currentUserId = UserStore.getCurrentId();
+            savePreferences(currentUserId, [{user_id: currentUserId, category, name: id, value: 'false'}])(dispatch, getState).then(
                () => {
                    this.isLeaving.set(channel.id, false);
                }
--- a/webapp/components/signup/signup_controller.jsx
+++ b/webapp/components/signup/signup_controller.jsx
@@ -1,9 +1,8 @@
-import PropTypes from 'prop-types';
-
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.

 import React from 'react';
+import PropTypes from 'prop-types';

 import FormError from 'components/form_error.jsx';
 import LoadingScreen from 'components/loading_screen.jsx';
@@ -11,8 +10,7 @@ import LoadingScreen from 'components/loading_screen.jsx';
 import UserStore from 'stores/user_store.jsx';
 import BrowserStore from 'stores/browser_store.jsx';

-import * as AsyncClient from 'utils/async_client.jsx';
-import Client from 'client/web_client.jsx';
+import {Client4} from 'mattermost-redux/client';
 import * as GlobalActions from 'actions/global_actions.jsx';
 import {addUserToTeamFromInvite, getInviteInfo} from 'actions/team_actions.jsx';
 import {loadMe} from 'actions/user_actions.jsx';
@@ -62,7 +60,6 @@ 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;
@@ -160,7 +157,7 @@ export default class SignupController extends React.Component {
                <a
                    className='btn btn-custom-login btn--full gitlab'
                    key='gitlab'
-                    href={Client.getOAuthRoute() + '/gitlab/signup' + window.location.search}
+                    href={Client4.getOAuthRoute() + '/gitlab/signup' + window.location.search}
                >
                    <span>
                        <span className='icon'/>
@@ -180,7 +177,7 @@ export default class SignupController extends React.Component {
                <a
                    className='btn btn-custom-login btn--full google'
                    key='google'
-                    href={Client.getOAuthRoute() + '/google/signup' + window.location.search}
+                    href={Client4.getOAuthRoute() + '/google/signup' + window.location.search}
                >
                    <span>
                        <span className='icon'/>
@@ -200,7 +197,7 @@ export default class SignupController extends React.Component {
                <a
                    className='btn btn-custom-login btn--full office365'
                    key='office365'
-                    href={Client.getOAuthRoute() + '/office365/signup' + window.location.search}
+                    href={Client4.getOAuthRoute() + '/office365/signup' + window.location.search}
                >
                    <span>
                        <span className='icon'/>
--- a/webapp/components/suggestion/at_mention_provider.jsx
+++ b/webapp/components/suggestion/at_mention_provider.jsx
@@ -10,7 +10,7 @@ import {autocompleteUsersInChannel} from 'actions/user_actions.jsx';

 import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
 import * as Utils from 'utils/utils.jsx';
-import Client from 'client/web_client.jsx';
+import {Client4} from 'mattermost-redux/client';
 import {Constants, ActionTypes} from 'utils/constants.jsx';

 import React from 'react';
@@ -66,7 +66,7 @@ class AtMentionSuggestion extends Suggestion {
            icon = (
                <img
                    className='mention__image'
-                    src={Client.getUsersRoute() + '/' + user.id + '/image?time=' + user.last_picture_update}
+                    src={Client4.getUsersRoute() + '/' + user.id + '/image?time=' + user.last_picture_update}
                />
            );
        }
--- a/webapp/components/suggestion/command_provider.jsx
+++ b/webapp/components/suggestion/command_provider.jsx
@@ -3,10 +3,10 @@

 import React from 'react';

-import * as AsyncClient from 'utils/async_client.jsx';
-
 import Suggestion from './suggestion.jsx';

+import {getSuggestedCommands} from 'actions/integration_actions.jsx';
+
 class CommandSuggestion extends Suggestion {
    render() {
        const {item, isSelection} = this.props;
@@ -35,7 +35,7 @@ class CommandSuggestion extends Suggestion {
 export default class CommandProvider {
    handlePretextChanged(suggestionId, pretext) {
        if (pretext.startsWith('/')) {
-            AsyncClient.getSuggestedCommands(pretext.toLowerCase(), suggestionId, CommandSuggestion, pretext.toLowerCase());
+            getSuggestedCommands(pretext.toLowerCase(), suggestionId, CommandSuggestion, pretext.toLowerCase());
        }
    }
 }
--- a/webapp/components/suggestion/search_user_provider.jsx
+++ b/webapp/components/suggestion/search_user_provider.jsx
@@ -7,7 +7,7 @@ import Provider from './provider.jsx';
 import {autocompleteUsersInTeam} from 'actions/user_actions.jsx';

 import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
-import Client from 'client/web_client.jsx';
+import {Client4} from 'mattermost-redux/client';
 import * as Utils from 'utils/utils.jsx';
 import {ActionTypes} from 'utils/constants.jsx';

@@ -41,7 +41,7 @@ class SearchUserSuggestion extends Suggestion {
                <i className='fa fa fa-plus-square'/>
                <img
                    className='profile-img rounded'
-                    src={Client.getUsersRoute() + '/' + item.id + '/image?time=' + item.last_picture_update}
+                    src={Client4.getUsersRoute() + '/' + item.id + '/image?time=' + item.last_picture_update}
                />
                <div className='mention--align'>
                    <span>
--- a/webapp/components/suggestion/switch_channel_provider.jsx
+++ b/webapp/components/suggestion/switch_channel_provider.jsx
@@ -4,7 +4,6 @@
 import Suggestion from './suggestion.jsx';
 import Provider from './provider.jsx';

-import Client from 'client/web_client.jsx';
 import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
 import {Constants, ActionTypes} from 'utils/constants.jsx';
 import * as Utils from 'utils/utils.jsx';
@@ -47,7 +46,7 @@ class SwitchChannelSuggestion extends Suggestion {
                <div className='pull-left'>
                    <img
                        className='mention__image'
-                        src={Client.getUsersRoute() + '/' + channel.id + '/image?time=' + channel.last_picture_update}
+                        src={Client4.getUsersRoute() + '/' + channel.id + '/image?time=' + channel.last_picture_update}
                    />
                </div>
            );
--- a/webapp/components/tutorial/tutorial_intro_screens.jsx
+++ b/webapp/components/tutorial/tutorial_intro_screens.jsx
@@ -4,7 +4,7 @@
 import UserStore from 'stores/user_store.jsx';
 import TeamStore from 'stores/team_store.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
-import * as AsyncClient from 'utils/async_client.jsx';
+import {savePreference} from 'actions/user_actions.jsx';
 import * as GlobalActions from 'actions/global_actions.jsx';
 import {trackEvent} from 'actions/diagnostics_actions.jsx';

@@ -60,7 +60,7 @@ export default class TutorialIntroScreens extends React.Component {

        const step = PreferenceStore.getInt(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), 0);

-        AsyncClient.savePreference(
+        savePreference(
            Preferences.TUTORIAL_STEP,
            UserStore.getCurrentId(),
            (step + 1).toString()
@@ -81,7 +81,7 @@ export default class TutorialIntroScreens extends React.Component {
            break;
        }

-        AsyncClient.savePreference(
+        savePreference(
            Preferences.TUTORIAL_STEP,
            UserStore.getCurrentId(),
            '999'
--- a/webapp/components/tutorial/tutorial_tip.jsx
+++ b/webapp/components/tutorial/tutorial_tip.jsx
@@ -3,7 +3,7 @@

 import UserStore from 'stores/user_store.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
-import * as AsyncClient from 'utils/async_client.jsx';
+import {savePreference} from 'actions/user_actions.jsx';
 import {trackEvent} from 'actions/diagnostics_actions.jsx';

 import Constants from 'utils/constants.jsx';
@@ -39,7 +39,7 @@ export default class TutorialTip extends React.Component {
        if (!show && this.state.currentScreen >= this.props.screens.length - 1) {
            const step = PreferenceStore.getInt(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), 0);

-            AsyncClient.savePreference(
+            savePreference(
                Preferences.TUTORIAL_STEP,
                UserStore.getCurrentId(),
                (step + 1).toString()
@@ -91,7 +91,7 @@ export default class TutorialTip extends React.Component {
            trackEvent('tutorial', tag);
        }

-        AsyncClient.savePreference(
+        savePreference(
            Preferences.TUTORIAL_STEP,
            UserStore.getCurrentId(),
            '999'
--- a/webapp/components/user_profile.jsx
+++ b/webapp/components/user_profile.jsx
@@ -3,7 +3,7 @@

 import ProfilePopover from './profile_popover.jsx';
 import * as Utils from 'utils/utils.jsx';
-import Client from 'client/web_client.jsx';
+import {Client4} from 'mattermost-redux/client';

 import {OverlayTrigger} from 'react-bootstrap';

@@ -63,7 +63,7 @@ export default class UserProfile extends React.Component {

        if (this.props.user) {
            name = Utils.displayUsername(this.props.user.id);
-            profileImg = Client.getUsersRoute() + '/' + this.props.user.id + '/image?time=' + this.props.user.last_picture_update;
+            profileImg = Client4.getUsersRoute() + '/' + this.props.user.id + '/image?time=' + this.props.user.last_picture_update;
        }

        if (this.props.overwriteName) {
--- a/webapp/components/user_settings/email_notification_setting.jsx
+++ b/webapp/components/user_settings/email_notification_setting.jsx
@@ -1,11 +1,10 @@
-import PropTypes from 'prop-types';
-
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.

 import React from 'react';
+import PropTypes from 'prop-types';

-import {savePreference} from 'utils/async_client.jsx';
+import {savePreference} from 'actions/user_actions.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
 import {localizeMessage} from 'utils/utils.jsx';

--- a/webapp/components/user_settings/user_settings_advanced.jsx
+++ b/webapp/components/user_settings/user_settings_advanced.jsx
@@ -2,21 +2,21 @@
 // See License.txt for license information.

 import $ from 'jquery';
-import * as AsyncClient from 'utils/async_client.jsx';
 import SettingItemMin from '../setting_item_min.jsx';
 import SettingItemMax from '../setting_item_max.jsx';
-import Constants from 'utils/constants.jsx';
+
 import PreferenceStore from 'stores/preference_store.jsx';
 import UserStore from 'stores/user_store.jsx';
+
+import Constants from 'utils/constants.jsx';
+const PreReleaseFeatures = Constants.PRE_RELEASE_FEATURES;
 import * as Utils from 'utils/utils.jsx';

-import {FormattedMessage} from 'react-intl';
-
-const PreReleaseFeatures = Constants.PRE_RELEASE_FEATURES;
-
-import PropTypes from 'prop-types';
+import {savePreferences} from 'actions/user_actions.jsx';

 import React from 'react';
+import PropTypes from 'prop-types';
+import {FormattedMessage} from 'react-intl';

 export default class AdvancedSettingsDisplay extends React.Component {
    constructor(props) {
@@ -133,7 +133,7 @@ export default class AdvancedSettingsDisplay extends React.Component {
            });
        });

-        AsyncClient.savePreferences(
+        savePreferences(
            preferences,
            () => {
                this.updateSection('');
--- a/webapp/components/user_settings/user_settings_display.jsx
+++ b/webapp/components/user_settings/user_settings_display.jsx
@@ -7,11 +7,11 @@ import SettingItemMax from '../setting_item_max.jsx';
 import ManageLanguages from './manage_languages.jsx';
 import ThemeSetting from './user_settings_theme.jsx';

-import * as AsyncClient from 'utils/async_client.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
 import UserStore from 'stores/user_store.jsx';
 import * as Utils from 'utils/utils.jsx';
 import * as I18n from 'i18n/i18n.jsx';
+import {savePreferences} from 'actions/user_actions.jsx';

 import Constants from 'utils/constants.jsx';
 const Preferences = Constants.Preferences;
@@ -29,9 +29,8 @@ function getDisplayStateFromStores() {
    };
 }

-import PropTypes from 'prop-types';
-
 import React from 'react';
+import PropTypes from 'prop-types';

 export default class UserSettingsDisplay extends React.Component {
    constructor(props) {
@@ -92,7 +91,7 @@ export default class UserSettingsDisplay extends React.Component {
            value: this.state.collapseDisplay
        };

-        AsyncClient.savePreferences([timePreference, namePreference, fontPreference, channelDisplayModePreference, messageDisplayPreference, collapseDisplayPreference],
+        savePreferences([timePreference, namePreference, fontPreference, channelDisplayModePreference, messageDisplayPreference, collapseDisplayPreference],
            () => {
                this.updateSection('');
            },
--- a/webapp/components/user_settings/user_settings_general/user_settings_general.jsx
+++ b/webapp/components/user_settings/user_settings_general/user_settings_general.jsx
@@ -9,7 +9,7 @@ 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 {Client4} from 'mattermost-redux/client';
 import Constants from 'utils/constants.jsx';
 import * as Utils from 'utils/utils.jsx';

@@ -1141,7 +1141,7 @@ class UserSettingsGeneralTab extends React.Component {
                <SettingPicture
                    title={formatMessage(holders.profilePicture)}
                    submit={this.submitPicture}
-                    src={Client.getUsersRoute() + '/' + user.id + '/image?time=' + user.last_picture_update}
+                    src={Client4.getUsersRoute() + '/' + user.id + '/image?time=' + user.last_picture_update}
                    serverError={serverError}
                    clientError={clientError}
                    updateSection={(e) => {
--- a/webapp/components/webrtc/components/webrtc_notification.jsx
+++ b/webapp/components/webrtc/components/webrtc_notification.jsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.

-import Client from 'client/web_client.jsx';
+import {Client4} from 'mattermost-redux/client';
 import WebSocketClient from 'client/web_websocket_client.jsx';

 import UserStore from 'stores/user_store.jsx';
@@ -197,7 +197,7 @@ export default class WebrtcNotification extends React.Component {
        const user = this.state.userCalling;
        if (user) {
            const username = Utils.displayUsername(user.id);
-            const profileImgSrc = Client.getUsersRoute() + '/' + user.id + '/image?time=' + (user.last_picture_update || new Date().getTime());
+            const profileImgSrc = Client4.getUsersRoute() + '/' + user.id + '/image?time=' + (user.last_picture_update || new Date().getTime());
            const profileImg = (
                <img
                    className='user-popover__image'
--- a/webapp/components/webrtc/webrtc_controller.jsx
+++ b/webapp/components/webrtc/webrtc_controller.jsx
@@ -5,7 +5,7 @@ import UserStore from 'stores/user_store.jsx';
 import ChannelStore from 'stores/channel_store.jsx';
 import WebrtcStore from 'stores/webrtc_store.jsx';

-import Client from 'client/web_client.jsx';
+import {Client4} from 'mattermost-redux/client';
 import WebSocketClient from 'client/web_websocket_client.jsx';
 import Janus from 'janus';

@@ -84,14 +84,14 @@ export default class WebrtcController extends React.Component {

        const currentUser = UserStore.getCurrentUser();
        const remoteUser = UserStore.getProfile(props.userId);
-        const remoteUserImage = Client.getUsersRoute() + '/' + remoteUser.id + '/image?time=' + remoteUser.last_picture_update;
+        const remoteUserImage = Client4.getUsersRoute() + '/' + remoteUser.id + '/image?time=' + remoteUser.last_picture_update;

        this.state = {
            windowWidth: Utils.windowWidth(),
            windowHeight: Utils.windowHeight(),
            channelId: ChannelStore.getCurrentId(),
            currentUser,
-            currentUserImage: Client.getUsersRoute() + '/' + currentUser.id + '/image?time=' + currentUser.last_picture_update,
+            currentUserImage: Client4.getUsersRoute() + '/' + currentUser.id + '/image?time=' + currentUser.last_picture_update,
            remoteUserImage,
            localMediaLoaded: false,
            isPaused: false,
@@ -133,7 +133,7 @@ export default class WebrtcController extends React.Component {
            (nextProps.userId !== this.props.userId) ||
            (nextProps.isCaller !== this.props.isCaller)) {
            const remoteUser = UserStore.getProfile(nextProps.userId);
-            const remoteUserImage = Client.getUsersRoute() + '/' + remoteUser.id + '/image?time=' + remoteUser.last_picture_update;
+            const remoteUserImage = Client4.getUsersRoute() + '/' + remoteUser.id + '/image?time=' + remoteUser.last_picture_update;
            this.setState({
                error: null,
                remoteUserImage
--- a/webapp/components/youtube_video/youtube_video.jsx
+++ b/webapp/components/youtube_video/youtube_video.jsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.

-import WebClient from 'client/web_client.jsx';
+import {getYoutubeVideoInfo} from 'actions/integration_actions.jsx';
 import * as Utils from 'utils/utils.jsx';

 const ytRegex = /(?:http|https):\/\/(?:www\.|m\.)?(?:(?:youtube\.com\/(?:(?:v\/)|(?:(?:watch|embed\/watch)(?:\/|.*v=))|(?:embed\/)|(?:user\/[^/]+\/u\/[0-9]\/)))|(?:youtu\.be\/))([^#&?]*)/;
@@ -98,7 +98,7 @@ export default class YoutubeVideo extends React.PureComponent {
    componentDidMount() {
        const key = global.window.mm_config.GoogleDeveloperKey;
        if (key) {
-            WebClient.getYoutubeVideoInfo(key, this.state.videoId,
+            getYoutubeVideoInfo(key, this.state.videoId,
                this.handleReceivedMetadata, this.handleMetadataError);
        } else {
            this.loadWithoutKey();