Hide reviews UI in Search if no reviews available

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
+      ? __('search.no_reviews')
+      : html`<span data-tooltip="${__('interaction.average_rating')}: ${result.averageRating}">
         ${starRating(result.averageRating)}
       </span>  
       <span style="margin-left:10px;" data-tooltip=${__('interaction.reviews_written')}>
         <span style="margin-right:8px;"><i class="icon-chat"></i></span>
         <span>${result.numberOfReviews}</span>
-    </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,7 +62,9 @@ export const resultDetails = (searchController, result, emit = () => {}) => {
       }
     </div>
     <div class="two-third-700">
-      <h4>${__('interaction.average_rating')}</h4>
+      ${!hasReviews
+        ? html`<h4>${__('search.no_reviews')}</h4>`
+        : html`<h4>${__('interaction.average_rating')}</h4>
         <span data-tooltip="${result.averageRating}">${starRating(result.averageRating)}</span>
 
         <div class="flex">
@@ -70,17 +79,16 @@ export const resultDetails = (searchController, result, emit = () => {}) => {
             </a>
           </div>
         </div>
-      ${result.reviews.map(review => {
+        ${(typeof result.reviews !== 'undefined' && Array.isArray(result.reviews) ? result.reviews : []).map(review => {
           return reviewCard(searchController, review);
-      })}
+        })}`
+      }
     </div>
     <div class="sixth-700">
       <p>
-        <span data-tooltip=${__('interaction.add')}>
         <button class="success">
-            <i class="icon-plus"></i>
+          <i class="icon-plus"></i> <span>${__('interaction.add')}</span>
         </button>
-        </span>
       </p>
       <p>
         <a class="small button" href=${result.link} target="_blank">

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"
   },