feat: render pagination component

Author: LeoBorai

app/controllers/me/pending-invites.js

@@ -0,0 +1,30 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+
+import { reads } from 'macro-decorators';
+
+import { pagination } from '../../utils/pagination';
+
+export default class PendingInvitesController extends Controller {
+  queryParams = ['page', 'per_page', 'sort'];
+  @tracked page = '1';
+  @tracked per_page = 50;
+  @tracked sort = 'alpha';
+
+  @reads('model.meta.total') totalItems;
+  @pagination() pagination;
+
+  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';
+    }
+  }
+}

app/routes/me/pending-invites.js

@@ -5,6 +5,11 @@ import AuthenticatedRoute from '../-authenticated-route';
 export default class PendingInvitesRoute extends AuthenticatedRoute {
   @service store;
 
+  queryParams = {
+    page: { refreshModel: true },
+    sort: { refreshModel: true },
+  };
+
   model() {
     return this.store.findAll('crate-owner-invite');
   }

app/styles/me/pending-invites.module.css

@@ -1,5 +1,6 @@
 .list {
     background: white;
+    margin-bottom: 2rem;
 }
 
 .row {

app/templates/me/pending-invites.hbs

@@ -9,3 +9,5 @@
     <p local-class="row" data-test-empty-state>You don't seem to have any pending invitations.</p>
   {{/each}}
 </div>
+
+<Pagination @pagination={{this.pagination}} />