fetch preview card follow buttons in one network call (#14085)

* fetch preview card follow buttons in one network call

* when new comment is submitted, only fetch new comment status

* make sure individual button follow requests continue to init

* Add follow-user class to all follow user buttons via the application helper

Co-authored-by: mstruve <mollylbs@gmail.com>

app/assets/javascripts/initializers/initializeAllFollowButts.js

@@ -30,7 +30,7 @@ function fetchUserFollowStatuses(idButtonHash) {
     .then((response) => response.json())
     .then((idStatuses) => {
       Object.keys(idStatuses).forEach(function (id) {
-        addButtClickHandle(idStatuses[id], idButtonHash[id]);
+        addButtClickHandles(idStatuses[id], idButtonHash[id]);
       });
     });
 }
@@ -44,7 +44,11 @@ function initializeUserFollowButtons(buttons) {
         addModalEventListener(buttons[i]);
       } else {
         var userId = JSON.parse(buttons[i].dataset.info).id;
-        userIds[userId] = buttons[i];
+        if (userIds[userId]) {
+          userIds[userId].push(buttons[i]);
+        } else {
+          userIds[userId] = [buttons[i]];
+        }
       }
     }
 
@@ -55,8 +59,9 @@ function initializeUserFollowButtons(buttons) {
 }
 
 function initializeUserFollowButts() {
-  var buttons = document.getElementsByClassName(
-    'follow-action-button follow-user',
+  // Get all user follow buttons, avoiding any initialized already
+  var buttons = document.querySelectorAll(
+    '.follow-action-button.follow-user:not([data-click-initialized])',
   );
   initializeUserFollowButtons(buttons);
 }
@@ -106,7 +111,7 @@ function fetchButt(butt, buttInfo) {
       dataRequester.readyState === XMLHttpRequest.DONE &&
       dataRequester.status === 200
     ) {
-      addButtClickHandle(dataRequester.response, butt);
+      addButtClickHandles(dataRequester.response, [butt]);
     }
   };
   dataRequester.open(
@@ -117,15 +122,16 @@ function fetchButt(butt, buttInfo) {
   dataRequester.send();
 }
 
-function addButtClickHandle(response, butt) {
+function addButtClickHandles(response, buttons) {
   // currently lacking error handling
-  var buttInfo = JSON.parse(butt.dataset.info);
-  assignInitialButtResponse(response, butt);
-  butt.onclick = function (e) {
-    e.preventDefault();
-    handleOptimisticButtRender(butt);
-  };
-  butt.dataset.clickInitialized = 'true';
+  buttons.forEach((butt) => {
+    assignInitialButtResponse(response, butt);
+    butt.onclick = function (e) {
+      e.preventDefault();
+      handleOptimisticButtRender(butt);
+    };
+    butt.dataset.clickInitialized = 'true';
+  });
 }
 
 function handleTagButtAssignment(user, butt, buttInfo) {
@@ -137,7 +143,7 @@ function handleTagButtAssignment(user, butt, buttInfo) {
       .indexOf(buttInfo.id) !== -1;
 
   var buttAssignmentBoolText = buttAssignmentBoolean ? 'true' : 'false';
-  addButtClickHandle(buttAssignmentBoolText, butt);
+  addButtClickHandles(buttAssignmentBoolText, [butt]);
 }
 
 function assignInitialButtResponse(response, butt) {

app/helpers/application_helper.rb

@@ -122,6 +122,8 @@ module ApplicationHelper
   def follow_button(followable, style = "full", classes = "")
     return if followable == DELETED_USER
 
+    user_follow = followable.instance_of?(User) ? "follow-user" : ""
+
     tag.button(
       "Follow",
       name: :button,
@@ -133,7 +135,7 @@ module ApplicationHelper
           style: style
         }
       },
-      class: "crayons-btn follow-action-button whitespace-nowrap #{classes}",
+      class: "crayons-btn follow-action-button whitespace-nowrap #{classes} #{user_follow}",
     )
   end
 

app/javascript/packs/commentDropdowns.js

@@ -1,7 +1,7 @@
 import { addSnackbarItem } from '../Snackbar';
 import { initializeDropdown } from '@utilities/dropdownUtils';
 
-/* global Runtime initializeAllFollowButts  */
+/* global Runtime initializeUserFollowButts  */
 
 const handleCopyPermalink = (closeDropdown) => {
   return (event) => {
@@ -73,7 +73,7 @@ const fetchMissingProfilePreviewCard = async (placeholderElement) => {
   );
 
   // Make sure the button inside the dropdown is initialized
-  initializeAllFollowButts();
+  initializeUserFollowButts();
 };
 
 /**

app/views/shared/_profile_card_content.html.erb

@@ -13,7 +13,7 @@
 <% end %>
 
 <div class="print-hidden">
-  <%= follow_button(actor, style = "", classes = "w-100") %>
+  <%= follow_button(actor, style = "", classes = "w-100") %>&nbsp;
 </div>
 
 <% if actor.class.name == "User" %>