DEV: Move rerender on 'do not disturb' change to mixin (#11529)

app/assets/javascripts/discourse/app/components/site-header.js

@@ -6,15 +6,18 @@ import PanEvents, {
 import { cancel, later, schedule } from "@ember/runloop";
 import Docking from "discourse/mixins/docking";
 import MountWidget from "discourse/components/mount-widget";
-import { isTesting } from "discourse-common/config/environment";
+import RerenderOnDoNotDisturbChange from "discourse/mixins/rerender-on-do-not-disturb-change";
 import { observes } from "discourse-common/utils/decorators";
 import { topicTitleDecorators } from "discourse/components/topic-title";
 
-const SiteHeaderComponent = MountWidget.extend(Docking, PanEvents, {
+const SiteHeaderComponent = MountWidget.extend(
+  Docking,
+  PanEvents,
+  RerenderOnDoNotDisturbChange,
+  {
     widget: "header",
     docAt: null,
     dockedHeader: null,
-  _listenToDoNotDisturbLoop: null,
     _animate: false,
     _isPanning: false,
     _panMenuOrigin: "right",
@@ -196,32 +199,12 @@ const SiteHeaderComponent = MountWidget.extend(Docking, PanEvents, {
       }
     },
 
-  listenForDoNotDisturbChanges() {
-    if (this.currentUser && !this.currentUser.isInDoNotDisturb()) {
-      this.queueRerender();
-    } else {
-      cancel(this._listenToDoNotDisturbLoop);
-      this._listenToDoNotDisturbLoop = later(
-        this,
-        () => {
-          this.listenForDoNotDisturbChanges();
-        },
-        10000
-      );
-    }
-  },
-
     didInsertElement() {
       this._super(...arguments);
       $(window).on("resize.discourse-menu-panel", () => this.afterRender());
 
       this.appEvents.on("header:show-topic", this, "setTopic");
       this.appEvents.on("header:hide-topic", this, "setTopic");
-    this.appEvents.on("do-not-disturb:changed", () => this.queueRerender());
-
-    if (!isTesting()) {
-      this.listenForDoNotDisturbChanges();
-    }
 
       this.dispatch("notifications:changed", "user-notifications");
       this.dispatch("header:keyboard-trigger", "header");
@@ -272,7 +255,6 @@ const SiteHeaderComponent = MountWidget.extend(Docking, PanEvents, {
       this.appEvents.off("dom:clean", this, "_cleanDom");
 
       cancel(this._scheduledRemoveAnimate);
-    cancel(this._listenToDoNotDisturbLoop);
       window.cancelAnimationFrame(this._scheduledMovingAnimation);
 
       document.removeEventListener("click", this._dismissFirstNotification);
@@ -403,7 +385,8 @@ const SiteHeaderComponent = MountWidget.extend(Docking, PanEvents, {
         this._animate = false;
       });
     },
-});
+  }
+);
 
 export default SiteHeaderComponent.extend({
   classNames: ["d-header-wrap"],

app/assets/javascripts/discourse/app/mixins/rerender-on-do-not-disturb-change.js

@@ -0,0 +1,36 @@
+import { cancel, later } from "@ember/runloop";
+import Mixin from "@ember/object/mixin";
+import { isTesting } from "discourse-common/config/environment";
+
+export default Mixin.create({
+  _listenToDoNotDisturbLoop: null,
+
+  listenForDoNotDisturbChanges() {
+    if (this.currentUser && !this.currentUser.isInDoNotDisturb()) {
+      this.queueRerender();
+    } else {
+      cancel(this._listenToDoNotDisturbLoop);
+      this._listenToDoNotDisturbLoop = later(
+        this,
+        () => {
+          this.listenForDoNotDisturbChanges();
+        },
+        10000
+      );
+    }
+  },
+
+  didInsertElement() {
+    this._super(...arguments);
+
+    this.appEvents.on("do-not-disturb:changed", () => this.queueRerender());
+    if (!isTesting()) {
+      this.listenForDoNotDisturbChanges();
+    }
+  },
+
+  willDestroyElement() {
+    this._super(...arguments);
+    cancel(this._listenToDoNotDisturbLoop);
+  },
+});