Update reading button states after articles loaded (#1927)

forem · Mar 1, 2019 · b1995fd · b1995fd
1 parent 281330f
commit b1995fd
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 68 deletions.
diff --git a/app/assets/javascripts/initializers/initializeFetchFollowedArticles.js.erb b/app/assets/javascripts/initializers/initializeFetchFollowedArticles.js.erb
@@ -3,7 +3,7 @@ function initializeFetchFollowedArticles() {
     algoliaFollowedArticles();
   }
 }
-  
+
 function insertArticle(article,parent,insertPlace) {
   if (article){
     var newItem = document.createElement("DIV");
@@ -129,7 +129,7 @@ function algoliaFollowedArticles(){
           attributesToHighlight: [],
           tagFilters: [user.followed_tag_names.concat(followedUsersArray)],
       }
-      
+
       var homeEl = document.getElementById("index-container");
       if (homeEl.dataset.feed === "base-feed") {
         articlesIndex = client.initIndex('ordered_articles_<%= Rails.env %>');

diff --git a/app/assets/javascripts/initializers/initializeReadingListIcons.js b/app/assets/javascripts/initializers/initializeReadingListIcons.js
@@ -1,104 +1,123 @@
+/* eslint-disable no-use-before-define */
+/* eslint-disable no-undef */
+/* eslint-disable func-names */
+/* eslint-disable consistent-return */
+/* eslint-disable no-unused-vars */
+
 function initializeReadingListIcons() {
-  var readingListButtons = document.getElementsByClassName("bookmark-engage");
-  for(var i = 0; i < readingListButtons.length; i++) {
-    highlightButton(readingListButtons[i]);
-  }
+  setReadingListButtonsState();
   addReadingListCountToHomePage();
 }
 
-//private
+// set SAVE or SAVED articles buttons
+function setReadingListButtonsState() {
+  var readingListButtons = document.getElementsByClassName('bookmark-engage');
+  Array.from(readingListButtons).forEach(button => highlightButton(button));
+}
+
+// private
 
-function highlightButton(button){
+function highlightButton(button) {
   var user = userData();
-  var buttonIdInt = parseInt(button.dataset.reactableId)
-  if (user && user.reading_list_ids.indexOf(buttonIdInt) > -1 ){
-    button.classList.add("selected");
-  }
-  else {
-    button.classList.remove("selected");
+  var buttonIdInt = parseInt(button.dataset.reactableId, 10);
+  if (user && user.reading_list_ids.indexOf(buttonIdInt) > -1) {
+    button.classList.add('selected');
+  } else {
+    button.classList.remove('selected');
   }
-  button.addEventListener("click", reactToReadingListButtonClick);
+  button.addEventListener('click', reactToReadingListButtonClick);
 }
 
-function addReadingListCountToHomePage(){
+function addReadingListCountToHomePage() {
   var user = userData();
-  if ( user && document.getElementById("reading-list-count") ) {
-    var readingListCount = user.reading_list_ids.length > 0 ? user.reading_list_ids.length : "EMPTY"
-    document.getElementById("reading-list-count").innerHTML = "("+readingListCount+")"
-    document.getElementById("reading-list-count").dataset.count = user.reading_list_ids.length
+  var readingListCount;
+  if (user && document.getElementById('reading-list-count')) {
+    readingListCount =
+      user.reading_list_ids.length > 0 ? user.reading_list_ids.length : 'EMPTY';
+    document.getElementById('reading-list-count').innerHTML =
+      '(' + readingListCount + ')';
+    document.getElementById('reading-list-count').dataset.count =
+      user.reading_list_ids.length;
   }
 }
 
-function reactToReadingListButtonClick(event){
+function reactToReadingListButtonClick(event) {
+  var button;
+  var userStatus;
   event.preventDefault();
   sendHapticMessage('medium');
-  var userStatus = document.getElementsByTagName('body')[0].getAttribute('data-user-status');
-  if (userStatus == "logged-out") {
-    showModal("add-to-readinglist-from-index");
+  userStatus = document
+    .getElementsByTagName('body')[0]
+    .getAttribute('data-user-status');
+  if (userStatus === 'logged-out') {
+    showModal('add-to-readinglist-from-index');
     return;
   }
-  var button = properButtonFromEvent(event);
+  button = properButtonFromEvent(event);
   renderOptimisticResult(button);
   getCsrfToken()
-      .then(sendFetch("reaction-creation", buttonFormData(button)))
-      .then(function (response) {
-        if (response.status === 200) {
-          return response.json().then(function(json){
-            renderButtonState(button, json);
-            renderNewSidebarCount(button,json);
-          });
-        } else {
-          // there's currently no errorCb.
-        }
-      })
-      .catch(function (error) {
-        // there's currently no error handling.
-      })
+    .then(sendFetch('reaction-creation', buttonFormData(button)))
+    .then(function(response) {
+      if (response.status === 200) {
+        return response.json().then(function(json) {
+          renderButtonState(button, json);
+          renderNewSidebarCount(button, json);
+        });
+      } // else {
+      // there's currently no errorCb.
+      // }
+    })
+    .catch(function(error) {
+      // there's currently no error handling.
+    });
 }
 
 function renderButtonState(button, json) {
-  if (json.result === "create") {
-    button.classList.add("selected");
-  }
-  else {
-    button.classList.remove("selected")
+  if (json.result === 'create') {
+    button.classList.add('selected');
+  } else {
+    button.classList.remove('selected');
   }
 }
 
-function renderNewSidebarCount(button,json) {
-  var count = parseInt(document.getElementById("reading-list-count").dataset.count)
-  if (json.result === "create") {
+function renderNewSidebarCount(button, json) {
+  var newCount;
+  var count = document.getElementById('reading-list-count').dataset.count;
+  count = parseInt(count, 10);
+  if (json.result === 'create') {
     newCount = count + 1;
+  } else if (count !== 0) {
+    newCount = count - 1;
   }
-  else {
-    if ( count != 0 ){
-      newCount = count - 1;
-    }
-  }
-  document.getElementById("reading-list-count").dataset.count = newCount;
-  document.getElementById("reading-list-count").innerHTML = "("+newCount+")"
+  document.getElementById('reading-list-count').dataset.count = newCount;
+  document.getElementById('reading-list-count').innerHTML =
+    '(' + newCount + ')';
 }
 
-
-function buttonFormData(button){
+function buttonFormData(button) {
   var formData = new FormData();
-  formData.append("reactable_type", "Article");
-  formData.append("reactable_id", button.dataset.reactableId);
-  formData.append("category", "readinglist");
+  formData.append('reactable_type', 'Article');
+  formData.append('reactable_id', button.dataset.reactableId);
+  formData.append('category', 'readinglist');
   return formData;
 }
 
-function renderOptimisticResult(button){
-  renderButtonState(button, {result: "create"}); //optimistic create only for now
+function renderOptimisticResult(button) {
+  renderButtonState(button, { result: 'create' }); // optimistic create only for now
 }
 
-function properButtonFromEvent(event){
+function properButtonFromEvent(event) {
   var properElement;
-  if (event.target.tagName == "BUTTON") {
+  if (event.target.tagName === 'BUTTON') {
     properElement = event.target;
-  }
-  else {
+  } else {
     properElement = event.target.parentElement;
   }
   return properElement;
-}
+}
+
+/* eslint-enable no-use-before-define */
+/* eslint-enable no-undef */
+/* eslint-enable func-names */
+/* eslint-enable consistent-return */
+/* eslint-enable no-unused-vars */
diff --git a/app/assets/javascripts/initializers/initializeReadingListPage.js.erb b/app/assets/javascripts/initializers/initializeReadingListPage.js.erb
@@ -82,14 +82,16 @@ function getArticles(tag, num = PER_PAGE){
       }
 
       substoriesDiv.innerHTML = resultDivs.join("");
-      if ( resultDivs.length == 0) {
+      if (resultDivs.length == 0) {
         var message = "<div style='text-align:left;margin-top:20px;'>This is where to find your bookmarked posts, but it looks like you have not bookmarked anything.</div>"
         substoriesDiv.innerHTML = message;
       }
 
       var showMoreButton = document.getElementById("load-more-cta");
       showMore ? showMoreButton.classList.add("showing") : showMoreButton.classList.remove("showing")
-    });
+
+      setReadingListButtonsState();
+    })
 }
 
 function getComments(){