app: Migrate the versions page to a paginated list

This implement a paginated versions page. Instead of loading all
versions at once, it loads more with a "Load More" button using a
seek-based API.

Author: eth3lbert

app/controllers/crate/versions.js

@@ -1,21 +1,88 @@
 import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 
+import { dropTask } from 'ember-concurrency';
+import { alias } from 'macro-decorators';
+
+function defaultVersionsContext() {
+  return { data: [], next_page: undefined };
+}
+
 export default class SearchController extends Controller {
-  queryParams = ['sort'];
+  @service store;
 
+  queryParams = ['per_page', 'sort'];
   @tracked sort;
+  @tracked per_page = 100;
 
+  @tracked byDate;
+  @tracked bySemver;
   /** @type {import("../../models/crate").default} */
   @tracked crate;
 
+  @alias('versionsContext.data') data;
+  @alias('versionsContext.next_page') next_page;
+
+  constructor() {
+    super(...arguments);
+    this.reset();
+  }
+
   get currentSortBy() {
     return this.sort === 'semver' ? 'SemVer' : 'Date';
   }
 
+  get versionsContext() {
+    return this.sort === 'semver' ? this.bySemver : this.byDate;
+  }
+
   get sortedVersions() {
-    let { versionIdsBySemver, versionIdsByDate, loadedVersionsById: versions } = this.crate;
+    let { loadedVersionsById: versions } = this.crate;
+    return this.data.map(id => versions.get(id));
+  }
+
+  loadMoreTask = dropTask(async () => {
+    let { crate, data, next_page, per_page, sort, versionsContext } = this;
+    let query;
+
+    if (next_page) {
+      let params = new URLSearchParams(next_page);
+      params.set('name', crate.name);
+      query = Object.fromEntries(params.entries());
+    } else {
+      if (sort !== 'semver') {
+        sort = 'date';
+      }
+      query = {
+        name: crate.name,
+        sort,
+        per_page,
+      };
+    }
+    let versions = await this.store.query('version', query);
+    let meta = versions.meta;
+
+    let ids = versions.map(it => it.id);
+    if (sort === 'semver') {
+      this.bySemver = {
+        ...versionsContext,
+        data: data.concat(ids),
+        next_page: meta.next_page,
+      };
+    } else {
+      this.byDate = {
+        ...versionsContext,
+        data: data.concat(ids),
+        next_page: meta.next_page,
+      };
+    }
+    return versions;
+  });
 
-    return (this.sort === 'semver' ? versionIdsBySemver : versionIdsByDate).map(id => versions.get(id));
+  reset() {
+    this.crate = undefined;
+    this.byDate = defaultVersionsContext();
+    this.bySemver = defaultVersionsContext();
   }
 }

app/routes/crate/versions.js

@@ -2,11 +2,28 @@ import Route from '@ember/routing/route';
 import { waitForPromise } from '@ember/test-waiters';
 
 export default class VersionsRoute extends Route {
+  queryParams = {
+    sort: { refreshModel: true },
+  };
+
+  model(params) {
+    // we need a model() implementation that changes, otherwise the setupController() hook
+    // is not called and we won't reload the results if a new query string is used
+    return params;
+  }
+
   setupController(controller) {
     super.setupController(...arguments);
     let crate = this.modelFor('crate');
+    // reset when crate changes
+    if (crate && crate !== controller.crate) {
+      controller.reset();
+    }
     controller.set('crate', crate);
-    // TODO: Add error handling
-    waitForPromise(crate.loadVersionsTask.perform());
+    // Fetch initial data only if empty
+    if (controller.data.length === 0) {
+      // TODO: Add error handling
+      waitForPromise(controller.loadMoreTask.perform());
+    }
   }
 }

app/styles/crate/versions.module.css

@@ -26,3 +26,29 @@
         margin-top: var(--space-2xs);
     }
 }
+
+.load-more {
+    --shadow: 0 1px 3px light-dark(hsla(51, 90%, 42%, .35), #232321);
+
+    /* TODO: move to shared */
+    composes: load-more from '../../styles/dashboard.module.css';
+
+    border: 0;
+    padding: 0 var(--space-m);
+
+    button {
+        border-radius: var(--space-3xs);
+        box-shadow: var(--shadow);
+        cursor: pointer;
+        position: relative;
+    }
+
+    .loading-spinner {
+        display: inline-flex;
+        align-items: center;
+        position: absolute;
+        height: 100%;
+        top: 0;
+        margin-left: var(--space-2xs);
+    }
+}

app/templates/crate/versions.hbs

@@ -2,8 +2,8 @@
 
 <div local-class="results-meta">
   <span local-class="page-description" data-test-page-description>
-    All <strong>{{ this.crate.num_versions }}</strong>
-    versions of <strong>{{ this.crate.name }}</strong> since
+    <strong>{{ this.sortedVersions.length }}</strong> of <strong>{{ this.crate.num_versions }}</strong>
+    <strong>{{ this.crate.name }}</strong> versions since
     {{date-format this.crate.created_at 'PPP'}}
   </span>
 
@@ -23,3 +23,15 @@
     </li>
   {{/each}}
 </ul>
+{{#if this.next_page}}
+  <div local-class="load-more">
+    <button type="button" data-test-id="load-more" disabled={{this.loadMoreTask.isRunning}}
+      {{on "click" (perform this.loadMoreTask)}}
+    >
+      Load More
+      {{#if this.loadMoreTask.isRunning}}
+        <LoadingSpinner local-class="loading-spinner" />
+      {{/if}}
+    </button>
+  </div>
+{{/if}}

e2e/acceptance/crate.spec.ts

@@ -123,14 +123,19 @@ test.describe('Acceptance | crate page', { tag: '@acceptance' }, () => {
     await expect(page.locator('[data-test-heading] [data-test-crate-name]')).toHaveText('foo-bar');
   });
 
-  test('navigating to the all versions page', async ({ page, msw }) => {
+  test('navigating to the versions page', async ({ page, msw }) => {
     loadFixtures(msw.db);
 
     await page.goto('/crates/nanomsg');
     await page.click('[data-test-versions-tab] a');
 
     await expect(page.locator('[data-test-page-description]')).toHaveText(
-      /All 13\s+versions of nanomsg since\s+December \d+th, 2014/,
+      /10 of 13\s+nanomsg versions since\s+December \d+th, 2014/,
+    );
+
+    await page.getByTestId('load-more').click();
+    await expect(page.locator('[data-test-page-description]')).toHaveText(
+      /13 of 13\s+nanomsg versions since\s+December \d+th, 2014/,
     );
   });
 

tests/acceptance/crate-test.js

@@ -130,13 +130,16 @@ module('Acceptance | crate page', function (hooks) {
     assert.dom('[data-test-heading] [data-test-crate-name]').hasText('foo-bar');
   });
 
-  test('navigating to the all versions page', async function (assert) {
+  test('navigating to the versions page', async function (assert) {
     loadFixtures(this.db);
 
     await visit('/crates/nanomsg');
     await click('[data-test-versions-tab] a');
 
-    assert.dom('[data-test-page-description]').hasText(/All 13\s+versions of nanomsg since\s+December \d+th, 2014/);
+    assert.dom('[data-test-page-description]').hasText(/10 of 13\s+nanomsg versions since\s+December \d+th, 2014/);
+
+    await click('[data-test-id="load-more"]');
+    assert.dom('[data-test-page-description]').hasText(/13 of 13\s+nanomsg versions since\s+December \d+th, 2014/);
   });
 
   test('navigating to the reverse dependencies page', async function (assert) {