From 9b66a8e4067ff1cdbfe7d192da8bc75011590514 Mon Sep 17 00:00:00 2001
From: Ben Halpern <bendhalpern@gmail.com>
Date: Mon, 20 Feb 2023 12:55:50 -0500
Subject: [PATCH] Make multiple reactions play nicely with edge caching
 (Frontend) (#19147)

* Make multiple reactions play nicely with edge caching

* Remove backend code

* Update app/assets/javascripts/initializers/initializeArticleReactions.js
---
 .../initializeArticleReactions.js             | 21 +++++++++++++++++++
 app/assets/stylesheets/views/article.scss     |  2 ++
 .../articles/_multiple_reactions.html.erb     |  6 ++++--
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/initializers/initializeArticleReactions.js b/app/assets/javascripts/initializers/initializeArticleReactions.js
index 13827c0b5..efc1da23b 100644
--- a/app/assets/javascripts/initializers/initializeArticleReactions.js
+++ b/app/assets/javascripts/initializers/initializeArticleReactions.js
@@ -27,6 +27,25 @@ function setReactionCount(reactionName, newCount) {
   }
 }
 
+function setSumReactionCount(counts) {
+  let totalCountObj = document.getElementById('reaction_total_count');
+  if (totalCountObj && counts.length > 2) {
+    let sum = 0;
+    for (let i in counts) {
+      if (counts[i]['category'] != 'readinglist') {
+        sum += counts[i]['count'];
+      }
+    }
+    totalCountObj.textContent = sum;
+  }
+}
+function showCommentCount() {
+  let commentCountObj = document.getElementById('reaction-number-comment');
+  if (commentCountObj && commentCountObj.dataset.count) {
+    commentCountObj.textContent = commentCountObj.dataset.count;
+  }
+}
+
 function showUserReaction(reactionName, animatedClass) {
   const reactionButton = document.getElementById(
     'reaction-butt-' + reactionName,
@@ -172,6 +191,8 @@ function requestReactionCounts(articleId) {
   ajaxReq.onreadystatechange = () => {
     if (ajaxReq.readyState === XMLHttpRequest.DONE) {
       var json = JSON.parse(ajaxReq.response);
+      setSumReactionCount(json.article_reaction_counts)
+      showCommentCount();
       json.article_reaction_counts.forEach((reaction) => {
         setReactionCount(reaction.category, reaction.count);
       });
diff --git a/app/assets/stylesheets/views/article.scss b/app/assets/stylesheets/views/article.scss
index 8a0106b8d..73c0b2ac8 100644
--- a/app/assets/stylesheets/views/article.scss
+++ b/app/assets/stylesheets/views/article.scss
@@ -452,6 +452,8 @@
 
 .multiple_reactions_engagement {
   padding: 0.5em 0;
+  height: 43px;
+  cursor: default;
 
   span {
     margin-right: 1em;
diff --git a/app/views/articles/_multiple_reactions.html.erb b/app/views/articles/_multiple_reactions.html.erb
index ec1e5f656..466d77be8 100644
--- a/app/views/articles/_multiple_reactions.html.erb
+++ b/app/views/articles/_multiple_reactions.html.erb
@@ -12,7 +12,7 @@
         <%= image_tag "heart-plus-active.svg", aria_hidden: true, height: 24, width: 24 %>
       </span>
       <span class="crayons-reaction__count" id="reaction_total_count">
-        <%= @article.public_reactions_count %>
+        <span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span>
       </span>
   </button>
 
@@ -41,7 +41,9 @@
     <span class="crayons-reaction__icon <%= "crayons-reaction__icon--borderless" if FeatureFlag.enabled?(:multiple_reactions) %> crayons-reaction__icon--inactive">
       <%= crayons_icon_tag("comment.svg", aria_hidden: true) %>
     </span>
-    <span class="crayons-reaction__count" id="reaction-number-comment"><%= @article.comments_count %></span>
+    <span class="crayons-reaction__count" id="reaction-number-comment" data-count="<%= @article.comments_count %>">
+      <span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span>
+    </span>
 
     <span data-testid="tooltip" class="crayons-tooltip__content">
       <%= t("views.articles.jump_to_comments.label") %>