Add pagination to the "Pending Owner Invites" page

app/components/seek-pagination.hbs

@@ -0,0 +1,7 @@
+{{#if @pagination.nextPage}}
+  <nav local-class='seek-pagination' aria-label="Pagination navigation">
+    <LinkTo @query={{hash [email protected]}} local-class="next" rel="next" title="Goes to next page" data-test-pagination-next>
+      Next Page
+    </LinkTo>
+  </nav>
+{{/if}}

app/components/seek-pagination.module.css

@@ -0,0 +1,5 @@
+.seek-pagination {
+    text-align: center;
+    font-size: 90%;
+    margin-bottom: 20px;
+}

app/controllers/me/pending-invites.js

@@ -0,0 +1,10 @@
+import Controller from '@ember/controller';
+
+import { reads } from 'macro-decorators';
+
+import { pagination } from '../../utils/seek-pagination';
+
+export default class PendingInvitesController extends Controller {
+  @reads('model.meta.next_page') nextPage;
+  @pagination() pagination;
+}

app/routes/me/pending-invites.js

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

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>
+
+<SeekPagination @pagination={{this.pagination}} />

app/utils/seek-pagination.js

@@ -0,0 +1,12 @@
+import macro from 'macro-decorators';
+
+export function pagination() {
+  return macro(function () {
+    let { nextPage, totalItems } = this;
+
+    return {
+      nextPage,
+      totalItems,
+    };
+  });
+}

mirage/route-handlers/me.js

@@ -1,6 +1,7 @@
 import { Response } from 'miragejs';
 
 import { getSession } from '../utils/session';
+import { pageParams } from './-utils';
 
 export function register(server) {
   server.get('/api/v1/me', function (schema) {
@@ -98,13 +99,20 @@ export function register(server) {
     return { ok: true };
   });
 
-  server.get('/api/v1/me/crate_owner_invitations', function (schema) {
+  server.get('/api/v1/me/crate_owner_invitations', function (schema, request) {
     let { user } = getSession(schema);
     if (!user) {
       return new Response(403, {}, { errors: [{ detail: 'must be logged in to perform that action' }] });
     }
 
-    return schema.crateOwnerInvitations.where({ inviteeId: user.id });
+    const { start, end } = pageParams(request);
+    const invites = schema.crateOwnerInvitations.where({ inviteeId: user.id });
+
+    let response = this.serialize(invites.slice(start, end));
+
+    response.meta = { total: invites.length };
+
+    return response;
   });
 
   server.put('/api/v1/me/crate_owner_invitations/:crate_id', (schema, request) => {

mirage/serializers/crate-owner-invitation.js

@@ -24,7 +24,9 @@ export default BaseSerializer.extend({
     delete hash.id;
     delete hash.token;
 
-    hash.crate_id = Number(hash.crate_id);
+    // TODO: Check this further, `crate_id` are strings in the current fixtures
+    // when attempting to parse into number we will get `NaN`s here.
+    // hash.crate_id = Number(hash.crate_id);
 
     let crate = this.schema.crates.find(hash.crate_id);
     hash.crate_name = crate.name;

src/controllers/crate_owner_invitation.rs

@@ -20,7 +20,9 @@ pub fn list(req: &mut dyn RequestExt) -> EndpointResult {
     let user_id = auth.user_id();
 
     let PrivateListResponse {
-        invitations, users, ..
+        invitations,
+        users,
+        meta,
     } = prepare_list(req, auth, ListFilter::InviteeId(user_id))?;
 
     // The schema for the private endpoints is converted to the schema used by v1 endpoints.
@@ -47,6 +49,7 @@ pub fn list(req: &mut dyn RequestExt) -> EndpointResult {
     Ok(req.json(&json!({
         "crate_owner_invitations": crate_owner_invitations,
         "users": users,
+        "meta": meta,
     })))
 }
 
@@ -147,15 +150,12 @@ fn prepare_list(
         raw_invitations.pop();
 
         if let Some(last) = raw_invitations.last() {
-            let mut params = IndexMap::new();
-            params.insert(
-                "seek".into(),
-                crate::controllers::helpers::pagination::encode_seek((
-                    last.crate_id,
-                    last.invited_user_id,
-                ))?,
-            );
-            Some(req.query_with_params(params))
+            let seek_key = crate::controllers::helpers::pagination::encode_seek((
+                last.crate_id,
+                last.invited_user_id,
+            ))?;
+
+            Some(seek_key)
         } else {
             None
         }

tests/mirage/me/crate-owner-invitations/list-test.js

@@ -15,7 +15,7 @@ module('Mirage | GET /api/v1/me/crate_owner_invitations', function (hooks) {
 
     let response = await fetch('/api/v1/me/crate_owner_invitations');
     assert.equal(response.status, 200);
-    assert.deepEqual(await response.json(), { crate_owner_invitations: [] });
+    assert.deepEqual(await response.json(), { crate_owner_invitations: [], meta: { total: 0 } });
   });
 
   test('returns the list of invitations for the authenticated user', async function (assert) {
@@ -47,6 +47,7 @@ module('Mirage | GET /api/v1/me/crate_owner_invitations', function (hooks) {
     let response = await fetch('/api/v1/me/crate_owner_invitations');
     assert.equal(response.status, 200);
     assert.deepEqual(await response.json(), {
+      meta: { total: 0 },
       crate_owner_invitations: [
         {
           crate_id: Number(nanomsg.id),