Granular settings

src/components/structures/BottomLeftMenu.js

@@ -21,7 +21,7 @@ import sdk from 'matrix-react-sdk';
 import dis from 'matrix-react-sdk/lib/dispatcher';
 import Velocity from 'velocity-vector';
 import 'velocity-vector/velocity.ui';
-import UserSettingsStore from 'matrix-react-sdk/lib/UserSettingsStore';
+import SettingsStore from "matrix-react-sdk/lib/settings/SettingsStore";
 
 const CALLOUT_ANIM_DURATION = 1000;
 

src/components/views/context_menus/MessageContextMenu.js

@@ -24,7 +24,7 @@ const sdk = require('matrix-react-sdk');
 import { _t } from 'matrix-react-sdk/lib/languageHandler';
 const Modal = require('matrix-react-sdk/lib/Modal');
 const Resend = require("matrix-react-sdk/lib/Resend");
-import * as UserSettingsStore from 'matrix-react-sdk/lib/UserSettingsStore';
+import SettingsStore from "matrix-react-sdk/lib/settings/SettingsStore";
 
 module.exports = React.createClass({
     displayName: 'MessageContextMenu',
@@ -67,7 +67,7 @@ module.exports = React.createClass({
         let canPin = room.currentState.mayClientSendStateEvent('m.room.pinned_events', cli);
 
         // HACK: Intentionally say we can't pin if the user doesn't want to use the functionality
-        if (!UserSettingsStore.isFeatureEnabled("feature_pinning")) canPin = false;
+        if (!SettingsStore.isFeatureEnabled("feature_pinning")) canPin = false;
 
         this.setState({canRedact, canPin});
     },

src/components/views/login/VectorLoginFooter.js

@@ -18,7 +18,7 @@ limitations under the License.
 
 var React = require('react');
 import { _t } from 'matrix-react-sdk/lib/languageHandler';
-import UserSettingsStore from 'matrix-react-sdk/lib/UserSettingsStore';
+import SettingsStore from 'matrix-react-sdk/lib/settings/SettingsStore';
 
 module.exports = React.createClass({
     displayName: 'VectorLoginFooter',
@@ -28,7 +28,7 @@ module.exports = React.createClass({
 
     render: function() {
         // FIXME: replace this with a proper Status skin
-        if (UserSettingsStore.getTheme() === 'status') return <div/>;
+        if (SettingsStore.getValue("theme") === 'status') return <div/>;
 
         return (
             <div className="mx_Login_links">

src/components/views/settings/Notifications.js

@@ -20,11 +20,12 @@ import sdk from 'matrix-react-sdk';
 import { _t, _tJsx } from 'matrix-react-sdk/lib/languageHandler';
 import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
 import UserSettingsStore from 'matrix-react-sdk/lib/UserSettingsStore';
+import SettingsStore, {SettingLevel} from "matrix-react-sdk/lib/settings/SettingsStore";
 import Modal from 'matrix-react-sdk/lib/Modal';
 import {
-    NotificationUtils, 
-    VectorPushRulesDefinitions, 
-    PushRuleVectorState, 
+    NotificationUtils,
+    VectorPushRulesDefinitions,
+    PushRuleVectorState,
     ContentRules
 } from '../../../notifications';
 
@@ -112,12 +113,33 @@ module.exports = React.createClass({
     },
 
     onEnableDesktopNotificationsChange: function(event) {
-        UserSettingsStore.setEnableNotifications(event.target.checked);
+        SettingsStore.setValue(
+            "notificationsEnabled", null,
+            SettingLevel.DEVICE,
+            event.target.checked,
+        ).finally(() => {
+            this.forceUpdate();
+        });
     },
 
     onEnableDesktopNotificationBodyChange: function(event) {
-        UserSettingsStore.setEnableNotificationBody(event.target.checked);
-        this.forceUpdate();
+        SettingsStore.setValue(
+            "notificationBodyEnabled", null,
+            SettingLevel.DEVICE,
+            event.target.checked,
+        ).finally(() => {
+            this.forceUpdate();
+        });
+    },
+
+    onEnableAudioNotificationsChange: function(event) {
+        SettingsStore.setValue(
+            "audioNotificationsEnabled", null,
+            SettingLevel.DEVICE,
+            event.target.checked,
+        ).finally(() => {
+            this.forceUpdate();
+        });
     },
 
     onEnableEmailNotificationsChange: function(address, event) {
@@ -433,7 +455,7 @@ module.exports = React.createClass({
                     needsUpdate.push( function(kind, rule) {
                         return cli.setPushRuleActions(
                             'global', kind, LEGACY_RULES[rule.rule_id], portLegacyActions(rule.actions)
-                        ).then(() => 
+                        ).then(() =>
                             cli.deletePushRule('global', kind, rule.rule_id)
                         ).catch( (e) => {
                             console.warn(`Error when porting legacy rule: ${e}`);
@@ -446,7 +468,7 @@ module.exports = React.createClass({
         if (needsUpdate.length > 0) {
             // If some of the rules need to be ported then wait for the porting
             // to happen and then fetch the rules again.
-            return Promise.all(needsUpdate).then(() => 
+            return Promise.all(needsUpdate).then(() =>
                 cli.getPushRules()
             );
         } else {
@@ -694,13 +716,13 @@ module.exports = React.createClass({
 
     render: function() {
         const self = this;
-        
+
         let spinner;
         if (this.state.phase === this.phases.LOADING) {
             const Loader = sdk.getComponent("elements.Spinner");
             spinner = <Loader />;
         }
-        
+
         let masterPushRuleDiv;
         if (this.state.masterPushRule) {
             masterPushRuleDiv = (
@@ -710,7 +732,7 @@ module.exports = React.createClass({
                             ref="enableNotifications"
                             type="checkbox"
                             checked={ !this.state.masterPushRule.enabled }
-                            onChange={ this.onEnableNotificationsChange } 
+                            onChange={ this.onEnableNotificationsChange }
                         />
                     </div>
                     <div className="mx_UserNotifSettings_labelCell">
@@ -824,7 +846,7 @@ module.exports = React.createClass({
                             <input id="enableDesktopNotifications"
                                 ref="enableDesktopNotifications"
                                 type="checkbox"
-                                checked={ UserSettingsStore.getEnableNotifications() }
+                                checked={ SettingsStore.getValue("notificationsEnabled") }
                                 onChange={ this.onEnableDesktopNotificationsChange } />
                         </div>
                         <div className="mx_UserNotifSettings_labelCell">
@@ -839,7 +861,7 @@ module.exports = React.createClass({
                             <input id="enableDesktopNotificationBody"
                                 ref="enableDesktopNotificationBody"
                                 type="checkbox"
-                                checked={ UserSettingsStore.getEnableNotificationBody() }
+                                checked={ SettingsStore.getValue("notificationBodyEnabled") }
                                 onChange={ this.onEnableDesktopNotificationBodyChange } />
                         </div>
                         <div className="mx_UserNotifSettings_labelCell">
@@ -854,11 +876,8 @@ module.exports = React.createClass({
                             <input id="enableDesktopAudioNotifications"
                                 ref="enableDesktopAudioNotifications"
                                 type="checkbox"
-                                checked={ UserSettingsStore.getEnableAudioNotifications() }
-                                onChange={ (e) => {
-                                    UserSettingsStore.setEnableAudioNotifications(e.target.checked);
-                                    this.forceUpdate();
-                                }} />
+                                checked={ SettingsStore.getValue("audioNotificationsEnabled") }
+                                onChange={ this.onEnableAudioNotificationsChange } />
                         </div>
                         <div className="mx_UserNotifSettings_labelCell">
                             <label htmlFor="enableDesktopAudioNotifications">

src/vector/index.js

@@ -67,7 +67,6 @@ sdk.loadSkin(require('../component-index'));
 var VectorConferenceHandler = require('../VectorConferenceHandler');
 import Promise from 'bluebird';
 var request = require('browser-request');
-import * as UserSettingsStore from 'matrix-react-sdk/lib/UserSettingsStore';
 import * as languageHandler from 'matrix-react-sdk/lib/languageHandler';
 // Also import _t directly so we can call it just `_t` as this is what gen-i18n.js expects
 import { _t } from 'matrix-react-sdk/lib/languageHandler';
@@ -78,6 +77,7 @@ import {parseQs, parseQsFromFragment} from './url_utils';
 import Platform from './platform';
 
 import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
+import SettingsStore from "matrix-react-sdk/lib/settings/SettingsStore";
 import Tinter from 'matrix-react-sdk/lib/Tinter';
 
 var lastLocationHashSet = null;
@@ -252,7 +252,7 @@ async function loadApp() {
     if (!preventRedirect) {
         if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
             // FIXME: ugly status hardcoding
-            if (UserSettingsStore.getTheme() === 'status') {
+            if (SettingsStore.getValue("theme") === 'status') {
                 window.location = "https://status.im/join-riot.html";
                 return;
             }
@@ -265,7 +265,7 @@ async function loadApp() {
         }
         else if (/Android/.test(navigator.userAgent)) {
             // FIXME: ugly status hardcoding
-            if (UserSettingsStore.getTheme() === 'status') {
+            if (SettingsStore.getValue("theme") === 'status') {
                 window.location = "https://status.im/join-riot.html";
                 return;
             }
@@ -369,7 +369,7 @@ async function loadApp() {
 }
 
 async function loadLanguage() {
-    const prefLang = UserSettingsStore.getLocalSetting('language');
+    const prefLang = SettingsStore.getValue("language");
     let langs = [];
 
     if (!prefLang) {