Factor out logic from EnableNotificationsButton(!) and reuse MatrixToolbar.

Added notification logic to Notifier; dispatch notifier_enabled when toggled
so the toolbar can be shown/hidden and the button text can be kept in sync.
Add MatrixToolbar back into MatrixChat for notification nagging.

skins/base/views/molecules/MatrixToolbar.js

@@ -32,8 +32,7 @@ module.exports = React.createClass({
     render: function() {
         return (
             <div className="mx_MatrixToolbar">
-                <LogoutButton />
-                <EnableNotificationsButton />
+                You are not receiving desktop notifications. <EnableNotificationsButton />
             </div>
         );
     }

skins/base/views/pages/MatrixChat.js

@@ -27,6 +27,8 @@ var UserSettings = ComponentBroker.get('organisms/UserSettings');
 var Register = ComponentBroker.get('templates/Register');
 var CreateRoom = ComponentBroker.get('organisms/CreateRoom');
 var RoomDirectory = ComponentBroker.get('organisms/RoomDirectory');
+var Notifier = ComponentBroker.get('organisms/Notifier');
+var MatrixToolbar = ComponentBroker.get('molecules/MatrixToolbar');
 
 var MatrixChatController = require("../../../../src/controllers/pages/MatrixChat");
 
@@ -52,6 +54,11 @@ module.exports = React.createClass({
 
             var page_element;
             var right_panel = "";
+            var top_bar;
+
+            if (!Notifier.isEnabled()) {
+                top_bar = <MatrixToolbar />;
+            }
 
             switch (this.state.page_type) {
                 case this.PageTypes.RoomView:
@@ -74,6 +81,7 @@ module.exports = React.createClass({
 
             return (
                 <div className="mx_MatrixChat">
+                    {top_bar}
                     <LeftPanel selectedRoom={this.state.currentRoom} />
                     <div className="mx_MatrixChat_middlePanel">
                         {page_element}

src/controllers/atoms/EnableNotificationsButton.js

@@ -15,53 +15,43 @@ limitations under the License.
 */
 
 'use strict';
+var ComponentBroker = require("../../ComponentBroker");
+var Notifier = ComponentBroker.get('organisms/Notifier');
+var dis = require("../../dispatcher");
 
 module.exports = {
-    notificationsAvailable: function() {
-        return !!global.Notification;
+
+    componentDidMount: function() {
+        this.dispatcherRef = dis.register(this.onAction);
     },
 
-    havePermission: function() {
-        return global.Notification.permission == 'granted';
+    componentWillUnmount: function() {
+        dis.unregister(this.dispatcherRef);
+    },
+
+    onAction: function(payload) {
+        if (payload.action !== "notifier_enabled") {
+            return;
+        }
+        this.forceUpdate();
     },
 
     enabled: function() {
-        if (!this.havePermission()) return false;
-
-        if (!global.localStorage) return true;
-
-        var enabled = global.localStorage.getItem('notifications_enabled');
-        if (enabled === null) return true;
-        return enabled === 'true';
-    },
-
-    disable: function() {
-        if (!global.localStorage) return;
-        global.localStorage.setItem('notifications_enabled', 'false');
-        this.forceUpdate();
-    },
-
-    enable: function() {
-        if (!this.havePermission()) {
-            var self = this;
-            global.Notification.requestPermission(function() {
-                self.forceUpdate();
-            });
-        }
-
-        if (!global.localStorage) return;
-        global.localStorage.setItem('notifications_enabled', 'true');
-        this.forceUpdate();
+        return Notifier.isEnabled();
     },
 
     onClick: function() {
-        if (!this.notificationsAvailable()) {
+        var self = this;
+        if (!Notifier.supportsDesktopNotifications()) {
             return;
         }
-        if (!this.enabled()) {
-            this.enable();
+        if (!Notifier.isEnabled()) {
+            Notifier.setEnabled(true, function() {
+                self.forceUpdate();
+            });
         } else {
-            this.disable();
+            Notifier.setEnabled(false);
         }
+        this.forceUpdate();
     },
 };

src/controllers/organisms/Notifier.js

@@ -17,6 +17,15 @@ limitations under the License.
 'use strict';
 
 var MatrixClientPeg = require("../../MatrixClientPeg");
+var dis = require("../../dispatcher");
+
+/*
+ * Dispatches:
+ * {
+ *   action: "notifier_enabled",
+ *   value: boolean
+ * }
+ */
 
 module.exports = {
     start: function() {
@@ -30,12 +39,60 @@ module.exports = {
         }
     },
 
+    supportsDesktopNotifications: function() {
+        return !!global.Notification;
+    },
+
+    havePermission: function() {
+        return global.Notification.permission == 'granted';
+    },
+
+    setEnabled: function(enable, callback) {
+        console.log("Notifier.setEnabled => %s", enable);
+        if(enable) {
+            if (!this.havePermission()) {
+                var self = this;
+                global.Notification.requestPermission(function() {
+                    if (callback) {
+                        callback();
+                    }
+                });
+            }
+
+            if (!global.localStorage) return;
+            global.localStorage.setItem('notifications_enabled', 'true');
+            dis.dispatch({
+                action: "notifier_enabled",
+                value: true
+            });
+        }
+        else {
+            if (!global.localStorage) return;
+            global.localStorage.setItem('notifications_enabled', 'false');
+            dis.dispatch({
+                action: "notifier_enabled",
+                value: false
+            });
+        }
+    },
+
+    isEnabled: function() {
+        if (!this.havePermission()) return false;
+
+        if (!global.localStorage) return true;
+
+        var enabled = global.localStorage.getItem('notifications_enabled');
+        if (enabled === null) return true;
+        return enabled === 'true';
+    },
+
     onRoomTimeline: function(ev, room, toStartOfTimeline) {
         if (toStartOfTimeline) return;
         if (ev.sender && ev.sender.userId == MatrixClientPeg.get().credentials.userId) return;
 
-        var enabled = global.localStorage.getItem('notifications_enabled');
-        if (enabled === 'false') return;
+        if (!this.isEnabled()) {
+            return;
+        }
 
         var actions = MatrixClientPeg.get().getPushActionsForEvent(ev);
         if (actions && actions.notify) {

src/controllers/pages/MatrixChat.js

@@ -163,6 +163,9 @@ module.exports = {
                     page_type: this.PageTypes.RoomDirectory,
                 });
                 break;
+            case'notifier_enabled':
+                this.forceUpdate();
+                break;
         }
     },