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')}

app/views/shelves/shelf.js

@@ -71,7 +71,7 @@ export const shelfView = (shelvesController, emit) => {
             ${__('shelves.owned_by')}
             ${shelf.user === null
               ? __('shelves.you')
-              : `<a href="/profile?user=${shelf.user.handle}" title=${shelf.user.handle}>${shelf.user.name}</a>`}
+              : html`<a href="/profile?user=${shelf.user.handle}" title="${shelf.user.handle}">${shelf.user.name}</a>`}
             </span>
         </div>
         <div class="third sixth-700">
@@ -87,9 +87,7 @@ export const shelfView = (shelvesController, emit) => {
         return html`<article class="card">
           <footer>
             <div class="flex one twelve-700">
-              <div class="full sixth-700">
-                <img src=${shelfItem.coverURL} alt="cover ${shelfItem.coverEdition}" />
-              </div>
+              <img class="full sixth-700" src=${shelfItem.coverURL} alt="cover ${shelfItem.coverEdition}" />
               <div class="full half-700">
                 <h3>${shelfItem.title}</h3>
                 <span>${shelfItem.author}</span>

server/i18n/locales/en/ui.json

@@ -7,9 +7,11 @@
     "menu_login": "Log In / Create Account",
     "menu_account": "My Profile",
     "menu_logout": "Log Out",
+    "menu_shelves": "My Shelves",
     "footer_repo": "Repo",
     "footer_chat": "Chat",
-    "change_language": "Language"
+    "change_language": "Language",
+    "error": "Oops, something went wrong!"
   },
   "home": {
     "logged_out": {
@@ -91,6 +93,17 @@
     "average_rating": "Average Rating",
     "reviews_written": "Total Reviews Written"
   },
+  "shelves": {
+    "title": "My Shelves",
+    "loading": "Loading Shelf...",
+    "you": "You",
+    "owned_by": "Owned By",
+    "no_shelf_selected": "No shelf selected.",
+    "not_logged_in": "You're not logged in."
+  },
+  "review": {
+    "review_of": "Review of"
+  },
   "api": {
     "not_logged_in": "You are not logged in.",
     "already_logged_in": "You are already logged in! You cannot create an account or log in again.",
@@ -127,6 +140,11 @@
         "invalid_token": "User not logged in: The stored token is not a valid token.",
         "renewed_token": "User logged in, and the token has been renewed."
       }
+    },
+    "shelf": {
+      "get": {
+        "invalid_id": "Invalid ID specified"
+      }
     }
   }
 }