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
- ? html`${__('search.results_header')} ${controller.state.lastSearch}
`
- : html` ${__('search.loading')}`
+ ? html`
+
+ `
+ : html``
}
-
+
+
${!controller.doneSearching || controller.results.works < 1
? [