From e98b00b45fdb65e1a2b0f8776903abe25d04f6fe Mon Sep 17 00:00:00 2001
From: Mac Siri <mac@forem.com>
Date: Wed, 12 Jul 2023 11:53:08 -0400
Subject: [PATCH] Update search result rendering for Organization (#19740)

---
 .../initializeCommentsPage.js.erb             |  4 +--
 .../javascripts/utilities/buildArticleHTML.js | 32 +++++++++++--------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/app/assets/javascripts/initializers/initializeCommentsPage.js.erb b/app/assets/javascripts/initializers/initializeCommentsPage.js.erb
index 47ae49b5b..c407d2c94 100644
--- a/app/assets/javascripts/initializers/initializeCommentsPage.js.erb
+++ b/app/assets/javascripts/initializers/initializeCommentsPage.js.erb
@@ -416,9 +416,9 @@ function updateItemSummaryHtml(item) {
   }
   var itemUsername = usernames[0].textContent + number
   if (item.open) {
-    itemSummaryContent.innerHTML = "";
+    itemSummaryContent.textContent = "";
   } else {
-    itemSummaryContent.innerHTML = itemUsername;
+    itemSummaryContent.textContent = itemUsername;
   }
 }
 
diff --git a/app/assets/javascripts/utilities/buildArticleHTML.js b/app/assets/javascripts/utilities/buildArticleHTML.js
index cc4f46de7..e96cecfcb 100644
--- a/app/assets/javascripts/utilities/buildArticleHTML.js
+++ b/app/assets/javascripts/utilities/buildArticleHTML.js
@@ -49,18 +49,15 @@ function buildArticleHTML(article, currentUserId = null) {
   }
 
   if (article && article.class_name === 'Organization') {
-    return `<article class="crayons-story">
+    const html = `
+      <article class="crayons-story">
         <div class="crayons-story__body flex items-start gap-2">
           <a href="${article.slug}" class="crayons-podcast-episode__cover">
-            <img src="${article.profile_image.url}" alt="${
-      article.name
-    }" loading="lazy" />
+            <img src="${article.profile_image.url}" alt="" loading="lazy" />
           </a>
           <div>
             <h3 class="crayons-subtitle-2 lh-tight py-1">
-              <a href="${article.slug}" class="c-link">
-                ${article.name}
-              </a>
+              <a href="${article.slug}" class="c-link"> ${article.name} </a>
             </h3>
             <p class="crayons-story__slug-segment">@${article.slug}</p>
             ${
@@ -70,14 +67,23 @@ function buildArticleHTML(article, currentUserId = null) {
             }
           </div>
           <div class="print-hidden" style="margin-left: auto">
-            <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"id": "${
-              article.id
-            }", "className": "Organization", "style": "full", "name": "${
-      article.name
-    }"}'>Follow</button>
+            <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info=''>Follow</button>
           </div>
         </div>
-      </article>`;
+      </article>
+    `;
+
+    const parser = new DOMParser();
+    const parsedDocument = parser.parseFromString(html, 'text/html');
+    parsedDocument.querySelector('img').alt = article.name;
+    parsedDocument.querySelector('button').dataset.info = JSON.stringify({
+      id: article.id,
+      name: article.name,
+      className: 'Organization',
+      style: 'full',
+    });
+
+    return parsedDocument.body.innerHTML;
   }
 
   if (article) {