From 842e19280de6e6036be99f246bf380947482dcd3 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Mon, 1 Apr 2019 11:49:29 -0600
Subject: [PATCH] Apply changes to breadcrumbs setting live

---
 src/components/structures/LeftPanel.js        | 23 ++++++++++++++++++-
 src/i18n/strings/en_EN.json                   |  2 +-
 src/settings/Settings.js                      |  2 +-
 .../handlers/DeviceSettingsHandler.js         |  2 +-
 4 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
index 95b57a0ca5..88b6a13a5d 100644
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -45,11 +45,22 @@ const LeftPanel = React.createClass({
     getInitialState: function() {
         return {
             searchFilter: '',
+            breadcrumbs: false,
         };
     },
 
     componentWillMount: function() {
         this.focusedElement = null;
+
+        this._settingWatchRef = SettingsStore.watchSetting(
+            "feature_room_breadcrumbs", null,
+            this._onBreadcrumbsChanged);
+
+        this.setState({breadcrumbs: SettingsStore.isFeatureEnabled("feature_room_breadcrumbs")});
+    },
+
+    componentWillUnmount: function() {
+        SettingsStore.unwatchSetting(this._settingWatchRef);
     },
 
     shouldComponentUpdate: function(nextProps, nextState) {
@@ -73,6 +84,16 @@ const LeftPanel = React.createClass({
         return false;
     },
 
+    _onBreadcrumbsChanged: function(settingName, roomId, level, valueAtLevel, value) {
+        // Features are only possible at a single level, so we can get away with using valueAtLevel.
+        // The SettingsStore runs on the same tick as the update, so `value` will be wrong.
+        this.setState({breadcrumbs: valueAtLevel});
+
+        // For some reason the setState doesn't trigger a render of the component, so force one.
+        // Probably has to do with the change happening outside of a change detector cycle.
+        this.forceUpdate();
+    },
+
     _onFocus: function(ev) {
         this.focusedElement = ev.target;
     },
@@ -220,7 +241,7 @@ const LeftPanel = React.createClass({
             collapsed={this.props.collapsed} />);
 
         let breadcrumbs;
-        if (SettingsStore.isFeatureEnabled("feature_room_breadcrumbs")) {
+        if (this.state.breadcrumbs) {
             breadcrumbs = (<RoomBreadcrumbs collapsed={this.props.collapsed} />);
         }
 
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 5b95c7ffe3..358f78b75f 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -288,7 +288,7 @@
     "Failed to join room": "Failed to join room",
     "Message Pinning": "Message Pinning",
     "Custom user status messages": "Custom user status messages",
-    "Show recent room avatars above the room list (refresh to apply changes)": "Show recent room avatars above the room list (refresh to apply changes)",
+    "Show recent room avatars above the room list": "Show recent room avatars above the room list",
     "Group & filter rooms by custom tags (refresh to apply changes)": "Group & filter rooms by custom tags (refresh to apply changes)",
     "Render simple counters in room header": "Render simple counters in room header",
     "Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",
diff --git a/src/settings/Settings.js b/src/settings/Settings.js
index 6e17ffbbd7..71a81ae4db 100644
--- a/src/settings/Settings.js
+++ b/src/settings/Settings.js
@@ -102,7 +102,7 @@ export const SETTINGS = {
     },
     "feature_room_breadcrumbs": {
         isFeature: true,
-        displayName: _td("Show recent room avatars above the room list (refresh to apply changes)"),
+        displayName: _td("Show recent room avatars above the room list"),
         supportedLevels: LEVELS_FEATURE,
         default: false,
     },
diff --git a/src/settings/handlers/DeviceSettingsHandler.js b/src/settings/handlers/DeviceSettingsHandler.js
index bca7679a47..b5c4382768 100644
--- a/src/settings/handlers/DeviceSettingsHandler.js
+++ b/src/settings/handlers/DeviceSettingsHandler.js
@@ -127,6 +127,6 @@ export default class DeviceSettingsHandler extends SettingsHandler {
 
     _writeFeature(featureName, enabled) {
         localStorage.setItem("mx_labs_feature_" + featureName, enabled);
-        this._watchers.notifyUpdate(featureName, null, enabled);
+        this._watchers.notifyUpdate(featureName, null, SettingLevel.DEVICE, enabled);
     }
 }