2 files changed, 52 insertions, 34 deletions

diff --git a/webapp/components/user_settings/user_settings_advanced.jsx b/webapp/components/user_settings/user_settings_advanced.jsx
index 7c496f57b..4fcdc9a41 100644
--- a/webapp/components/user_settings/user_settings_advanced.jsx
+++ b/webapp/components/user_settings/user_settings_advanced.jsx
@@ -1,11 +1,12 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import * as Client from 'utils/client.jsx';
+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 {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-intl';
 
@@ -68,25 +69,27 @@ class AdvancedSettingsDisplay extends React.Component {
         const preReleaseFeaturesKeys = Object.keys(PreReleaseFeatures);
         const advancedSettings = PreferenceStore.getCategory(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS);
         const settings = {
-            send_on_ctrl_enter: PreferenceStore.getPreference(
+            send_on_ctrl_enter: PreferenceStore.get(
                 Constants.Preferences.CATEGORY_ADVANCED_SETTINGS,
                 'send_on_ctrl_enter',
-                {value: 'false'}
-            ).value
+                'false'
+            )
         };
 
         let enabledFeatures = 0;
-        advancedSettings.forEach((setting) => {
-            preReleaseFeaturesKeys.forEach((key) => {
+        for (const [name, value] of advancedSettings) {
+            for (const key of preReleaseFeaturesKeys) {
                 const feature = PreReleaseFeatures[key];
-                if (setting.name === Constants.FeatureTogglePrefix + feature.label) {
-                    settings[setting.name] = setting.value;
-                    if (setting.value === 'true') {
-                        enabledFeatures++;
+
+                if (name === Constants.FeatureTogglePrefix + feature.label) {
+                    settings[name] = value;
+
+                    if (value === 'true') {
+                        enabledFeatures += 1;
                     }
                 }
-            });
-        });
+            }
+        }
 
         this.state = {preReleaseFeatures: PreReleaseFeatures, settings, preReleaseFeaturesKeys, enabledFeatures};
     }
@@ -124,20 +127,21 @@ class AdvancedSettingsDisplay extends React.Component {
 
     handleSubmit(settings) {
         const preferences = [];
+        const userId = UserStore.getCurrentId();
 
+        // this should be refactored so we can actually be certain about what type everything is
         (Array.isArray(settings) ? settings : [settings]).forEach((setting) => {
-            preferences.push(
-                PreferenceStore.setPreference(
-                    Constants.Preferences.CATEGORY_ADVANCED_SETTINGS,
-                    setting,
-                    String(this.state.settings[setting])
-                )
-            );
+            preferences.push({
+                user_id: userId,
+                category: Constants.Preferences.CATEGORY_ADVANCED_SETTINGS,
+                name: setting,
+                value: this.state.settings[setting]
+            });
         });
 
-        Client.savePreferences(preferences,
+        AsyncClient.savePreferences(
+            preferences,
             () => {
-                PreferenceStore.emitChange();
                 this.updateSection('');
             },
             (err) => {
diff --git a/webapp/components/user_settings/user_settings_display.jsx b/webapp/components/user_settings/user_settings_display.jsx
index 3299588f7..e56156049 100644
--- a/webapp/components/user_settings/user_settings_display.jsx
+++ b/webapp/components/user_settings/user_settings_display.jsx
@@ -6,24 +6,22 @@ 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 Constants from 'utils/constants.jsx';
+const Preferences = Constants.Preferences;
 
-import {savePreferences} from 'utils/client.jsx';
 import {FormattedMessage} from 'react-intl';
 
 function getDisplayStateFromStores() {
-    const militaryTime = PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'use_military_time', {value: 'false'});
-    const nameFormat = PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', {value: 'username'});
-    const selectedFont = PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'selected_font', {value: Constants.DEFAULT_FONT});
-
     return {
-        militaryTime: militaryTime.value,
-        nameFormat: nameFormat.value,
-        selectedFont: selectedFont.value
+        militaryTime: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'use_military_time', 'false'),
+        nameFormat: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'username'),
+        selectedFont: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'selected_font', Constants.DEFAULT_FONT)
     };
 }
 
@@ -44,13 +42,29 @@ export default class UserSettingsDisplay extends React.Component {
         this.state = getDisplayStateFromStores();
     }
     handleSubmit() {
-        const timePreference = PreferenceStore.setPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'use_military_time', this.state.militaryTime);
-        const namePreference = PreferenceStore.setPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', this.state.nameFormat);
-        const fontPreference = PreferenceStore.setPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'selected_font', this.state.selectedFont);
+        const userId = UserStore.getCurrentId();
+
+        const timePreference = {
+            user_id: userId,
+            category: Preferences.CATEGORY_DISPLAY_SETTINGS,
+            name: 'use_military_time',
+            value: this.state.militaryTime
+        };
+        const namePreference = {
+            user_id: userId,
+            category: Preferences.CATEGORY_DISPLAY_SETTINGS,
+            name: 'name_format',
+            value: this.state.nameFormat
+        };
+        const fontPreference = {
+            user_id: userId,
+            category: Preferences.CATEGORY_DISPLAY_SETTINGS,
+            name: 'selected_font',
+            value: this.state.selectedFont
+        };
 
-        savePreferences([timePreference, namePreference, fontPreference],
+        AsyncClient.savePreferences([timePreference, namePreference, fontPreference],
             () => {
-                PreferenceStore.emitChange();
                 this.updateSection('');
             },
             (err) => {