Make multiple reactions play nicely with edge caching (Frontend) (for…

…em#19147) * Make multiple reactions play nicely with edge caching * Remove backend code * Update app/assets/javascripts/initializers/initializeArticleReactions.js
hiramatu · Feb 20, 2023 · 9b66a8e · 9b66a8e
1 parent 104a013
commit 9b66a8e
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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") %>