Add a reload button to search

app/views/search/controller.js

@@ -1,7 +1,7 @@
 import { ViewController } from '../controller';
 
 export class SearchController extends ViewController {
-  constructor(state, i18n) {
+  constructor(state, emit, i18n) {
     // Super passes state, view name, and default state to ViewController,
     // which stores state in this.appState and the view controller's state to this.state
     super(state, i18n, 'search', {
@@ -15,6 +15,8 @@ export class SearchController extends ViewController {
       openModal: null,
     });
 
+    this.emit = emit;
+
     // If using controller methods in an input's onchange or onclick instance,
     // either bind the class's 'this' instance to the method first...
     // or use `onclick=${() => controller.submit()}` to maintain the 'this' of the class instead.
@@ -43,18 +45,20 @@ export class SearchController extends ViewController {
   search() {
     if (this.hasQuery) {
       this.state.done = false;
-      this.state.lastSearch = this.appState.query.for;
-
-      const searchTerm = this.appState.query.for.trim();
-
-      return fetch(`/api/search?for=${searchTerm}&lang=${this.appState.language}`)
-        .then(response => response.json())
-        .then(responseJSON => {
-          this.state.results = responseJSON;
-          this.state.done = true;
-        });
+      this.emit('render', () => {
+        this.state.lastSearch = this.appState.query.for;
+  
+        const searchTerm = this.appState.query.for.trim();
+  
+        return fetch(`/api/search?for=${searchTerm}&lang=${this.appState.language}`)
+          .then(response => response.json())
+          .then(responseJSON => {
+            this.state.results = responseJSON;
+            this.state.done = true;
+          })
+          .then(() => this.emit('render'));
+      });
     }
-    return Promise.resolve();
   }
 
   getCovers(inventaireURI) {

app/views/search/index.js

@@ -5,13 +5,11 @@ import { resultDetails } from './resultDetails';
 
 // This is the view function that is exported and used in the view manager.
 export const searchView = (state, emit, i18n) => {
-  const controller = new SearchController(state, i18n);
+  const controller = new SearchController(state, emit, i18n);
   const { __ } = controller.i18n;
 
   if (controller.state.lastSearch !== state.query.for) {
-    controller.search().then(() => {
-      emit('render');
-    });
+    controller.search();
   }
 
   // Returning an array in a view allows non-shared parent HTML elements.
@@ -21,12 +19,26 @@ export const searchView = (state, emit, i18n) => {
       <h1 class="title">${__('search.header')}</h1>
       
       <article>
-        <h2>
+        <div class="flex">
+          <div class="two-third-700">
+            <h2>
+              ${controller.doneSearching
+                ? html`<span>${__('search.results_header')}</span> <code>${controller.state.lastSearch}</code>`
+                : html`<span>${__('search.loading')}</span>`
+              }
+            </h2>
+          </div>
+          <div class="one-third-700">
           ${controller.doneSearching
-            ? html`<span>${__('search.results_header')}</span> <code>${controller.state.lastSearch}</code>`
-            : html`<i class="icon-loading animate-spin"></i> <span>${__('search.loading')}</span>`
+            ? html`<span class="pull-right" data-tooltip=${__('interaction.reload')}>
+              <button class="pseudo" onclick=${() => controller.search()}>
+                <i class="icon-reload"></i>
+              </button>
+            </span>`
+            : html`<i class="icon-loading animate-spin"></i>`
           }
-        </h2>
+          </div>
+        </div>
 
         ${!controller.doneSearching || controller.results.works < 1
           ? [