Style search page results

app/i18n/locales/en.json

@@ -12,6 +12,9 @@
     "login_button": "Log In!"
   },
   "search": {
-    "header": "Search"
+    "header": "Search",
+    "people_header": "People",
+    "series_header": "Series",
+    "books_header": "Books"
   }
 }

app/styles/_search.scss

@@ -0,0 +1,6 @@
+.search-result {
+  .search-image {
+    width: 100%;
+    max-width: 300px;
+  }
+}

app/styles/index.scss

@@ -40,3 +40,6 @@
 
 // Custom global styling
 @import './picnic-customizations/custom';
+
+// View styling
+@import './search';

app/views/search/controller.js

@@ -7,7 +7,11 @@ export class SearchController extends ViewController {
     super(state, 'search', {
       lastSearch: undefined,
       done: false,
-      results: [],
+      results: {
+        humans: [],
+        series: [],
+        works: [],
+      },
     });
 
     // If using controller methods in an input's onchange or onclick instance,
@@ -15,8 +19,12 @@ export class SearchController extends ViewController {
     // or use `onclick=${() => controller.submit()}` to maintain the 'this' of the class instead.
   }
 
+  get doneSearching() {
+    return this.state.done;
+  }
+
   get results() {
-    return [];
+    return this.state.results;
   }
 
   get hasQuery() {
@@ -33,7 +41,6 @@ export class SearchController extends ViewController {
       return fetch(`/api/search?for=${searchTerm}&lang=${this.appState.language}`)
         .then(response => response.json())
         .then(responseJSON => {
-          console.log(responseJSON);
           this.state.results = responseJSON;
           this.state.done = true;
         });

app/views/search/index.js

@@ -19,24 +19,70 @@ export const searchView = (state, emit) => {
   // This one doesn't have the problem right now, but it's good to remember.
   return [
     html`<section>
-      <h2 class="subtitle">${i18n.__('search.header')}</h2>
+      <h1 class="title">${i18n.__('search.header')}</h1>
 
       <article>
-        ${controller.state.done ? 'Done searching' : 'Loading...'}
+        ${controller.doneSearching ? 'Done searching' : 'Loading...'}
 
-        ${controller.results.map(result => {
-          return html`<div class="card">
-            <header>
-              ${result.covers.map(cover => {
-                return html`<img src=${cover} />`;
-              })}
-              <h1 class="title">${result.title}</h1>
-              ${result.authors.map(author => {
-                return html`<h2 class="subtitle">${author}</h2>`;
-              })}
-            </header>
-          </div>`;
-        })}
+        ${controller.results.works < 1
+        ? null
+        : [
+          html`<h2>${i18n.__('search.books_header')}</h2>`,
+          controller.results.works.map(result => {
+            return html`<div class="flex search-result">
+              <div class="sixth-500">
+                ${result.image ? html`<img src=${result.image.url} class="search-image">` : null}
+              </div>
+              <div class="half-500">
+                <h3 class="title">${result.name}</h3>
+                ${result.description ? html`<h4 class="subtitle">${result.description}</h4>` : null}
+              </div>
+              <div class="third-500">
+                <a href=${result.link} target="_blank">See details on Inventaire</a>
+              </div>
+            </div>`;
+          }),
+        ]}
+
+        ${controller.results.series.length < 1
+        ? null
+        : [
+          html`<h2>${i18n.__('search.series_header')}</h2>`,
+          controller.results.series.map(result => {
+            return html`<div class="flex search-result">
+              <div class="sixth-500">
+                ${result.image ? html`<img src=${result.image.url} class="search-image">` : null}
+              </div>
+              <div class="half-500">
+                <h3 class="title">${result.name}</h3>
+                ${result.description ? html`<h4 class="subtitle">${result.description}</h4>` : null}
+              </div>
+              <div class="third-500">
+                <a href=${result.link} target="_blank">See details on Inventaire</a>
+              </div>
+            </div>`;
+          }),
+        ]}
+
+        ${controller.results.humans.length < 1
+        ? null
+        : [
+          html`<h2>${i18n.__('search.people_header')}</h2>`,
+          controller.results.humans.map(result => {
+            return html`<div class="flex search-result">
+              <div class="sixth-500">
+                ${result.image ? html`<img src=${result.image.url} class="search-image">` : null}
+              </div>
+              <div class="half-500">
+                <h3 class="title">${result.name}</h3>
+                ${result.description ? html`<h4 class="subtitle">${result.description}</h4>` : null}
+              </div>
+              <div class="third-500">
+                <a href=${result.link} target="_blank">See details on Inventaire</a>
+              </div>
+            </div>`;
+          }),
+        ]}
       </article>
     </section>`,
   ];

server/controllers/search.js

@@ -124,7 +124,7 @@ class SearchController {
               : null
             ),
             image: (
-              hasImage && typeof human.image.url !== 'undefined'
+              hasImage && typeof work.image.url !== 'undefined'
               ? human.image
               : null
             ),