Use updated book details api in frontend

app/views/search/resultDetails.js

@@ -8,12 +8,12 @@ export const resultDetails = (searchController, result) => {
   const modalId = `result_${result.uri}`;
 
   const buttonHTML = html`<label for=${modalId} class="pseudo button">
-    <span data-tooltip="${i18n.__('interaction.average_rating')}: ${result.rating}">
-      ${starRating(result.rating)}
+    <span data-tooltip="${i18n.__('interaction.average_rating')}: ${result.averageRating}">
+      ${starRating(result.averageRating)}
     </span>  
     <span style="margin-left:10px;" data-tooltip=${i18n.__('interaction.reviews_written')}>
       <span style="margin-right:8px;"><i class="icon-chat"></i></span>
-      <span>${result.reviewCount}</span>
+      <span>${result.numberOfReviews}</span>
     </span>
   </label>`;
   
@@ -24,7 +24,7 @@ export const resultDetails = (searchController, result) => {
     </div>
     <div class="two-third-700">
       <h4>${i18n.__('interaction.average_rating')}</h4>
-      <span data-tooltip="${result.rating}">${starRating(result.rating)}</span>
+      <span data-tooltip="${result.averageRating}">${starRating(result.averageRating)}</span>
 
       <div class="flex">
         <div>
@@ -33,30 +33,21 @@ export const resultDetails = (searchController, result) => {
         <div>
           <a href="/book/${result.uri}" class="small button">
             <span style="margin-right:8px;"><i class="icon-chat"></i></span>
-            <span>${result.reviewCount}</span>
+            <span>${result.numberOfReviews}</span>
             <span>${i18n.__('search.see_interaction_details')}</span>
           </a>
         </div>
       </div>
-      <article class="card">
-        <header>
-          {{USERNAME}} ${starRating(Math.ceil(result.rating))}
+      ${result.reviews.map(review => {
+        return html`<article class="card">
+          <header style="font-weight:normal;">
+            <strong>${review.reviewer.name}</strong> <em>${review.reviewer.handle}</em><br>
+            ${review.date} ${starRating(Math.ceil(review.rating))}
           </header>
           <footer>
             <div class="content">
               <p>
-              The only thing worse than yellow snow is green snow. Let's put a touch more of the magic here.
-              With practice comes confidence. You have to allow the paint to break to make it beautiful.
-            </p>
-            <p>
-              Let all these little things happen. Don't fight them. Learn to use them. Imagination is the key
-              to painting. You can't make a mistake. Anything that happens you can learn to use - and make
-              something beautiful out of it. This is a fantastic little painting. In painting, you have unlimited
-              power. You have the ability to move mountains. We don't have anything but happy trees here.
-            </p>
-            <p>
-              If what you're doing doesn't make you happy - you're doing the wrong thing. A fan brush can be
-              your best friend. Mountains are so simple, they're hard.
+                ${review.review}
               </p>
             </div>
             <span class="tooltip-top" data-tooltip=${i18n.__('interaction.heart')}>
@@ -65,10 +56,11 @@ export const resultDetails = (searchController, result) => {
               </button>
             </span>
             <span>
-            ${result.reviewCount}
+              ${review.hearts}
             </span>
           </footer>
-      </article>
+        </article>`;
+      })}
     </div>
     <div class="sixth-700">
       <p>