FIX: Current title wasn't visible when assigning badge title

app/assets/javascripts/discourse/app/components/badge-title.js

@@ -1,28 +1,37 @@
 import I18n from "I18n";
-import discourseComputed from "discourse-common/utils/decorators";
 import Component from "@ember/component";
 import { ajax } from "discourse/lib/ajax";
 
 export default Component.extend({
   classNames: ["badge-title"],
 
+  selectedUserBadgeId: null,
+  selectableUserBadges: null,
   saved: false,
   saving: false,
 
-  @discourseComputed("selectableUserBadges", "selectedUserBadgeId")
-  selectedUserBadge(selectableUserBadges, selectedUserBadgeId) {
-    return selectableUserBadges.findBy("id", parseInt(selectedUserBadgeId, 10));
+  init() {
+    this._super(...arguments);
+
+    const badge = this.selectableUserBadges.findBy(
+      "badge.name",
+      this.currentUser.title
+    );
+    this.selectedUserBadgeId = badge ? badge.id : 0;
   },
 
   actions: {
     save() {
       this.setProperties({ saved: false, saving: true });
 
-      const badge_id = this.selectedUserBadgeId || 0;
+      const selectedUserBadge = this.selectableUserBadges.findBy(
+        "id",
+        this.selectedUserBadgeId
+      );
 
       ajax(this.currentUser.path + "/preferences/badge_title", {
         type: "PUT",
-        data: { user_badge_id: badge_id }
+        data: { user_badge_id: selectedUserBadge ? selectedUserBadge.id : 0 }
       }).then(
         () => {
           this.setProperties({
@@ -31,7 +40,7 @@ export default Component.extend({
           });
           this.currentUser.set(
             "title",
-            this.get("selectedUserBadge.badge.name")
+            selectedUserBadge ? selectedUserBadge.badge.name : ""
           );
         },
         () => {

app/assets/javascripts/discourse/app/controllers/badges/show.js

@@ -21,6 +21,7 @@ export default Controller.extend({
   selectableUserBadges(filteredList) {
     return [
       EmberObject.create({
+        id: 0,
         badge: Badge.create({ name: I18n.t("badges.none") })
       }),
       ...filteredList.uniqBy("badge.name")

test/javascripts/components/badge-title-test.js

@@ -13,6 +13,7 @@ componentTest("badge title", {
     this.set("subject", selectKit());
     this.set("selectableUserBadges", [
       EmberObject.create({
+        id: 0,
         badge: { name: "(none)" }
       }),
       EmberObject.create({