import Controller from '@ember/controller';
import { action, computed } from '@ember/object';
import { readOnly } from '@ember/object/computed';

import { pagination } from '../utils/pagination';

export default class CratesController extends Controller {
  queryParams = ['letter', 'page', 'per_page', 'sort'];
  letter = null;
  page = '1';
  per_page = 50;
  sort = 'alpha';
  alphabet = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'];

  @readOnly('model.meta.total') totalItems;
  @pagination() pagination;

  @computed('sort')
  get currentSortBy() {
    if (this.sort === 'downloads') {
      return 'All-Time Downloads';
    } else if (this.sort === 'recent-downloads') {
      return 'Recent Downloads';
    } else if (this.sort === 'recent-updates') {
      return 'Recent Updates';
    } else if (this.sort === 'new') {
      return 'Newly Added';
    } else {
      return 'Alphabetical';
    }
  }

  @action handleSelection(event) {
    this.set('letter', event.target.value);
  }
}

@@ -56,18 +56,8 @@
 tion
-, computed
  %7D f
@@ -86,24 +86,23 @@
 mport %7B 
-readOnly
+tracked
  %7D from 
@@ -107,29 +107,67 @@
 m '@
-ember/object/computed
+glimmer/tracking';%0A%0Aimport %7B reads %7D from 'macro-decorators
 ';%0A%0A
@@ -334,16 +334,25 @@
 rt'%5D;%0A  
+@tracked 
 letter =
@@ -360,16 +360,25 @@
 null;%0A  
+@tracked 
 page = '
@@ -383,16 +383,25 @@
  '1';%0A  
+@tracked 
 per_page
@@ -409,16 +409,25 @@
 = 50;%0A  
+@tracked 
 sort = '
@@ -494,12 +494,9 @@
 read
-Only
+s
 ('mo
@@ -557,28 +557,8 @@
 n;%0A%0A
-  @computed('sort')%0A
   ge

Use `macro-decorators` instead of computed properties