Merge pull request #11350 from taearls/11327/feature/make-follow-buttons-asynchronous

11327/feature/make follow buttons asynchronous

Author: jimchamp

openlibrary/plugins/openlibrary/js/book-page-lists.js

@@ -1,5 +1,6 @@
 import { buildPartialsUrl } from './utils'
-import { PersistentToast } from './Toast'
+import { initAsyncFollowing } from './following'
+
 /**
  * Initializes lazy-loading the "Lists" section of Open Library book pages.
  *
@@ -84,42 +85,3 @@ async function fetchPartials(workId, editionId) {
 
     return fetch(buildPartialsUrl('BPListsSection', params));
 }
-
-async function initAsyncFollowing(followForms) {
-    followForms.forEach(form => {
-        form.addEventListener('submit', async e => {
-            e.preventDefault();
-            const url = form.action;
-            const formData = new FormData(form);
-            const submitButton = form.querySelector('button[type=submit]')
-            const stateInput = form.querySelector('input[name=state]')
-
-            const isFollowRequest = stateInput.value === '0'
-            const i18nStrings = JSON.parse(submitButton.dataset.i18n)
-            submitButton.disabled = true
-
-            await fetch(url, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/x-www-form-urlencoded',
-                },
-                body: new URLSearchParams(formData)
-            })
-                .then(resp => {
-                    if (!resp.ok) {
-                        throw new Error('Network response was not ok');
-                    }
-                    submitButton.classList.toggle('cta-btn--primary')
-                    submitButton.classList.toggle('cta-btn--delete')
-                    submitButton.textContent = isFollowRequest ? i18nStrings.unfollow : i18nStrings.follow
-                    stateInput.value = isFollowRequest ? '1' : '0'
-                })
-                .catch(() => {
-                    new PersistentToast(i18nStrings.errorMsg).show();
-                })
-                .finally(() => {
-                    submitButton.disabled = false
-                });
-        });
-    });
-}

openlibrary/plugins/openlibrary/js/following.js

@@ -0,0 +1,40 @@
+import { PersistentToast } from './Toast';
+
+export async function initAsyncFollowing(followForms) {
+    followForms.forEach(form => {
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const url = form.action;
+            const formData = new FormData(form);
+            const submitButton = form.querySelector('button[type=submit]');
+            const stateInput = form.querySelector('input[name=state]');
+
+            const isFollowRequest = stateInput.value === '0';
+            const i18nStrings = JSON.parse(submitButton.dataset.i18n);
+            submitButton.disabled = true;
+
+            await fetch(url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                },
+                body: new URLSearchParams(formData)
+            })
+                .then(resp => {
+                    if (!resp.ok) {
+                        throw new Error('Network response was not ok');
+                    }
+                    submitButton.classList.toggle('cta-btn--primary');
+                    submitButton.classList.toggle('cta-btn--delete');
+                    submitButton.textContent = isFollowRequest ? i18nStrings.unfollow : i18nStrings.follow;
+                    stateInput.value = isFollowRequest ? '1' : '0';
+                })
+                .catch(() => {
+                    new PersistentToast(i18nStrings.errorMsg).show();
+                })
+                .finally(() => {
+                    submitButton.disabled = false;
+                });
+        });
+    });
+}

openlibrary/plugins/openlibrary/js/index.js

@@ -549,6 +549,13 @@ jQuery(function () {
             .then(module => module.initListsSection(listSection))
     }
 
+    // Initialize follow forms lazily
+    const followForms = document.querySelectorAll('.follow-form');
+    if (followForms.length) {
+        import(/* webpackChunkName: "following" */ './following')
+            .then(module => module.initAsyncFollowing(followForms))
+    }
+
     // Generalized carousel lazy-loading
     const lazyCarousels = document.querySelectorAll('.lazy-carousel')
     if (lazyCarousels.length) {