Add "Reading" shelf to loggedIn home page

app/views/home/controller.js

@@ -10,6 +10,7 @@ class HomeController extends ViewController {
         recentUpdates: [],
       },
       loggedIn: {
+        readingShelfId: null,
         updates: [],  // statuses, ratings, and reviews from people you follow.
         interactions: [], // likes, comments, recommendations, etc.
       },

app/views/home/loggedIn.js

@@ -1,11 +1,47 @@
 const html = require('choo/html');
 
+const { ShelvesController } = require('../shelves/controller');
+
 const loggedInView = (homeController, emit) => {
   const { __ } = homeController.i18n;
 
+  const shelvesController = new ShelvesController(homeController.appState, homeController.appState.i18n);
+
+  const { readingShelfId } = homeController.state;
+  const readingShelf = readingShelfId && typeof shelvesController.state.loadedShelves[readingShelfId] !== 'undefined'
+    ? shelvesController.state.loadedShelves[readingShelfId]
+    : null;
+  console.log(readingShelf);
+
+  if (shelvesController.appState.isFrontend && shelvesController.state.myShelves.length <= 0) {
+    shelvesController.getUserShelves().then(() => {
+      const readingShelfId = shelvesController.state.myShelves.find(shelf => shelf.name === 'Reading').id;
+      console.log(readingShelfId);
+      homeController.state.readingShelfId = readingShelfId + '/';
+      console.log(homeController.state);
+      return shelvesController.getShelf(homeController.state.readingShelfId);
+    }).then(() => {
+      emit(shelvesController.appState.events.RENDER);
+    });
+  }
+
   return [
     html`<section>
       <h2>${__('home.logged_in.subtitle')}</h2>
+      <div class="card">
+        <header><h3>Reading</h3></header>
+        <footer>
+        ${
+          readingShelf === null
+          ? html`<i class="icon-loading animate-spin"></i>`
+          : readingShelf.shelfItems.map((shelfItem, shelfItemIndex) => {
+            return html`<div>
+                ${ shelfItem.title }
+              </div>`;
+          })
+        }
+        </footer>
+      </div>
       <div class="flex one two-700">
         <div>
           <div class="card">

app/views/shelves/controller.js

@@ -36,11 +36,15 @@ class ShelvesController extends ViewController {
     });
   }
 
+  getShelf (target) {
+    return fetch('/api/shelf/get/' + target).then(response => response.json()).then(shelf => {
+      this.state.loadedShelves[target] = shelf;
+    });
+  }
+
   getTargetShelf () {
     const target = this.targetShelf + '/' + (this.targetDomain !== null ? `${this.targetDomain}` : '');
-    return fetch('/api/shelf/get/' + target).then(response => response.json()).then(shelf => {
-      this.state.loadedShelves[this.targetShelf] = shelf;
-    });
+    return this.getShelf(target);
   }
 }