Improve optimistic rendering to article reactions (#681)

* Refactor article reactions for increased readability and to insert optimistic rendering later. No functional changes * Added optimistic rendering * Fixed comments to fit with style * Reverts state on error as well
forem · Nov 7, 2018 · b865ad9 · b865ad9
1 parent 17c6282
commit b865ad9
Showing 1 changed file with 56 additions and 30 deletions.
diff --git a/app/assets/javascripts/initializers/initializeArticleReactions.js b/app/assets/javascripts/initializers/initializeArticleReactions.js
@@ -1,3 +1,40 @@
+// Set reaction count to correct number
+function setReactionCount(reactionName, newCount) {
+  var reactionClassList = document.getElementById("reaction-butt-" + reactionName).classList;
+  var reactionNumber = document.getElementById("reaction-number-" + reactionName);
+  if (newCount > 0) {
+    reactionClassList.add("activated");
+    reactionNumber.innerHTML = newCount;
+
+  }
+  else {
+    reactionClassList.remove("activated");
+    reactionNumber.innerHTML = "";
+  }
+}
+
+function showUserReaction(reactionName) {
+  document.getElementById("reaction-butt-" + reactionName).classList.add("user-activated", "user-animated");
+}
+
+function hideUserReaction(reactionName) {
+  document.getElementById("reaction-butt-" + reactionName).classList.remove("user-activated", "user-animated");
+}
+
+function hasUserReacted(reactionName) {
+  return document.getElementById("reaction-butt-" + reactionName)
+  .classList.contains("user-activated");
+
+}
+
+function getNumReactions(reactionName) {
+  var num = document.getElementById("reaction-number-" + reactionName).innerHTML;
+  if (num == "") {
+    return 0;
+  }
+  return parseInt(num);
+}
+
 function initializeArticleReactions() {
   setTimeout(function () {
     if (document.getElementById("article-body")) {
@@ -15,14 +52,11 @@ function initializeArticleReactions() {
           if (ajaxReq.readyState == XMLHttpRequest.DONE) {
             var json = JSON.parse(ajaxReq.response);
             json.article_reaction_counts.forEach(function (reaction) {
-              if (reaction.count > 0) {
-                document.getElementById("reaction-butt-" + reaction.category).classList.add("activated")
-                document.getElementById("reaction-number-" + reaction.category).innerHTML = reaction.count;
-              }
+              setReactionCount(reaction.category, reaction.count)
             })
             json.reactions.forEach(function (reaction) {
               if (document.getElementById("reaction-butt-" + reaction.category)) {
-                document.getElementById("reaction-butt-" + reaction.category).classList.add("user-activated")
+                showUserReaction(reaction.category);
               }
             })
 
@@ -51,13 +85,24 @@ function initializeArticleReactions() {
 }
 
 function reactToArticle(articleId, reaction) {
+  // Visually toggle the reaction
+  function toggleReaction() {
+    var currentNum = getNumReactions(reaction);
+    if (hasUserReacted(reaction)) {
+      hideUserReaction(reaction);
+      setReactionCount(reaction, currentNum - 1);
+    } else {
+      showUserReaction(reaction);
+      setReactionCount(reaction, currentNum + 1);
+    }
+  }
   var userStatus = document.getElementsByTagName('body')[0].getAttribute('data-user-status');
   if (userStatus == "logged-out") {
     showModal("react-to-article");
     return;
   } else {
-    document.getElementById("reaction-butt-" + reaction).classList.add("user-activated")
-    document.getElementById("reaction-butt-" + reaction).classList.add("user-animated")
+     // Optimistically toggle reaction
+    toggleReaction();
   }
 
   function createFormdata() {
@@ -72,36 +117,17 @@ function reactToArticle(articleId, reaction) {
     return formData;
   }
 
-  function successCb(response) {
-    var num = document.getElementById("reaction-number-" + reaction).innerHTML;
-    if (response.result == "create") {
-      document.getElementById("reaction-butt-" + reaction).classList.add("user-activated")
-      if (num == "") {
-        document.getElementById("reaction-number-" + reaction).innerHTML = "1";
-      } else {
-        document.getElementById("reaction-number-" + reaction).innerHTML = parseInt(num) + 1;
-      }
-    } else {
-      document.getElementById("reaction-butt-" + reaction).classList.remove("user-activated")
-      if (num == 1) {
-        document.getElementById("reaction-butt-" + reaction).classList.remove("activated")
-        document.getElementById("reaction-number-" + reaction).innerHTML = "";
-      } else {
-        document.getElementById("reaction-number-" + reaction).innerHTML = parseInt(num) - 1;
-      }
-    }
-  }
 
   getCsrfToken()
     .then(sendFetch("reaction-creation", createFormdata()))
     .then(function (response) {
       if (response.status === 200) {
-        return response.json().then(successCb);
+        return response.json().then();
       } else {
-        // there's currently no errorCb.
+        toggleReaction();
       }
     })
     .catch(function (error) {
-      // there's currently no error handling.
+        toggleReaction();
     })
-}
+}