REFACTOR: user-selector take 2 (#7540)

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

@@ -1,4 +1,4 @@
-import { observes } from "ember-addons/ember-computed-decorators";
+import { on, observes } from "ember-addons/ember-computed-decorators";
 import TextField from "discourse/components/text-field";
 import userSearch from "discourse/lib/user-search";
 import { findRawTemplate } from "discourse/lib/raw-templates";
@@ -10,20 +10,24 @@ export default TextField.extend({
 
   @observes("usernames")
   _update() {
-    if (this.get("canReceiveUpdates") === "true")
-      this.didInsertElement({ updateData: true });
+    if (this.canReceiveUpdates === "true") {
+      this._createAutocompleteInstance({ updateData: true });
+    }
   },
 
-  didInsertElement(opts) {
-    this._super(...arguments);
+  @on("willDestroyElement")
+  _destroyAutocompleteInstance() {
+    $(this.element).autocomplete("destroy");
+  },
 
+  @on("didInsertElement")
+  _createAutocompleteInstance(opts) {
     const bool = n => {
-      const val = this.get(n);
+      const val = this[n];
       return val === true || val === "true";
     };
 
-    var self = this,
-      selected = [],
+    let selected = [],
       groups = [],
       currentUser = this.currentUser,
       includeMentionableGroups = bool("includeMentionableGroups"),
@@ -37,39 +41,40 @@ export default TextField.extend({
       allowEmails = bool("allowEmails"),
       fullWidthWrap = bool("fullWidthWrap");
 
-    function excludedUsernames() {
+    const excludedUsernames = () => {
       // hack works around some issues with allowAny eventing
       const usernames = single ? [] : selected;
 
       if (currentUser && excludeCurrentUser) {
-        return usernames.concat([currentUser.get("username")]);
+        return usernames.concat([currentUser.username]);
       }
       return usernames;
-    }
+    };
 
-    this.$()
-      .val(this.get("usernames"))
+    const userSelectorComponent = this;
+
+    $(this.element)
+      .val(this.usernames)
       .autocomplete({
         template: findRawTemplate("user-selector-autocomplete"),
-        disabled: disabled,
-        single: single,
-        allowAny: allowAny,
+        disabled,
+        single,
+        allowAny,
         updateData: opts && opts.updateData ? opts.updateData : false,
         fullWidthWrap,
 
         dataSource(term) {
-          var results = userSearch({
+          return userSearch({
             term,
-            topicId: self.get("topicId"),
+            topicId: userSelectorComponent.topicId,
             exclude: excludedUsernames(),
             includeGroups,
             allowedUsers,
             includeMentionableGroups,
             includeMessageableGroups,
-            group: self.get("group"),
+            group: userSelectorComponent.group,
             allowEmails
           });
-          return results;
         },
 
         transformComplete(v) {
@@ -79,16 +84,14 @@ export default TextField.extend({
             }
             return v.username || v.name;
           } else {
-            var excludes = excludedUsernames();
-            return v.usernames.filter(function(item) {
-              return excludes.indexOf(item) === -1;
-            });
+            const excludes = excludedUsernames();
+            return v.usernames.filter(item => excludes.indexOf(item) === -1);
           }
         },
 
         onChangeItems(items) {
-          var hasGroups = false;
-          items = items.map(function(i) {
+          let hasGroups = false;
+          items = items.map(i => {
             if (groups.indexOf(i) > -1) {
               hasGroups = true;
             }
@@ -96,18 +99,26 @@ export default TextField.extend({
           });
 
           let previouslySelected = [];
-          if (Array.isArray(self.get("usernames"))) {
-            previouslySelected = self.get("usernames");
+          if (Array.isArray(userSelectorComponent.usernames)) {
+            previouslySelected = userSelectorComponent.usernames;
           } else {
-            if (self.get("usernames")) {
-              previouslySelected = self.get("usernames").split(",");
+            if (userSelectorComponent.usernames) {
+              previouslySelected = userSelectorComponent.usernames.split(",");
             }
           }
-          self.set("usernames", items.join(","));
-          self.set("hasGroups", hasGroups);
+
+          userSelectorComponent.setProperties({
+            usernames: items.join(","),
+            hasGroups
+          });
           selected = items;
-          if (self.get("onChangeCallback"))
-            self.onChangeCallback(previouslySelected, selected);
+
+          if (userSelectorComponent.onChangeCallback) {
+            userSelectorComponent.onChangeCallback(
+              previouslySelected,
+              selected
+            );
+          }
         },
 
         reverseTransform(i) {
@@ -116,21 +127,14 @@ export default TextField.extend({
       });
   },
 
-  willDestroyElement() {
-    this._super(...arguments);
-    this.$().autocomplete("destroy");
-  },
-
   // THIS IS A HUGE HACK TO SUPPORT CLEARING THE INPUT
   @observes("usernames")
-  _clearInput: function() {
-    if (arguments.length > 1) {
-      if (Ember.isEmpty(this.get("usernames"))) {
-        this.$()
-          .parent()
-          .find("a")
-          .click();
-      }
+  _clearInput() {
+    if (arguments.length > 1 && Ember.isEmpty(this.usernames)) {
+      $(this.element)
+        .parent()
+        .find("a")
+        .click();
     }
   }
 });