From c3bd95a40b6a72e1b93e4e01d9a74000bb456e10 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Wed, 31 May 2023 22:16:07 +0200
Subject: [PATCH] refactor: reusable replies block

---
 assets/js/webmention-utils.mjs | 90 ++++++++++++++++++----------------
 1 file changed, 47 insertions(+), 43 deletions(-)

diff --git a/assets/js/webmention-utils.mjs b/assets/js/webmention-utils.mjs
index e1f41da..504d083 100644
--- a/assets/js/webmention-utils.mjs
+++ b/assets/js/webmention-utils.mjs
@@ -3,8 +3,7 @@ export function renderMentions(mentions, className) {
   mentions = mentions.filter((m) => m["wm-private"] !== true);
 
   if (mentions.length)
-    webMentionsSection.innerHTML =
-      "<h2>Mentions Across the World Wide Web</h2>";
+    webMentionsSection.innerHTML = "<h2>From Across the Web:</h2>";
 
   const heading = {
     "like-of": "👍 {x} Likes",
@@ -25,49 +24,54 @@ export function renderMentions(mentions, className) {
     }
   });
 
-  const replies = mentions.filter((m) => m["wm-property"] === "in-reply-to");
-  if (replies.length) {
-    // render on webmentions section
-    const repliesWrapper = document.createElement("div");
-    const clearReplies = document.createElement("div");
-    clearReplies.style.clear = "both";
-    repliesWrapper.append(clearReplies);
-    const repliesHeader = document.createElement("h3");
-    repliesHeader.innerHTML = heading["in-reply-to"].replace(
-      "{x}",
-      replies.length
-    );
-    repliesWrapper.append(repliesHeader);
+  ["in-reply-to"].forEach((type) => {
+    const replies = mentions.filter((m) => m["wm-property"] === type);
 
-    const repliesTable = document.createElement("table");
-    replies.forEach((reply) => {
-      const row = document.createElement("tr");
-      const cell = document.createElement("td");
-      row.append(cell);
-      const author = document.createElement("p");
-      author.className = "author-wrapper";
-      author.innerHTML = `<a href="${reply.author.url}"><img alt="Avatar for ${
-        reply.author.name
-      }" class="reply-photo" src="${
-        reply.author.photo
-      }" /></a> <span class="reply-name">${reply.author.name}</span><a href="${
-        reply.url
-      }" class="reply-date">${new Date(
-        reply.published
-      ).toLocaleDateString()}</a><div class="clear-both"></div>`;
-      const card = document.createElement("div");
-      card.className = "reply-card";
-      card.innerHTML = reply.content.html;
-      card.insertBefore(author, card.firstChild);
-      cell.appendChild(card);
-      repliesTable.append(row);
-    });
-    repliesWrapper.append(repliesTable);
-    webMentionsSection.append(repliesWrapper);
-  }
+    if (replies.length) {
+      // render on webmentions section
+      const repliesWrapper = createRepliesBlock(replies, heading[type]);
+      webMentionsSection.append(repliesWrapper);
+    }
+  });
 }
 
-function createAvatarBlock(mentions, heading) {
+function createRepliesBlock(replies, heading) {
+  const repliesWrapper = document.createElement("div");
+  const clearReplies = document.createElement("div");
+  clearReplies.style.clear = "both";
+  repliesWrapper.append(clearReplies);
+  const repliesHeader = document.createElement("h3");
+  repliesHeader.innerHTML = heading.replace("{x}", replies.length);
+  repliesWrapper.append(repliesHeader);
+
+  const repliesTable = document.createElement("table");
+  replies.forEach((reply) => {
+    const row = document.createElement("tr");
+    const cell = document.createElement("td");
+    row.append(cell);
+    const author = document.createElement("p");
+    author.className = "author-wrapper";
+    author.innerHTML = `<a href="${reply.author.url}"><img alt="Avatar for ${
+      reply.author.name
+    }" class="reply-photo" src="${
+      reply.author.photo
+    }" /></a> <span class="reply-name">${reply.author.name}</span><a href="${
+      reply.url
+    }" class="reply-date">${new Date(
+      reply.published
+    ).toLocaleDateString()}</a><div class="clear-both"></div>`;
+    const card = document.createElement("div");
+    card.className = "reply-card";
+    card.innerHTML = reply.content.html;
+    card.insertBefore(author, card.firstChild);
+    cell.appendChild(card);
+    repliesTable.append(row);
+  });
+  repliesWrapper.append(repliesTable);
+  return repliesWrapper;
+}
+
+function createAvatarBlock(mentions, headingText) {
   const clearDiv = document.createElement("div");
   clearDiv.style.clear = "both";
 
@@ -75,7 +79,7 @@ function createAvatarBlock(mentions, heading) {
   avatarBlock.append(clearDiv);
 
   const heading = document.createElement("h3");
-  heading.innerHTML = heading.replace("{x}", mentions.length);
+  heading.innerHTML = headingText.replace("{x}", mentions.length);
   avatarBlock.append(heading);
 
   const avatars = document.createElement("div");