REFACTOR: badge-selector component (#7683)

app/assets/javascripts/discourse/components/badge-selector.js.es6

@@ -4,6 +4,7 @@ import {
   default as computed
 } from "ember-addons/ember-computed-decorators";
 import { findRawTemplate } from "discourse/lib/raw-templates";
+const { makeArray } = Ember;
 
 export default Ember.Component.extend({
   @computed("placeholderKey")
@@ -13,43 +14,40 @@ export default Ember.Component.extend({
 
   @observes("badgeNames")
   _update() {
-    if (this.canReceiveUpdates === "true")
+    if (this.canReceiveUpdates === "true") {
       this._initializeAutocomplete({ updateData: true });
+    }
   },
 
   @on("didInsertElement")
   _initializeAutocomplete(opts) {
-    var self = this;
-    var selectedBadges;
+    let selectedBadges;
 
-    self.$("input").autocomplete({
+    $(this.element.querySelector("input")).autocomplete({
       allowAny: false,
-      items: _.isArray(this.badgeNames) ? this.badgeNames : [this.badgeNames],
+      items: makeArray(this.badgeNames),
       single: this.single,
       updateData: opts && opts.updateData ? opts.updateData : false,
-      onChangeItems: function(items) {
+      template: findRawTemplate("badge-selector-autocomplete"),
+
+      onChangeItems(items) {
         selectedBadges = items;
-        self.set("badgeNames", items.join(","));
+        this.set("badgeNames", items.join(","));
       },
-      transformComplete: function(g) {
+
+      transformComplete(g) {
         return g.name;
       },
-      dataSource: function(term) {
-        return self
-          .get("badgeFinder")(term)
-          .then(function(badges) {
-            if (!selectedBadges) {
-              return badges;
-            }
 
-            return badges.filter(function(badge) {
-              return !selectedBadges.any(function(s) {
-                return s === badge.name;
-              });
-            });
-          });
-      },
-      template: findRawTemplate("badge-selector-autocomplete")
+      dataSource(term) {
+        return this.badgeFinder(term).then(badges => {
+          if (!selectedBadges) return badges;
+
+          return badges.filter(
+            badge => !selectedBadges.any(s => s === badge.name)
+          );
+        });
+      }
     });
   }
 });