chore: Change components, routes, services, etc to native classes

.eslintrc.js

@@ -3,7 +3,8 @@ module.exports = {
   parser: 'babel-eslint',
   parserOptions: {
     ecmaVersion: 2017,
-    sourceType: 'module'
+    sourceType: 'module',
+    ecmaFeatures: { legacyDecorators: true },
   },
   plugins: [
     'ember',

app/components/account/application-section.js

@@ -1,47 +1,50 @@
-import Component from '@ember/component';
+import classic from 'ember-classic-decorator';
+import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
+import Component from '@ember/component';
 
-export default Component.extend({
-  torii: service(),
+@classic
+export default class ApplicationSection extends Component {
+  @service
+  torii;
 
-  isLoading: false,
+  isLoading = false;
 
-  actions: {
-    auth(provider) {
-      try {
-        if (provider === 'facebook') {
-          this.torii.open('facebook').then(authData => {
-            this.set('isLoading', true);
-            this.loader.load(`/auth/oauth/login/${  provider  }/${  authData.authorizationCode  }/?redirect_uri=${  authData.redirectUri}`)
-              .then(async response => {
-                let credentials = {
-                  'username' : response.email,
-                  'password' : response.facebook_login_hash
-                };
+  @action
+  auth(provider) {
+    try {
+      if (provider === 'facebook') {
+        this.torii.open('facebook').then(authData => {
+          this.set('isLoading', true);
+          this.loader.load(`/auth/oauth/login/${  provider  }/${  authData.authorizationCode  }/?redirect_uri=${  authData.redirectUri}`)
+            .then(async response => {
+              let credentials = {
+                'username' : response.email,
+                'password' : response.facebook_login_hash
+              };
 
-                let authenticator = 'authenticator:jwt';
-                this.session
-                  .authenticate(authenticator, credentials)
-                  .then(async() => {
-                    const tokenPayload = this.authManager.getTokenPayload();
-                    if (tokenPayload) {
-                      this.authManager.persistCurrentUser(
-                        await this.store.findRecord('user', tokenPayload.identity)
-                      );
-                      this.set('data', this.authManager.currentUser);
-                    }
+              let authenticator = 'authenticator:jwt';
+              this.session
+                .authenticate(authenticator, credentials)
+                .then(async() => {
+                  const tokenPayload = this.authManager.getTokenPayload();
+                  if (tokenPayload) {
+                    this.authManager.persistCurrentUser(
+                      await this.store.findRecord('user', tokenPayload.identity)
+                    );
+                    this.set('data', this.authManager.currentUser);
+                  }
 
-                    this.set('isLoading', false);
-                  });
-              });
-          });
-        }
-      } catch (error) {
-        this.notify.error(this.l10n.t(error.message), {
-          id: 'error_message'
+                  this.set('isLoading', false);
+                });
+            });
         });
-        this.set('isLoading', false);
       }
+    } catch (error) {
+      this.notify.error(this.l10n.t(error.message), {
+        id: 'error_message'
+      });
+      this.set('isLoading', false);
     }
   }
-});
+}

app/components/account/danger-zone.js

@@ -1,55 +1,60 @@
-import { computed } from '@ember/object';
+import classic from 'ember-classic-decorator';
+import { action, computed } from '@ember/object';
 import Component from '@ember/component';
 
-export default Component.extend({
-
-  isUserDeletable: computed('data.events', 'data.orders', function() {
+@classic
+export default class DangerZone extends Component {
+  @computed('data.events', 'data.orders')
+  get isUserDeletable() {
     if (this.data.events.length || this.data.orders.length) {
       return false;
     }
     return true;
-  }),
+  }
 
-  actions: {
-    openDeleteUserModal(id, email) {
-      this.setProperties({
-        'isUserDeleteModalOpen' : true,
-        'confirmEmail'          : '',
-        'userEmail'             : email,
-        'userId'                : id
-      });
-    },
-    openConfirmDeleteUserModal() {
-      this.setProperties({
-        'isUserDeleteModalOpen'        : false,
-        'confirmEmail'                 : '',
-        'isConfirmUserDeleteModalOpen' : true,
-        'checked'                      : false
-      });
-    },
-    deleteUser(user) {
-      this.set('isLoading', true);
-      user.destroyRecord()
-        .then(() => {
-          this.authManager.logout();
-          this.routing.transitionTo('index');
-          this.notify.success(this.l10n.t('Your account has been deleted successfully.'), {
-            id: 'account_Delete'
-          });
-        })
-        .catch(e => {
-          console.error('Error while deleting account', e);
-          this.notify.error(this.l10n.t('An unexpected error has occurred.'), {
-            id: 'account_del_error'
-          });
-        })
-        .finally(() => {
-          this.setProperties({
-            'isLoading'                    : false,
-            'isConfirmUserDeleteModalOpen' : false,
-            'checked'                      : false
-          });
+  @action
+  openDeleteUserModal(id, email) {
+    this.setProperties({
+      'isUserDeleteModalOpen' : true,
+      'confirmEmail'          : '',
+      'userEmail'             : email,
+      'userId'                : id
+    });
+  }
+
+  @action
+  openConfirmDeleteUserModal() {
+    this.setProperties({
+      'isUserDeleteModalOpen'        : false,
+      'confirmEmail'                 : '',
+      'isConfirmUserDeleteModalOpen' : true,
+      'checked'                      : false
+    });
+  }
+
+  @action
+  deleteUser(user) {
+    this.set('isLoading', true);
+    user.destroyRecord()
+      .then(() => {
+        this.authManager.logout();
+        this.routing.transitionTo('index');
+        this.notify.success(this.l10n.t('Your account has been deleted successfully.'), {
+          id: 'account_Delete'
         });
-    }
+      })
+      .catch(e => {
+        console.error('Error while deleting account', e);
+        this.notify.error(this.l10n.t('An unexpected error has occurred.'), {
+          id: 'account_del_error'
+        });
+      })
+      .finally(() => {
+        this.setProperties({
+          'isLoading'                    : false,
+          'isConfirmUserDeleteModalOpen' : false,
+          'checked'                      : false
+        });
+      });
   }
-});
+}

app/components/account/email-preferences-section.js

@@ -1,21 +1,23 @@
+import classic from 'ember-classic-decorator';
+import { action } from '@ember/object';
 import Component from '@ember/component';
 
-export default Component.extend({
-  actions: {
-    savePreference(emailPreference) {
-      emailPreference.save()
-        .then(() => {
-          this.notify.success(this.l10n.t('Email notifications updated successfully'), {
-            id: 'email_notif'
-          });
-        })
-        .catch(e => {
-          console.error('Error while updating email notifications.', e);
-          emailPreference.rollbackAttributes();
-          this.notify.error(this.l10n.t('An unexpected error occurred.'), {
-            id: 'email_error'
-          });
+@classic
+export default class EmailPreferencesSection extends Component {
+  @action
+  savePreference(emailPreference) {
+    emailPreference.save()
+      .then(() => {
+        this.notify.success(this.l10n.t('Email notifications updated successfully'), {
+          id: 'email_notif'
         });
-    }
+      })
+      .catch(e => {
+        console.error('Error while updating email notifications.', e);
+        emailPreference.rollbackAttributes();
+        this.notify.error(this.l10n.t('An unexpected error occurred.'), {
+          id: 'email_error'
+        });
+      });
   }
-});
+}

app/components/create-session-message.js

@@ -1,15 +1,24 @@
-import Component from '@ember/component';
+import { tracked } from '@glimmer/tracking';
+import classic from 'ember-classic-decorator';
 import { computed } from '@ember/object';
+import Component from '@ember/component';
 
-export default Component.extend({
+@classic
+export default class CreateSessionMessage extends Component {
+  @tracked isMessageVisible = true;
 
-  isMessageVisible  : true,
-  shouldShowMessage : computed('session.isAuthenticated', 'isMessageVisible', 'isNewSpeaker', 'isNewSession', function() {
+  @computed(
+    'session.isAuthenticated',
+    'isMessageVisible',
+    'isNewSpeaker',
+    'isNewSession'
+  )
+  get shouldShowMessage() {
     let speakerIDlength =  this.data.userSpeaker ? this.data.userSpeaker.toArray().length : 0;
     return this.session.isAuthenticated
           && this.isMessageVisible
           && !this.isNewSpeaker
           && this.isNewSession
           && (speakerIDlength > 0);
-  })
-});
+  }
+}

app/components/errors/forbidden-error.js

@@ -1,4 +1,5 @@
+import classic from 'ember-classic-decorator';
 import Component from '@ember/component';
 
-export default Component.extend({
-});
+@classic
+export default class ForbiddenError extends Component {}

app/components/errors/generic-error.js

@@ -1,4 +1,5 @@
+import classic from 'ember-classic-decorator';
 import Component from '@ember/component';
 
-export default Component.extend({
-});
+@classic
+export default class GenericError extends Component {}

app/components/errors/not-found.js

@@ -1,4 +1,5 @@
+import classic from 'ember-classic-decorator';
 import Component from '@ember/component';
 
-export default Component.extend({
-});
+@classic
+export default class NotFound extends Component {}

app/components/errors/server-error.js

@@ -1,4 +1,5 @@
+import classic from 'ember-classic-decorator';
 import Component from '@ember/component';
 
-export default Component.extend({
-});
+@classic
+export default class ServerError extends Component {}

app/components/event-card.js

@@ -1,12 +1,15 @@
+import classic from 'ember-classic-decorator';
+import { classNames } from '@ember-decorators/component';
+import { action, computed } from '@ember/object';
 import Component from '@ember/component';
-import { computed } from '@ember/object';
 import { forOwn } from 'lodash-es';
 import { pascalCase } from 'open-event-frontend/utils/string';
 
-export default Component.extend({
-  classNames: ['column'],
-
-  tags: computed('event.type', 'event.topic', 'event.subTopic', function() {
+@classic
+@classNames('column')
+export default class EventCard extends Component {
+  @computed('event.type', 'event.topic', 'event.subTopic')
+  get tags() {
     // Unfortunately, due to the extremely dynamic and stringy nature
     // of ember, the next line crashes on using object destructuring
     // and we don't have time and resources to chase down issues originating
@@ -19,16 +22,16 @@ export default Component.extend({
       }
     });
     return tags;
-  }),
+  }
 
-  actions: {
-    selectCategory(category, subCategory) {
-      this.set('category', (category === this.category && !subCategory) ? null : category);
-      this.set('subCategory', (!subCategory || subCategory === this.subCategory) ? null : subCategory);
-    },
+  @action
+  selectCategory(category, subCategory) {
+    this.set('category', (category === this.category && !subCategory) ? null : category);
+    this.set('subCategory', (!subCategory || subCategory === this.subCategory) ? null : subCategory);
+  }
 
-    selectEventType(eventType) {
-      this.set('eventType', eventType === this.eventType ? null : eventType);
-    }
+  @action
+  selectEventType(eventType) {
+    this.set('eventType', eventType === this.eventType ? null : eventType);
   }
-});
+}

app/components/event-invoice/billing-info.js

@@ -1,4 +1,5 @@
+import classic from 'ember-classic-decorator';
 import Component from '@ember/component';
 
-export default Component.extend({
-});
+@classic
+export default class BillingInfo extends Component {}

app/components/event-invoice/event-info.js

@@ -1,4 +1,5 @@
+import classic from 'ember-classic-decorator';
 import Component from '@ember/component';
 
-export default Component.extend({
-});
+@classic
+export default class EventInfo extends Component {}

app/components/event-invoice/invoice-summary.js

@@ -1,4 +1,5 @@
+import classic from 'ember-classic-decorator';
 import Component from '@ember/component';
 
-export default Component.extend({
-});
+@classic
+export default class InvoiceSummary extends Component {}

app/components/event-invoice/payee-info.js

@@ -1,4 +1,5 @@
+import classic from 'ember-classic-decorator';
 import Component from '@ember/component';
 
-export default Component.extend({
-});
+@classic
+export default class PayeeInfo extends Component {}

app/components/events/events-table.js

@@ -1,5 +1,7 @@
+import classic from 'ember-classic-decorator';
+import { classNames } from '@ember-decorators/component';
 import UiTable from 'open-event-frontend/components/ui-table-server';
 
-export default UiTable.extend({
-  classNames: ['ui', 'main-container']
-});
+@classic
+@classNames('ui', 'main-container')
+export default class EventsTable extends UiTable {}