From ea87184bb3ecb1d55fc20370004334c257f8cbed Mon Sep 17 00:00:00 2001
From: Robbie Antenesse <dev@alamantus.com>
Date: Fri, 13 Sep 2019 21:54:17 -0600
Subject: [PATCH] Move reviewCard to a partial for reusability

---
 app/views/partials/reviewCard.js  | 27 +++++++++++++++++++++++++++
 app/views/search/resultDetails.js | 23 ++---------------------
 2 files changed, 29 insertions(+), 21 deletions(-)
 create mode 100644 app/views/partials/reviewCard.js

diff --git a/app/views/partials/reviewCard.js b/app/views/partials/reviewCard.js
new file mode 100644
index 0000000..652367f
--- /dev/null
+++ b/app/views/partials/reviewCard.js
@@ -0,0 +1,27 @@
+import html from 'choo/html';
+
+import { starRating } from './starRating';
+
+export const reviewCard = (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>
+          ${review.review}
+        </p>
+      </div>
+      <span class="tooltip-top" data-tooltip=${i18n.__('interaction.heart')}>
+        <button class="pseudo">
+          <i class="icon-heart-outline"></i>
+        </button>
+      </span>
+      <span>
+        ${review.hearts}
+      </span>
+    </footer>
+  </article>`;
+}
\ No newline at end of file
diff --git a/app/views/search/resultDetails.js b/app/views/search/resultDetails.js
index d6f73c1..59f22b6 100644
--- a/app/views/search/resultDetails.js
+++ b/app/views/search/resultDetails.js
@@ -1,5 +1,6 @@
 import html from 'choo/html';
 
+import { reviewCard } from '../partials/reviewCard';
 import { starRating } from '../partials/starRating';
 import { modal } from '../partials/modal';
 
@@ -70,27 +71,7 @@ export const resultDetails = (searchController, result, emit = () => {}) => {
         </div>
       </div>
       ${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>
-                ${review.review}
-              </p>
-            </div>
-            <span class="tooltip-top" data-tooltip=${i18n.__('interaction.heart')}>
-              <button class="pseudo">
-                <i class="icon-heart-outline"></i>
-              </button>
-            </span>
-            <span>
-              ${review.hearts}
-            </span>
-          </footer>
-        </article>`;
+        return reviewCard(review);
       })}
     </div>
     <div class="sixth-700">