Move sub shelves view to userShelves & fix display

app/views/shelves/controller.js

@@ -27,11 +27,13 @@ export class ShelvesController extends ViewController {
   }
 
   getUserShelves () {
-    return [
+    return Promise.resolve([
       {id:1,name:'Test Shelf',isDeletable:false,isPublilc:false},
-      {id:1,name:'Deletable Shelf',isDeletable:true,isPublilc:false},
-      {id:1,name:'Public Shelf',isDeletable:true,isPublilc:true},
-    ];
+      {id:2,name:'Deletable Shelf',isDeletable:true,isPublilc:false},
+      {id:3,name:'Public Shelf',isDeletable:true,isPublilc:true},
+    ]).then(shelves => {
+      this.state.myShelves = shelves;
+    });
     // return fetch('/api/shelves/get').then(response => response.json);
   }
 }

app/views/shelves/index.js

@@ -2,7 +2,7 @@ import html from 'choo/html';
 
 import { ShelvesController } from './controller';  // The controller for this view, where processing should happen.
 import { shelfView } from './shelf';
-import { shelvesView } from './shelves';
+import { userShelvesView } from './userShelves';
 
 // This is the view function that is exported and used in the view manager.
 export const shelvesView = (state, emit, i18n) => {
@@ -13,7 +13,7 @@ export const shelvesView = (state, emit, i18n) => {
   return [
     (controller.targetShelf !== null
       ? shelfView(controller, emit)
-      : shelvesView(controller, emit)
+      : userShelvesView(controller, emit)
     ),
   ];
 }

app/views/shelves/shelves/editModal.js

@@ -1,12 +0,0 @@
-import html from 'choo/html';
-
-export const editModal = (shelf, shelvesController) => {
-  const { __ } = shelvesController.i18n;
-  
-  // Should add a scale of publicity: private, friends only, friends & followers, public
-  return [
-    html`<article>
-      <p>To Do</p>
-    </article>`,
-  ];
-}

app/views/shelves/userShelves/editModal.js

@@ -0,0 +1,29 @@
+import html from 'choo/html';
+
+import { modal } from '../../partials/modal';
+
+export const editModal = (shelf, shelvesController) => {
+  const { __ } = shelvesController.i18n;
+
+  const modalId = `editShelf${shelf.id}`;
+  
+  // Should add a scale of publicity: private, friends only, friends & followers, public
+  const modalContent = html`<article>
+    <p>To Do</p>
+  </article>`;
+
+  return modal(modalId, shelvesController, modalContent, {
+    buttonHTML: html`<label for=${modalId} class="small pseudo button">
+      ${__('interaction.edit')} <i class="icon-edit"></i>
+    </label>`,
+    headerText: `${__('shelves.edit.editing')}: ${shelf.name}`,
+    footerHTML: html`<footer>
+      <button>
+        ${__('shelves.edit.save')}
+      </button>
+      <label for=${modalId} class="button dangerous">
+        ${__('interaction.close')}
+      </label>
+    </footer>`,
+  });
+}

app/views/shelves/userShelves/index.js

@@ -1,7 +1,7 @@
 import html from 'choo/html';
-import modal from '../partials/modal';
+import { editModal } from './editModal';
 
-export const shelvesView = (shelvesController, emit) => {
+export const userShelvesView = (shelvesController, emit) => {
   const { __ } = shelvesController.i18n;
 
   if (!shelvesController.isLoggedIn) {
@@ -30,7 +30,11 @@ export const shelvesView = (shelvesController, emit) => {
   return [
     html`<section>
       <h2>${__('shelves.title')}</h2>
-      ${controller.state.myShelves.map(shelf => {
+      ${shelvesController.state.myShelves.map(shelf => {
+        const deleteButton = html`<button class="small pseudo">
+          ${__('interaction.delete')} <i class="icon-delete"></i>
+        </button>`;
+        
         return html`<article class="card">
           <header>
             <h3>
@@ -38,26 +42,11 @@ export const shelvesView = (shelvesController, emit) => {
             </h3>
             ${shelf.isDeletable === true
             ? [
-              modal(`editShelf${shelf.id}`, shelvesController, editModal(shelf, shelvesController), {
-                buttonHTML: html`<button class="small pseudo pull-right tooltip-left" data-tooltip=${__('interaction.edit')}>
-                  <i class="icon-edit"></i>
-                </button>`,
-                headerText: `${__('shelves.edit.editing')}: ${shelf.name}`,
-                footerHTML: html`<footer>
-                  <button>
-                    ${__('shelves.edit.save')}
-                  </button>
-                  <label for=${modalId} class="button dangerous">
-                    ${__('interaction.close')}
-                  </label>
-                </footer>`,
-              }),
-
-              html`<button class="small pseudo pull-right tooltip-left" data-tooltip=${__('interaction.delete')}>
-                <i class="icon-delete"></i>
-              </button>`,
+              editModal(shelf, shelvesController),
+              [deleteButton], // editModal outputs a modal, which returns an array, so any subsequent html items must also be in an array for Choo to handle it correctly.
             ]
-            : null}
+            : null
+            }
           </header>
         </article>`;
       })}