Apply changes to breadcrumbs setting live

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} />);
         }