keyword: Show error page if data loading fails

... or empty list if no crates match or keyword does not exist

Author: Turbo87

app/routes/keyword.js

@@ -1,22 +1,7 @@
-import { NotFoundError } from '@ember-data/adapter/error';
 import Route from '@ember/routing/route';
-import { inject as service } from '@ember/service';
 
 export default class KeywordRoute extends Route {
-  @service notifications;
-  @service router;
-  @service store;
-
-  async model({ keyword_id }) {
-    try {
-      return await this.store.find('keyword', keyword_id);
-    } catch (error) {
-      if (error instanceof NotFoundError) {
-        this.notifications.error(`Keyword '${keyword_id}' does not exist`);
-        return this.router.replaceWith('index');
-      }
-
-      throw error;
-    }
+  model({ keyword_id }) {
+    return keyword_id;
   }
 }

app/routes/keyword/index.js

@@ -2,16 +2,22 @@ import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 
 export default class KeywordIndexRoute extends Route {
+  @service router;
   @service store;
 
   queryParams = {
     page: { refreshModel: true },
     sort: { refreshModel: true },
   };
 
-  model(params) {
-    params.keyword = this.modelFor('keyword').id;
-    return this.store.query('crate', params);
+  async model(params, transition) {
+    let keyword = this.modelFor('keyword');
+    try {
+      return await this.store.query('crate', { ...params, keyword });
+    } catch (error) {
+      let title = `${keyword}: Failed to load crates`;
+      this.router.replaceWith('catch-all', { transition, error, title, tryAgain: true });
+    }
   }
 
   setupController(controller) {

app/templates/keyword/index.hbs

@@ -1,6 +1,6 @@
-{{page-title this.keyword.keyword ' - Keywords'}}
+{{page-title this.keyword ' - Keywords'}}
 
-<PageHeader @title="All Crates" @suffix="for keyword '{{this.keyword.keyword}}'"/>
+<PageHeader @title="All Crates" @suffix="for keyword '{{this.keyword}}'"/>
 
 <div local-class="results-meta">
   <ResultsCount

tests/routes/keyword-test.js

@@ -8,17 +8,20 @@ import { visit } from '../helpers/visit-ignoring-abort';
 module('Route | keyword', function (hooks) {
   setupApplicationTest(hooks);
 
-  test("shows an error message if the keyword can't be found", async function (assert) {
-    await visit('/keywords/unknown');
-    assert.equal(currentURL(), '/');
-    assert.dom('[data-test-notification-message]').hasText("Keyword 'unknown' does not exist");
+  test('shows an empty list if the keyword does not exist on the server', async function (assert) {
+    await visit('/keywords/foo');
+    assert.equal(currentURL(), '/keywords/foo');
+    assert.dom('[data-test-crate-row]').doesNotExist();
   });
 
   test('server error causes the error page to be shown', async function (assert) {
-    this.server.get('/api/v1/keywords/:keywordId', {}, 500);
+    this.server.get('/api/v1/crates', {}, 500);
 
-    await visit('/keywords/error');
-    assert.equal(currentURL(), '/keywords/error');
-    assert.dom('[data-test-error-message]').includesText('GET /api/v1/keywords/error returned a 500');
+    await visit('/keywords/foo');
+    assert.equal(currentURL(), '/keywords/foo');
+    assert.dom('[data-test-404-page]').exists();
+    assert.dom('[data-test-title]').hasText('foo: Failed to load crates');
+    assert.dom('[data-test-go-back]').doesNotExist();
+    assert.dom('[data-test-try-again]').exists();
   });
 });