Merge pull request #3634 from matrix-org/dbkr/theme_use_watcher

Use a settings watcher to set the theme

src/components/structures/MatrixChat.js

@@ -274,6 +274,7 @@ export default createReactClass({
 
     componentDidMount: function() {
         this.dispatcherRef = dis.register(this.onAction);
+        this._themeWatchRef = SettingsStore.watchSetting("theme", null, this._onThemeChanged);
 
         this.focusComposer = false;
 
@@ -360,6 +361,7 @@ export default createReactClass({
     componentWillUnmount: function() {
         Lifecycle.stopMatrixClient();
         dis.unregister(this.dispatcherRef);
+        SettingsStore.unwatchSetting(this._themeWatchRef);
         window.removeEventListener("focus", this.onFocus);
         window.removeEventListener('resize', this.handleResize);
         this.state.resizeNotifier.removeListener("middlePanelResized", this._dispatchTimelineResize);
@@ -382,6 +384,13 @@ export default createReactClass({
         }
     },
 
+    _onThemeChanged: function(settingName, roomId, atLevel, newValue) {
+        dis.dispatch({
+            action: 'set_theme',
+            value: newValue,
+        });
+    },
+
     startPageChangeTimer() {
         // Tor doesn't support performance
         if (!performance || !performance.mark) return null;
@@ -1376,17 +1385,6 @@ export default createReactClass({
             }, null, true);
         });
 
-        cli.on("accountData", function(ev) {
-            if (ev.getType() === 'im.vector.web.settings') {
-                if (ev.getContent() && ev.getContent().theme) {
-                    dis.dispatch({
-                        action: 'set_theme',
-                        value: ev.getContent().theme,
-                    });
-                }
-            }
-        });
-
         const dft = new DecryptionFailureTracker((total, errorCode) => {
             Analytics.trackEvent('E2E', 'Decryption failure', errorCode, total);
         }, (errorCode) => {

src/components/views/settings/tabs/user/GeneralUserSettingsTab.js

@@ -173,8 +173,17 @@ export default class GeneralUserSettingsTab extends React.Component {
         const newTheme = e.target.value;
         if (this.state.theme === newTheme) return;
 
-        SettingsStore.setValue("theme", null, SettingLevel.ACCOUNT, newTheme);
+        // doing getValue in the .catch will still return the value we failed to set,
+        // so remember what the value was before we tried to set it so we can revert
+        const oldTheme = SettingsStore.getValue('theme');
+        SettingsStore.setValue("theme", null, SettingLevel.ACCOUNT, newTheme).catch(() => {
+            dis.dispatch({action: 'set_theme', value: oldTheme});
+            this.setState({theme: oldTheme});
+        });
         this.setState({theme: newTheme});
+        // The settings watcher doesn't fire until the echo comes back from the
+        // server, so to make the theme change immediately we need to manually
+        // do the dispatch now
         dis.dispatch({action: 'set_theme', value: newTheme});
     };