Hide reviews UI in Search if no reviews available

- Add onchange to id changes to server files

.gitignore

@@ -9,3 +9,4 @@ config.json
 *.sqlite*
 *.db
 .dbversion
+.DS_Store

app/views/search/index.js

@@ -16,7 +16,6 @@ export const searchView = (state, emit, 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 [
     html`<h1 class="title">${__('search.header')}</h1>`,
 
@@ -45,7 +44,7 @@ export const searchView = (state, emit, i18n) => {
 
     // Search Options Section
     html`<section class="flex one two-700">
-      <div>
+      ${/*<div>
         ${modal('searchSourceInfo', controller, [
           html`<p>
             ${__('search.search_source.help.text')}
@@ -91,7 +90,8 @@ export const searchView = (state, emit, i18n) => {
             </option>
           </select>
         </label>
-      </div>
+      </div>*/'' // Temporarily comment out the source chooser so I can focus on just Inventaire
+      }
       <div>
           ${__('search.search_by.label')}<br>
 

app/views/search/resultDetails.js

@@ -8,21 +8,28 @@ export const resultDetails = (searchController, result, emit = () => {}) => {
   const { __ } = searchController.i18n;
   const modalId = `result_${result.uri}`;
 
+  const hasReviews = typeof result.averageRating !== 'undefined' && typeof result.numberOfReviews !== 'undefined';
+
   const buttonHTML = html`<label for=${modalId} class="pseudo button">
-    <span data-tooltip="${__('interaction.average_rating')}: ${result.averageRating}">
+    ${!hasReviews
-      ${starRating(result.averageRating)}
+      ? __('search.no_reviews')
-    </span>  
+      : html`<span data-tooltip="${__('interaction.average_rating')}: ${result.averageRating}">
-    <span style="margin-left:10px;" data-tooltip=${__('interaction.reviews_written')}>
+        ${starRating(result.averageRating)}
-      <span style="margin-right:8px;"><i class="icon-chat"></i></span>
+      </span>  
-      <span>${result.numberOfReviews}</span>
+      <span style="margin-left:10px;" data-tooltip=${__('interaction.reviews_written')}>
-    </span>
+        <span style="margin-right:8px;"><i class="icon-chat"></i></span>
+        <span>${result.numberOfReviews}</span>
+      </span>`
+    }
+    <br />
+    <small>${__('search.click_for_details')}</small>
   </label>`;
   
   const tabNames = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen', 'twenty'];
   
   const modalContent = html`<article class="flex">
     <div class="sixth-700" style="text-align:center;">
-      <h4>Covers</h4>
+      <h4>${__('search.covers')}</h4>
       ${typeof result.covers === 'undefined'
         ? html`<span style="font-size:3em;"><i class="icon-loading animate-spin"></i></span>`
         : html`<div class="tabs ${typeof tabNames[result.covers.length - 1] !== 'undefined' ? tabNames[result.covers.length - 1] : null}">
@@ -55,32 +62,33 @@ export const resultDetails = (searchController, result, emit = () => {}) => {
       }
     </div>
     <div class="two-third-700">
-      <h4>${__('interaction.average_rating')}</h4>
+      ${!hasReviews
-      <span data-tooltip="${result.averageRating}">${starRating(result.averageRating)}</span>
+        ? html`<h4>${__('search.no_reviews')}</h4>`
+        : html`<h4>${__('interaction.average_rating')}</h4>
+        <span data-tooltip="${result.averageRating}">${starRating(result.averageRating)}</span>
 
-      <div class="flex">
+        <div class="flex">
-        <div>
+          <div>
-          <h4>Top Reviews</h4>
+            <h4>Top Reviews</h4>
+          </div>
+          <div>
+            <a href="/book/${result.uri}" class="small button">
+              <span style="margin-right:8px;"><i class="icon-chat"></i></span>
+              <span>${result.numberOfReviews}</span>
+              <span>${__('search.see_interaction_details')}</span>
+            </a>
+          </div>
         </div>
-        <div>
+        ${(typeof result.reviews !== 'undefined' && Array.isArray(result.reviews) ? result.reviews : []).map(review => {
-          <a href="/book/${result.uri}" class="small button">
+          return reviewCard(searchController, review);
-            <span style="margin-right:8px;"><i class="icon-chat"></i></span>
+        })}`
-            <span>${result.numberOfReviews}</span>
+      }
-            <span>${__('search.see_interaction_details')}</span>
-          </a>
-        </div>
-      </div>
-      ${result.reviews.map(review => {
-        return reviewCard(searchController, review);
-      })}
     </div>
     <div class="sixth-700">
       <p>
-        <span data-tooltip=${__('interaction.add')}>
+        <button class="success">
-          <button class="success">
+          <i class="icon-plus"></i> <span>${__('interaction.add')}</span>
-            <i class="icon-plus"></i>
+        </button>
-          </button>
-        </span>
       </p>
       <p>
         <a class="small button" href=${result.link} target="_blank">

package.json

@@ -7,9 +7,10 @@
   "author": "Robbie Antenesse <dev@alamantus.com>",
   "license": "MIT",
   "scripts": {
-    "dev": "concurrently --kill-others \"npm run watch-js\" \"npm run serve\"",
+    "dev": "concurrently --kill-others \"npm run watch-app\" \"npm run watch-server\"",
     "start": "npm run build && cross-env NODE_ENV=production npm run serve",
-    "watch-js": "parcel watch app/index.html --out-dir public --no-hmr --no-cache",
+    "watch-app": "parcel watch app/index.html --out-dir public --no-hmr --no-cache",
+    "watch-server": "onchange -i -k \"server/**/*.js*\" -- npm run serve",
     "serve": "node server/index.js",
     "build": "npm run process-images && npm run bundle",
     "bundle": "parcel build app/index.html --out-dir public --no-source-maps --no-cache",
@@ -21,6 +22,7 @@
     "choo-devtools": "^3.0.3",
     "concurrently": "^5.1.0",
     "faker": "^4.1.0",
+    "onchange": "^7.0.2",
     "rimraf": "^3.0.1",
     "sequelize-erd": "https://github.com/Alamantus/sequelize-erd.git"
   },
@@ -38,18 +40,18 @@
     "fastify-plugin": "^1.6.0",
     "fastify-static": "^2.6.0",
     "make-promises-safe": "^5.1.0",
-    "marked": "^0.8.0",
+    "marked": "^1.1.0",
     "mysql2": "^2.1.0",
     "node-fetch": "^2.6.0",
     "nodemailer": "^6.4.2",
     "parcel-bundler": "^1.12.4",
     "parcel-plugin-goodie-bag": "^2.0.0",
-    "pg": "^7.18.1",
+    "pg": "^8.2.1",
     "pg-hstore": "^2.3.3",
     "picnic": "^6.5.2",
     "sass": "^1.25.0",
     "sequelize": "^5.21.3",
-    "sharp": "^0.24.0",
+    "sharp": "^0.25.4",
-    "sqlite": "^3.0.3"
+    "sqlite3": "^4.2.0"
   }
 }

server/controllers/search/index.js

@@ -76,7 +76,8 @@ class SearchController {
 
     let extraReferences = [];
     if (urisToCheck.length > 0) {
-      extraReferences = await this.searchReferencesBySourceCodes(source, urisToCheck);
+      // Need to figure this out
+      // extraReferences = await this.searchReferencesBySourceCodes(source, urisToCheck);
     }
     return [
       ...bookReferences,

server/fastify-plugins/fastify-nodemailer.js

@@ -26,11 +26,13 @@ const fastifyNodemailer = (fastify, options, next) => {
   try {
     transporter = createTransport(options);
   } catch (err) {
+    fastify.decorate('canEmail', false);
     return next(err);
   }
 
   fastify
     .decorate('nodemailer', transporter)
+    .decorate('canEmail', true)
     .addHook('onClose', close);
 
   next();

server/fastify-plugins/fastify-sequelize.js

@@ -21,13 +21,14 @@ const fp = require('fastify-plugin');
 const Sequelize = require('sequelize');
 
 function plugin (fastify, options) {
-  const instance = options.instance || 'sequelize';
+  const { config, registerModels } = options;
-  const autoConnect = options.autoConnect || true;
+  const instance = config.instance || 'sequelize';
+  const autoConnect = config.autoConnect || true;
 
-  delete options.instance;
+  delete config.instance;
-  delete options.autoConnect;
+  delete config.autoConnect;
 
-  const sequelize = new Sequelize(options);
+  const sequelize = new Sequelize(config);
 
   if (autoConnect) {
     return sequelize.authenticate().then(decorate);
@@ -39,6 +40,7 @@ function plugin (fastify, options) {
 
   function decorate () {
     fastify.decorate(instance, sequelize);
+    fastify.decorate('models', registerModels(sequelize));
     fastify.addHook('onClose', (fastifyInstance, done) => {
       sequelize.close()
         .then(done)

server/i18n/locales/en/ui.json

@@ -72,11 +72,14 @@
       "author": "Author"
     },
     "loading": "Loading...",
+    "no_reviews": "No Reviews yet",
+    "click_for_details": "Show Book Details",
     "no_results": "None Found",
     "no_results_suggestion": "If you're expecting book data, go and help fill out the Inventaire database!",
     "people_header": "People",
     "series_header": "Series",
     "books_header": "Books",
+    "covers": "Covers",
     "see_interaction_details": "See All Interactions",
     "see_book_details": "See Book Details"
   },

server/index.js

@@ -45,10 +45,14 @@ switch (fastify.siteConfig.db_engine) {
     sequelizeConfig.password = fastify.siteConfig.db_password;
   }
 }
-fastify.register(require('./fastify-plugins/fastify-sequelize'), sequelizeConfig);
+fastify.register(require('./fastify-plugins/fastify-sequelize'), {
+  config: sequelizeConfig,
+  registerModels: require('./sequelize/models'),
+});
 
 if (!fastify.siteConfig.email_host || !fastify.siteConfig.email_username) {
   console.warn('###\nNo email server set up. You will not be able to send emails without entering your email configuration.\n###');
+  fastify.decorate('canEmail', false);
 } else {
   fastify.register(require('./fastify-plugins/fastify-nodemailer'), {
     pool: true,
@@ -103,7 +107,4 @@ fastify.listen(fastify.siteConfig.port, function (err, address) {
     fastify.log.error(err);
     process.exit(1);
   }
-
-  fastify.decorate('canEmail', typeof fastify.nodemailer !== 'undefined');
-  fastify.decorate('models', require('./sequelize/models')(fastify.sequelize));
 });