Show shelves when clicking add from search

app/views/search/controller.js

@@ -1,4 +1,5 @@
 import { ViewController } from '../controller';
+import { ShelvesController } from '../shelves/controller';
 
 export class SearchController extends ViewController {
   constructor(state, emit, i18n) {
@@ -13,6 +14,7 @@ export class SearchController extends ViewController {
       done: true,
       results: [],
       openModal: null,
+      showShelves: false,
     });
 
     this.emit = emit;
@@ -44,6 +46,19 @@ export class SearchController extends ViewController {
     return this.state.openModal;
   }
 
+  get hasFetchedShelves() {
+    return typeof this.appState.viewStates.shelves !== 'undefined'
+    && typeof this.appState.viewStates.shelves.myShelves !== 'undefined'
+    && this.appState.viewStates.shelves.myShelves.length > 0;
+  }
+
+  get shelves() {
+    if (this.hasFetchedShelves) {
+      return this.appState.viewStates.shelves.myShelves;
+    }
+    return [];
+  }
+
   set openModal(modalId) {
     this.state.openModal = modalId;
   }
@@ -85,4 +100,16 @@ export class SearchController extends ViewController {
 
     return Promise.resolve();
   }
+
+  async showShelves () {
+    const shelfController = new ShelvesController(this.appState, this.i18n);
+    if (!this.hasFetchedShelves) {
+      console.log('getting');
+      await shelfController.getUserShelves();
+      console.log('got');
+    }
+    console.log(shelfController.myShelves);
+    this.showShelves = true;
+    this.emit('render');
+  }
 }

app/views/search/resultDetails.js

@@ -86,10 +86,13 @@ export const resultDetails = (searchController, result, emit = () => {}) => {
     </div>
     <div class="sixth-700">
       <p>
-        <button class="success">
+        <button class="success" onclick=${() => searchController.showShelves()}>
           <i class="icon-plus"></i> <span>${__('interaction.add')}</span>
         </button>
       </p>
+      ${!searchController.showShelves ? null : html`<ul>${searchController.shelves.map(shelf => {
+        return html`<li><a href="javascript:void(0)">${shelf.name}</a></li>`;
+      })}</ul>`}
       <p>
         <a class="small button" href=${result.link} target="_blank">
           ${__('search.see_book_details')}