From bb6337d6c61620f7b33498f3bf537ef067b4e956 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Wed, 29 May 2019 16:21:13 +0200
Subject: [PATCH] REFACTOR: choose-topic component (#7636)

---
 .../discourse/components/choose-topic.js.es6  | 51 +++++++++++--------
 1 file changed, 29 insertions(+), 22 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/choose-topic.js.es6 b/app/assets/javascripts/discourse/components/choose-topic.js.es6
index d612b0fc7b5..4ee45b5eee4 100644
--- a/app/assets/javascripts/discourse/components/choose-topic.js.es6
+++ b/app/assets/javascripts/discourse/components/choose-topic.js.es6
@@ -1,34 +1,44 @@
 import debounce from "discourse/lib/debounce";
 import { searchForTerm } from "discourse/lib/search";
+import { observes } from "ember-addons/ember-computed-decorators";
 
 export default Ember.Component.extend({
   loading: null,
   noResults: null,
   topics: null,
+  selectedTopicId: null,
+  currentTopicId: null,
+  topicTitle: null,
 
-  topicTitleChanged: function() {
+  @observes("topicTitle")
+  topicTitleChanged() {
     this.setProperties({
       loading: true,
       noResults: true,
       selectedTopicId: null
     });
-    this.search(this.topicTitle);
-  }.observes("topicTitle"),
 
-  topicsChanged: function() {
-    const topics = this.topics;
-    if (topics) {
-      this.set("noResults", topics.length === 0);
+    this.search(this.topicTitle);
+  },
+
+  @observes("topics")
+  topicsChanged() {
+    if (this.topics) {
+      this.set("noResults", this.topics.length === 0);
     }
+
     this.set("loading", false);
-  }.observes("topics"),
+  },
 
   search: debounce(function(title) {
-    const self = this,
-      currentTopicId = this.currentTopicId;
+    if (!this.element || this.isDestroying || this.isDestroyed) {
+      return;
+    }
+
+    const currentTopicId = this.currentTopicId;
 
     if (Ember.isEmpty(title)) {
-      self.setProperties({ topics: null, loading: false });
+      this.setProperties({ topics: null, loading: false });
       return;
     }
 
@@ -36,27 +46,24 @@ export default Ember.Component.extend({
       typeFilter: "topic",
       searchForId: true,
       restrictToArchetype: "regular"
-    }).then(function(results) {
+    }).then(results => {
       if (results && results.posts && results.posts.length > 0) {
-        self.set(
+        this.set(
           "topics",
-          results.posts
-            .mapBy("topic")
-            .filter(t => t.get("id") !== currentTopicId)
+          results.posts.mapBy("topic").filter(t => t.id !== currentTopicId)
         );
       } else {
-        self.setProperties({ topics: null, loading: false });
+        this.setProperties({ topics: null, loading: false });
       }
     });
   }, 300),
 
   actions: {
     chooseTopic(topic) {
-      const topicId = Ember.get(topic, "id");
-      this.set("selectedTopicId", topicId);
-      Ember.run.next(() =>
-        $("#choose-topic-" + topicId).prop("checked", "true")
-      );
+      this.set("selectedTopicId", topic.id);
+      Ember.run.next(() => {
+        document.getElementById(`choose-topic-${topic.id}`).checked = true;
+      });
       return false;
     }
   }