DEV: move CleansUp mixin code to components (#30292)

* DEV: move cleans-up event listeners directly to components
* DEV: inline logic from unnecessary cleanUp func in GroupCardContents

app/assets/javascripts/discourse/app/components/group-card-contents.js

@@ -2,11 +2,11 @@ import { action } from "@ember/object";
 import { alias, gt } from "@ember/object/computed";
 import { service } from "@ember/service";
 import { classNameBindings, classNames } from "@ember-decorators/component";
+import { on } from "@ember-decorators/object";
 import CardContentsBase from "discourse/components/card-contents-base";
 import { setting } from "discourse/lib/computed";
 import { wantsNewWindow } from "discourse/lib/intercept-click";
 import { groupPath } from "discourse/lib/url";
-import CleansUp from "discourse/mixins/cleans-up";
 import discourseComputed from "discourse-common/utils/decorators";
 
 const maxMembersToDisplay = 10;
@@ -19,9 +19,7 @@ const maxMembersToDisplay = 10;
   "isFixed:fixed",
   "groupClass"
 )
-export default class GroupCardContents extends CardContentsBase.extend(
-  CleansUp
-) {
+export default class GroupCardContents extends CardContentsBase {
   @service composer;
   @setting("allow_profile_backgrounds") allowBackgrounds;
   @setting("enable_badges") showBadges;
@@ -54,6 +52,16 @@ export default class GroupCardContents extends CardContentsBase.extend(
     return groupPath(group.name);
   }
 
+  @on("didInsertElement")
+  _inserted() {
+    this.appEvents.on("dom:clean", this, this._close);
+  }
+
+  @on("didDestroyElement")
+  _destroyed() {
+    this.appEvents.off("dom:clean", this, this._close);
+  }
+
   async _showCallback(username) {
     this.setProperties({ visible: true, loading: true });
 
@@ -81,10 +89,6 @@ export default class GroupCardContents extends CardContentsBase.extend(
     super._close(...arguments);
   }
 
-  cleanUp() {
-    this._close();
-  }
-
   @action
   close(event) {
     event?.preventDefault();

app/assets/javascripts/discourse/app/components/topic-entrance.js

@@ -3,9 +3,9 @@ import { action } from "@ember/object";
 import { scheduleOnce } from "@ember/runloop";
 import { service } from "@ember/service";
 import { classNameBindings } from "@ember-decorators/component";
+import { on } from "@ember-decorators/object";
 import $ from "jquery";
 import DiscourseURL from "discourse/lib/url";
-import CleansUp from "discourse/mixins/cleans-up";
 import discourseComputed, { bind } from "discourse-common/utils/decorators";
 import { i18n } from "discourse-i18n";
 
@@ -33,7 +33,7 @@ function entranceDate(dt, showTime) {
 }
 
 @classNameBindings("visible::hidden")
-export default class TopicEntrance extends Component.extend(CleansUp) {
+export default class TopicEntrance extends Component {
   @service router;
   @service session;
   @service historyStore;
@@ -72,9 +72,15 @@ export default class TopicEntrance extends Component.extend(CleansUp) {
     return entranceDate(bumpedDate, showTime);
   }
 
-  didInsertElement() {
-    super.didInsertElement(...arguments);
+  @on("didInsertElement")
+  _inserted() {
     this.appEvents.on("topic-entrance:show", this, "_show");
+    this.appEvents.on("dom:clean", this, this.cleanUp);
+  }
+
+  @on("didDestroyElement")
+  _destroyed() {
+    this.appEvents.off("dom:clean", this, this.cleanUp);
   }
 
   _setCSS() {

app/assets/javascripts/discourse/app/components/user-card-contents.js

@@ -7,7 +7,7 @@ import {
   classNameBindings,
   classNames,
 } from "@ember-decorators/component";
-import { observes } from "@ember-decorators/object";
+import { observes, on } from "@ember-decorators/object";
 import CardContentsBase from "discourse/components/card-contents-base";
 import { setting } from "discourse/lib/computed";
 import { durationTiny } from "discourse/lib/formatter";
@@ -16,7 +16,6 @@ import { prioritizeNameInUx } from "discourse/lib/settings";
 import { emojiUnescape } from "discourse/lib/text";
 import { escapeExpression } from "discourse/lib/utilities";
 import CanCheckEmails from "discourse/mixins/can-check-emails";
-import CleansUp from "discourse/mixins/cleans-up";
 import User from "discourse/models/user";
 import { getURLWithCDN } from "discourse-common/lib/get-url";
 import discourseComputed from "discourse-common/utils/decorators";
@@ -33,8 +32,7 @@ import { i18n } from "discourse-i18n";
 )
 @attributeBindings("ariaLabel:aria-label")
 export default class UserCardContents extends CardContentsBase.extend(
-  CanCheckEmails,
-  CleansUp
+  CanCheckEmails
 ) {
   elementId = "user-card";
   avatarSelector = "[data-user-card]";
@@ -205,6 +203,16 @@ export default class UserCardContents extends CardContentsBase.extend(
     return profileHidden || inactive;
   }
 
+  @on("didInsertElement")
+  _inserted() {
+    this.appEvents.on("dom:clean", this, this.cleanUp);
+  }
+
+  @on("didDestroyElement")
+  _destroyed() {
+    this.appEvents.off("dom:clean", this, this.cleanUp);
+  }
+
   async _showCallback(username) {
     this.setProperties({ visible: true, loading: true });
 

app/assets/javascripts/discourse/app/mixins/cleans-up.js

@@ -1,14 +0,0 @@
-import { on } from "@ember/object/evented";
-import Mixin from "@ember/object/mixin";
-
-// Include this mixin if you want to be notified when the dom should be
-// cleaned (usually on route change.)
-export default Mixin.create({
-  _initializeChooser: on("didInsertElement", function () {
-    this.appEvents.on("dom:clean", this, "cleanUp");
-  }),
-
-  _clearChooser: on("willDestroyElement", function () {
-    this.appEvents.off("dom:clean", this, "cleanUp");
-  }),
-});