DEV: Update to native class syntax (#230)

Author: davidtaylorhq

admin/assets/javascripts/discourse/components/house-ads-chooser.js

@@ -1,41 +1,44 @@
-import { computed } from "@ember/object";
+import { action, computed } from "@ember/object";
+import { classNames } from "@ember-decorators/component";
 import { makeArray } from "discourse-common/lib/helpers";
 import MultiSelectComponent from "select-kit/components/multi-select";
 
-export default MultiSelectComponent.extend({
-  classNames: ["house-ads-chooser"],
-  filterable: true,
-  filterPlaceholder: "admin.adplugin.house_ads.filter_placeholder",
-  tokenSeparator: "|",
-  allowCreate: false,
-  allowAny: false,
-  settingValue: "",
-  valueAttribute: null,
-  nameProperty: null,
+@classNames("house-ads-chooser")
+export default class HouseAdsChooser extends MultiSelectComponent {
+  filterable = true;
+  filterPlaceholder = "admin.adplugin.house_ads.filter_placeholder";
+  tokenSeparator = "|";
+  allowCreate = false;
+  allowAny = false;
+  settingValue = "";
+  valueAttribute = null;
+  nameProperty = null;
 
-  value: computed("settingValue", function () {
+  @computed("settingValue")
+  get value() {
     return this.settingValue
       .toString()
       .split(this.tokenSeparator)
       .filter(Boolean);
-  }),
+  }
 
   // TODO: kept for legacy, remove when Discourse is 2.5
   mutateValues(values) {
     this.set("settingValue", values.join(this.tokenSeparator));
-  },
+  }
+
   computeValues() {
     return this.settingValue.split(this.tokenSeparator).filter(Boolean);
-  },
+  }
 
-  content: computed("choices", function () {
+  @computed("choices")
+  get content() {
     return makeArray(this.choices);
-  }),
+  }
 
-  actions: {
-    onChange(value) {
-      const settingValue = makeArray(value).join(this.tokenSeparator);
-      this.onChange?.(settingValue);
-    },
-  },
-});
+  @action
+  onChange(value) {
+    const settingValue = makeArray(value).join(this.tokenSeparator);
+    this.onChange?.(settingValue);
+  }
+}

admin/assets/javascripts/discourse/components/house-ads-list-setting.js

@@ -1,7 +1,8 @@
 import { mapBy } from "@ember/object/computed";
+import { classNames } from "@ember-decorators/component";
 import HouseAdsSetting from "discourse/plugins/discourse-adplugin/discourse/components/house-ads-setting";
 
-export default HouseAdsSetting.extend({
-  classNames: "house-ads-setting house-ads-list-setting",
-  adNames: mapBy("allAds", "name"),
-});
+@classNames("house-ads-setting house-ads-list-setting")
+export default class HouseAdsListSetting extends HouseAdsSetting {
+  @mapBy("allAds", "name") adNames;
+}

admin/assets/javascripts/discourse/components/house-ads-setting.js

@@ -1,58 +1,58 @@
 import Component from "@ember/component";
+import { action } from "@ember/object";
+import { classNames } from "@ember-decorators/component";
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { i18n, propertyNotEqual } from "discourse/lib/computed";
 import I18n from "I18n";
 
-export default Component.extend({
-  classNames: "house-ads-setting",
-  adValue: "",
-  saving: false,
-  savingStatus: "",
-  title: i18n("name", "admin.adplugin.house_ads.%@.title"),
-  help: i18n("name", "admin.adplugin.house_ads.%@.description"),
-  changed: propertyNotEqual("adValue", "value"),
+@classNames("house-ads-setting")
+export default class HouseAdsSetting extends Component {
+  adValue = "";
+  saving = false;
+  savingStatus = "";
+
+  @i18n("name", "admin.adplugin.house_ads.%@.title") title;
+  @i18n("name", "admin.adplugin.house_ads.%@.description") help;
+  @propertyNotEqual("adValue", "value") changed;
 
   init() {
-    this._super(...arguments);
+    super.init(...arguments);
     this.set("adValue", this.get("value"));
-  },
+  }
 
-  actions: {
-    save() {
-      if (!this.get("saving")) {
-        this.setProperties({
-          saving: true,
-          savingStatus: I18n.t("saving"),
-        });
+  @action
+  save() {
+    if (!this.get("saving")) {
+      this.setProperties({
+        saving: true,
+        savingStatus: I18n.t("saving"),
+      });
 
-        ajax(
-          `/admin/plugins/pluginad/house_settings/${this.get("name")}.json`,
-          {
-            type: "PUT",
-            data: { value: this.get("adValue") },
-          }
-        )
-          .then(() => {
-            const adSettings = this.get("adSettings");
-            adSettings.set(this.get("name"), this.get("adValue"));
-            this.setProperties({
-              value: this.get("adValue"),
-              savingStatus: I18n.t("saved"),
-            });
-          })
-          .catch(popupAjaxError)
-          .finally(() => {
-            this.setProperties({
-              saving: false,
-              savingStatus: "",
-            });
+      ajax(`/admin/plugins/pluginad/house_settings/${this.get("name")}.json`, {
+        type: "PUT",
+        data: { value: this.get("adValue") },
+      })
+        .then(() => {
+          const adSettings = this.get("adSettings");
+          adSettings.set(this.get("name"), this.get("adValue"));
+          this.setProperties({
+            value: this.get("adValue"),
+            savingStatus: I18n.t("saved"),
+          });
+        })
+        .catch(popupAjaxError)
+        .finally(() => {
+          this.setProperties({
+            saving: false,
+            savingStatus: "",
           });
-      }
-    },
+        });
+    }
+  }
 
-    cancel() {
-      this.set("adValue", this.get("value"));
-    },
-  },
-});
+  @action
+  cancel() {
+    this.set("adValue", this.get("value"));
+  }
+}

admin/assets/javascripts/discourse/controllers/admin-plugins-house-ads-index.js

@@ -1,8 +1,8 @@
 import Controller, { inject as controller } from "@ember/controller";
 import { alias } from "@ember/object/computed";
 
-export default Controller.extend({
-  adminPluginsHouseAds: controller("adminPlugins.houseAds"),
-  houseAds: alias("adminPluginsHouseAds.model"),
-  adSettings: alias("adminPluginsHouseAds.houseAdsSettings"),
-});
+export default class AdminPluginsHouseAdsIndexController extends Controller {
+  @controller("adminPlugins.houseAds") adminPluginsHouseAds;
+  @alias("adminPluginsHouseAds.model") houseAds;
+  @alias("adminPluginsHouseAds.houseAdsSettings") adSettings;
+}

admin/assets/javascripts/discourse/controllers/admin-plugins-house-ads.js

@@ -1,5 +1,5 @@
 import Controller from "@ember/controller";
 
-export default Controller.extend({
-  loadingAds: true,
-});
+export default class AdminPluginsHouseAdsController extends Controller {
+  loadingAds = true;
+}

admin/assets/javascripts/discourse/routes/admin-plugins-house-ads-index.js

@@ -2,11 +2,11 @@ import { action } from "@ember/object";
 import { service } from "@ember/service";
 import DiscourseRoute from "discourse/routes/discourse";
 
-export default DiscourseRoute.extend({
-  router: service(),
+export default class AdminPluginsHouseAdsIndex extends DiscourseRoute {
+  @service router;
 
   @action
   moreSettings() {
     this.router.transitionTo("adminSiteSettingsCategory", "ad_plugin");
-  },
-});
+  }
+}

admin/assets/javascripts/discourse/routes/admin-plugins-house-ads-show.js

@@ -2,7 +2,7 @@ import { TrackedObject } from "@ember-compat/tracked-built-ins";
 import DiscourseRoute from "discourse/routes/discourse";
 import I18n from "I18n";
 
-export default DiscourseRoute.extend({
+export default class AdminPluginsHouseAdsShow extends DiscourseRoute {
   model(params) {
     if (params.ad_id === "new") {
       return new TrackedObject({
@@ -19,5 +19,5 @@ export default DiscourseRoute.extend({
         )
       );
     }
-  },
-});
+  }
+}

admin/assets/javascripts/discourse/routes/admin-plugins-house-ads.js

@@ -2,21 +2,21 @@ import EmberObject from "@ember/object";
 import { ajax } from "discourse/lib/ajax";
 import DiscourseRoute from "discourse/routes/discourse";
 
-export default DiscourseRoute.extend({
-  settings: null,
+export default class AdminPluginsHouseAds extends DiscourseRoute {
+  settings = null;
 
   model() {
     return ajax("/admin/plugins/pluginad/house_creatives.json").then((data) => {
       this.set("settings", EmberObject.create(data.settings));
       return data.house_ads.map((ad) => EmberObject.create(ad));
     });
-  },
+  }
 
   setupController(controller, model) {
     controller.setProperties({
       model,
       houseAdsSettings: this.get("settings"),
       loadingAds: false,
     });
-  },
-});
+  }
+}

assets/javascripts/discourse/components/ad-component.js

@@ -7,28 +7,30 @@ import {
   isNthTopicListItem,
 } from "discourse/plugins/discourse-adplugin/discourse/helpers/slot-position";
 
-export default Component.extend({
-  router: service(),
+export default class AdComponent extends Component {
+  @service router;
 
-  currentCategoryId: or(
+  @or(
     "router.currentRoute.attributes.category.id",
     "router.currentRoute.parent.attributes.category_id"
-  ),
+  )
+  currentCategoryId;
 
-  currentCategorySlug: or(
+  @or(
     "router.currentRoute.attributes.category.slug",
     "router.currentRoute.parent.attributes.category.slug"
-  ),
+  )
+  currentCategorySlug;
 
   // Server needs to compute this in case hidden tags are being used.
-  topicTagsDisableAds: alias(
-    "router.currentRoute.parent.attributes.tags_disable_ads"
-  ),
+  @alias("router.currentRoute.parent.attributes.tags_disable_ads")
+  topicTagsDisableAds;
 
-  isRestrictedCategory: or(
+  @or(
     "router.currentRoute.attributes.category.read_restricted",
     "router.currentRoute.parent.attributes.category.read_restricted"
-  ),
+  )
+  isRestrictedCategory;
 
   @discourseComputed(
     "router.currentRoute.attributes.__type",
@@ -38,12 +40,12 @@ export default Component.extend({
     if (type === "tag" && tag) {
       return tag;
     }
-  },
+  }
 
   @discourseComputed("router.currentRoute.parent.attributes.archetype")
   isPersonalMessage(topicType) {
     return topicType === "private_message";
-  },
+  }
 
   @discourseComputed
   showToGroups() {
@@ -52,7 +54,7 @@ export default Component.extend({
     }
 
     return this.currentUser.show_to_groups;
-  },
+  }
 
   @discourseComputed(
     "currentCategoryId",
@@ -82,13 +84,13 @@ export default Component.extend({
       (!isRestrictedCategory ||
         !this.siteSettings.no_ads_for_restricted_categories)
     );
-  },
+  }
 
   isNthPost(n) {
     return isNthPost(n, this.get("postNumber"));
-  },
+  }
 
   isNthTopicListItem(n) {
     return isNthTopicListItem(n, this.get("indexNumber"));
-  },
-});
+  }
+}

assets/javascripts/discourse/components/ad-slot.js

@@ -1,6 +1,7 @@
 import EmberObject from "@ember/object";
 import { service } from "@ember/service";
 import { isBlank } from "@ember/utils";
+import { tagName } from "@ember-decorators/component";
 import discourseComputed from "discourse-common/utils/decorators";
 import AdComponent from "discourse/plugins/discourse-adplugin/discourse/components/ad-component";
 import {
@@ -173,9 +174,9 @@ export function slotContenders(
   return types;
 }
 
-export default AdComponent.extend({
-  router: service(),
-  tagName: "",
+@tagName("")
+export default class AdSlot extends AdComponent {
+  @service router;
 
   /**
    * For a given ad placement and optionally a post number if in between posts,
@@ -190,7 +191,7 @@ export default AdComponent.extend({
       indexNumber,
       postNumber
     );
-  },
+  }
 
   /**
    * Returns a list of the names of ad components that should be rendered
@@ -238,5 +239,5 @@ export default AdComponent.extend({
     }
 
     return networkNames;
-  },
-});
+  }
+}