DEV: Decouple the user status modal from current user's status (#18514)

app/assets/javascripts/discourse/app/components/user-menu/profile-tab-content.js

@@ -6,6 +6,8 @@ import showModal from "discourse/lib/show-modal";
 export default class UserMenuProfileTabContent extends Component {
   @service currentUser;
   @service siteSettings;
+  @service userStatus;
+
   saving = false;
 
   get showToggleAnonymousButton() {
@@ -59,6 +61,11 @@ export default class UserMenuProfileTabContent extends Component {
     showModal("user-status", {
       title: "user_status.set_custom_status",
       modalClass: "user-status",
+      model: {
+        status: this.currentUser.status,
+        saveAction: (status) => this.userStatus.set(status),
+        deleteAction: () => this.userStatus.clear(),
+      },
     });
   }
 }

app/assets/javascripts/discourse/app/controllers/user-status.js

@@ -1,7 +1,6 @@
 import Controller from "@ember/controller";
 import ModalFunctionality from "discourse/mixins/modal-functionality";
 import { action } from "@ember/object";
-import { inject as service } from "@ember/service";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import discourseComputed from "discourse-common/utils/decorators";
 import ItsATrap from "@discourse/itsatrap";
@@ -11,17 +10,16 @@ import {
 } from "discourse/lib/time-shortcut";
 
 export default Controller.extend(ModalFunctionality, {
-  userStatusService: service("user-status"),
   showDeleteButton: false,
   prefilledDateTime: null,
   timeShortcuts: null,
   _itsatrap: null,
 
   onShow() {
-    const currentStatus = { ...this.currentUser.status };
+    const currentStatus = { ...this.model.status };
     this.setProperties({
       status: currentStatus,
-      showDeleteButton: !!this.currentUser.status,
+      showDeleteButton: !!this.model.status,
       timeShortcuts: this._buildTimeShortcuts(),
       prefilledDateTime: currentStatus?.ends_at,
     });
@@ -54,8 +52,8 @@ export default Controller.extend(ModalFunctionality, {
 
   @action
   delete() {
-    this.userStatusService
-      .clear()
+    this.model
+      .deleteAction()
       .then(() => this.send("closeModal"))
       .catch((e) => this._handleError(e));
   },
@@ -72,11 +70,10 @@ export default Controller.extend(ModalFunctionality, {
       emoji: this.status.emoji,
       ends_at: this.status.endsAt?.toISOString(),
     };
-    this.userStatusService
-      .set(newStatus)
-      .then(() => {
-        this.send("closeModal");
-      })
+
+    this.model
+      .saveAction(newStatus)
+      .then(() => this.send("closeModal"))
       .catch((e) => this._handleError(e));
   },
 

app/assets/javascripts/discourse/app/widgets/quick-access-profile.js

@@ -26,6 +26,7 @@ createWidgetFrom(QuickAccessItem, "logout-item", {
 
 createWidgetFrom(QuickAccessItem, "user-status-item", {
   tagName: "li.user-status",
+  services: ["userStatus"],
 
   html() {
     const status = this.currentUser.status;
@@ -41,6 +42,11 @@ createWidgetFrom(QuickAccessItem, "user-status-item", {
     showModal("user-status", {
       title: "user_status.set_custom_status",
       modalClass: "user-status",
+      model: {
+        status: this.currentUser.status,
+        saveAction: (status) => this.userStatus.set(status),
+        deleteAction: () => this.userStatus.clear(),
+      },
     });
   },