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

package.json

@@ -20,38 +20,38 @@
   },
   "devDependencies": {
     "choo-devtools": "^3.0.3",
-    "concurrently": "^5.3.0",
-    "faker": "^5.1.0",
-    "onchange": "^7.0.2",
+    "concurrently": "^6.0.2",
+    "faker": "^5.5.3",
+    "onchange": "^7.1.0",
     "rimraf": "^3.0.1",
     "sequelize-erd": "https://github.com/Alamantus/sequelize-erd.git"
   },
   "dependencies": {
-    "autoprefixer": "^9.8.6",
+    "autoprefixer": "^10.2.5",
     "babel-polyfill": "^6.26.0",
     "choo": "^7.1.0",
-    "cross-env": "^7.0.2",
-    "fastify": "^3.4.1",
-    "fastify-caching": "^6.0.1",
-    "fastify-compress": "^3.3.0",
-    "fastify-cookie": "^4.1.0",
-    "fastify-helmet": "^5.0.2",
-    "fastify-jwt": "^2.1.3",
-    "fastify-plugin": "^2.3.4",
-    "fastify-static": "^3.2.0",
+    "cross-env": "^7.0.3",
+    "fastify": "^3.14.2",
+    "fastify-caching": "^6.1.0",
+    "fastify-compress": "^3.4.2",
+    "fastify-cookie": "^5.3.0",
+    "fastify-helmet": "^5.3.1",
+    "fastify-jwt": "^2.4.0",
+    "fastify-plugin": "^3.0.0",
+    "fastify-static": "^4.0.1",
     "make-promises-safe": "^5.1.0",
-    "marked": "^1.1.1",
-    "mysql2": "^2.1.0",
+    "marked": "^2.0.3",
+    "mysql2": "^2.2.5",
     "node-fetch": "^2.6.1",
-    "nodemailer": "^6.4.11",
-    "parcel-bundler": "^1.12.4",
+    "nodemailer": "^6.5.0",
+    "parcel-bundler": "^1.12.5",
     "parcel-plugin-goodie-bag": "^2.0.0",
-    "pg": "^8.3.3",
+    "pg": "^8.6.0",
     "pg-hstore": "^2.3.3",
-    "picnic": "^6.5.3",
-    "sass": "^1.26.10",
-    "sequelize": "^6.3.5",
-    "sharp": "^0.26.0",
-    "sqlite3": "^5.0.0"
+    "picnic": "^6.5.5",
+    "sass": "^1.32.10",
+    "sequelize": "^6.6.2",
+    "sharp": "^0.28.1",
+    "sqlite3": "^5.0.2"
   }
 }

server/index.js

@@ -81,7 +81,7 @@ if (!fastify.siteConfig.email_host || !fastify.siteConfig.email_username) {
 }
 
 // Every request, check to see if a valid token exists
-fastify.addHook('onRequest', async (request, reply, done) => {
+fastify.addHook('onRequest', async (request, reply) => {
   request.isLoggedInUser = false;
   if (typeof request.cookies.token !== 'undefined' && fastify.jwt.verify(request.cookies.token)) {
     const { id } = fastify.jwt.verify(request.cookies.token);
@@ -105,8 +105,6 @@ fastify.addHook('onRequest', async (request, reply, done) => {
   // Opt out of Google Chrome tracking everything you do.
   // For more info, see: https://plausible.io/blog/google-floc
   reply.header('Permissions-Policy', 'interest-cohort=()');
-
-  done();
 });
 
 // Store i18n files in fastify object and register locales routes