diff --git a/app/views/search/controller.js b/app/views/search/controller.js index ca4043f..b8985ec 100644 --- a/app/views/search/controller.js +++ b/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) { diff --git a/app/views/search/index.js b/app/views/search/index.js index 55184f2..872d5ec 100644 --- a/app/views/search/index.js +++ b/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) => {

${__('search.header')}

-

+
+
+

+ ${controller.doneSearching + ? html`${__('search.results_header')} ${controller.state.lastSearch}` + : html`${__('search.loading')}` + } +

+
+

+ + ${!controller.doneSearching || controller.results.works < 1 ? [