Create shelves view without adding to routes

app/views/shelves/controller.js

@@ -0,0 +1,37 @@
+import { ViewController } from '../controller';
+
+export class ShelvesController extends ViewController {
+  constructor(state, 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, 'shelves', {
+      openModal: null,  // state value for edit modals
+      myShelves: [],  // array of objects in sort order with name, id, and deletability.
+      loadedShelves: {},  // object key is shelf id with name and shelfItems
+    });
+
+    // 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.
+  }
+
+  get openModal () {
+    return this.state.openModal;
+  }
+  set openModal (modalId) {
+    this.state.openModal = modalId;
+  }
+
+  get targetShelf () {
+    return typeof this.appState.query.shelf !== 'undefined' ? parseInt(this.appState.query.shelf) : null;
+  }
+
+  getUserShelves () {
+    return [
+      {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},
+    ];
+    // return fetch('/api/shelves/get').then(response => response.json);
+  }
+}

app/views/shelves/index.js

@@ -0,0 +1,19 @@
+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';
+
+// This is the view function that is exported and used in the view manager.
+export const shelvesView = (state, emit, i18n) => {
+  const controller = new ShelvesController(state, i18n);
+
+  // Returning an array in a view allows non-shared parent HTML elements.
+  // This one doesn't have the problem right now, but it's good to remember.
+  return [
+    (controller.targetShelf !== null
+      ? shelfView(controller, emit)
+      : shelvesView(controller, emit)
+    ),
+  ];
+}

app/views/shelves/shelf.js

@@ -0,0 +1,11 @@
+import html from 'choo/html';
+
+export const shelfView = (homeController, emit) => {
+  const { __ } = homeController.i18n;
+
+  return [
+    html`<section>
+      <h2>To Do</h2>
+    </section>`,
+  ];
+}

app/views/shelves/shelves/editModal.js

@@ -0,0 +1,12 @@
+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/shelves/index.js

@@ -0,0 +1,66 @@
+import html from 'choo/html';
+import modal from '../partials/modal';
+
+export const shelvesView = (shelvesController, emit) => {
+  const { __ } = shelvesController.i18n;
+
+  if (!shelvesController.isLoggedIn) {
+    return [
+      html`<section>
+        <h2>${__('shelves.no_shelf_selected')}</h2>
+        <article class="card">
+          <header>
+            <p>${__('shelves.not_logged_in')}</p>
+          </header>
+          <footer>
+            <button>${__('global.menu_login')}</button>
+          </footer>
+        </article>
+      </section>`,
+    ];
+  }
+
+  if (shelvesController.state.myShelves.length <= 0) {
+    shelvesController.getUserShelves().then(result => {
+      emit('render');
+    });
+  }
+  
+  // Should add a scale of publicity: private, friends only, friends & followers, public
+  return [
+    html`<section>
+      <h2>${__('shelves.title')}</h2>
+      ${controller.state.myShelves.map(shelf => {
+        return html`<article class="card">
+          <header>
+            <h3>
+              <a href="/shelves?shelf=${shelf.id}">${shelf.name}</a>
+            </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>`,
+            ]
+            : null}
+          </header>
+        </article>`;
+      })}
+    </section>`,
+  ];
+}

server/routes/shelf.js

@@ -7,6 +7,19 @@ async function routes(fastify, options) {
     return false;
   });
 
+  fastify.post('/api/shelves/get', async (request, reply) => {
+    if (!request.isLoggedInUser) {
+      return reply.code(400).send({
+        error: true,
+        message: 'api.not_logged_in',
+      });
+    }
+
+    return request.user.getShelves({
+      attributes: ['id', 'name', 'isDeletable', 'isPublic'],
+    });
+  });
+
   fastify.post('/api/shelf/create', async (request, reply) => {
     if (!request.isLoggedInUser) {
       return reply.code(400).send({