Refactor inbox_block_script library.

Closes #3491252

js/private_message_inbox_block.js

@@ -4,43 +4,46 @@
  */
 
 ((Drupal, drupalSettings, window, once) => {
-  let container;
-  let loadingPrevInProgress = false;
-  let loadingNewInProgress = false;
-  let updateTimeoutId = null;
-
   /**
    * Private message inbox block functionality.
    */
-  Drupal.PrivateMessageInboxBlock = {
+  class PrivateMessageInboxBlock {
+    constructor() {
+      this.container = null;
+      this.loadingPrevInProgress = false;
+      this.loadingNewInProgress = false;
+      this.updateTimeoutId = null;
+    }
+
     /**
      * Initialize the block with default state and handlers.
      *
-     * @param {HTMLElement} blockWrapper - The inbox block.
+     * @param {HTMLElement} blockWrapper
+     *   The inbox block.
      */
     init(blockWrapper) {
-      container = blockWrapper;
-      const threadId = container.querySelector('.private-message-thread')
+      this.container = blockWrapper;
+      const threadId = this.container.querySelector('.private-message-thread')
         ?.dataset.threadId;
       if (threadId) {
         Drupal.PrivateMessageUtils.setActiveThread(threadId);
       }
       this.attachLoadOldButton();
       this.scheduleInboxUpdate();
-    },
+    }
 
     /**
      * Updates the inbox with new threads.
      */
     updateInbox() {
-      if (loadingNewInProgress) {
+      if (this.loadingNewInProgress) {
         return;
       }
 
-      loadingNewInProgress = true;
+      this.loadingNewInProgress = true;
       const ids = {};
 
-      container
+      this.container
         .querySelectorAll('.private-message-thread-inbox')
         .forEach((el) => {
           ids[el.dataset.threadId] = el.dataset.lastUpdate;
@@ -52,55 +55,62 @@
       })
         .execute()
         .always(() => {
-          loadingNewInProgress = false;
+          this.loadingNewInProgress = false;
           this.scheduleInboxUpdate();
         });
-    },
+    }
 
     /**
      * Sets a timeout for inbox updates.
      */
     scheduleInboxUpdate() {
-      if (updateTimeoutId) {
-        window.clearTimeout(updateTimeoutId);
+      if (this.updateTimeoutId) {
+        window.clearTimeout(this.updateTimeoutId);
       }
       const interval =
         drupalSettings.privateMessageInboxBlock.ajaxRefreshRate * 1000;
       if (interval) {
-        updateTimeoutId = window.setTimeout(() => this.updateInbox(), interval);
+        this.updateTimeoutId = window.setTimeout(
+          () => this.updateInbox(),
+          interval,
+        );
       }
-    },
+    }
 
     /**
      * Appends older threads to the inbox.
-     * @param {string} threadsHtml HTML content of threads.
+     *
+     * @param {string} threadsHtml
+     *   HTML content of threads.
      */
     insertPreviousThreads(threadsHtml) {
       const newNodes =
         Drupal.PrivateMessageUtils.parseHTML(threadsHtml).childNodes;
 
       newNodes.forEach((node) => {
-        const appendedElement = container.appendChild(node);
+        const appendedElement = this.container.appendChild(node);
 
         Drupal.attachBehaviors(appendedElement);
         Drupal.PrivateMessageSlide.toggleSlide(appendedElement, true);
       });
-    },
+    }
 
     /**
      * Handles loading older threads.
-     * @param {Event} e The click event.
+     *
+     * @param {Event} e
+     *   The click event.
      */
     loadOldThreads(e) {
       e.preventDefault();
-      if (loadingPrevInProgress) {
+      if (this.loadingPrevInProgress) {
         return;
       }
 
-      loadingPrevInProgress = true;
+      this.loadingPrevInProgress = true;
 
       const oldestTimestamp = Array.from(
-        container.querySelectorAll('.private-message-thread'),
+        this.container.querySelectorAll('.private-message-thread'),
       ).reduce((minTime, el) => {
         return Math.min(minTime, parseInt(el.dataset.lastUpdate, 10));
       }, Infinity);
@@ -114,20 +124,22 @@
       })
         .execute()
         .always(() => {
-          loadingPrevInProgress = false;
+          this.loadingPrevInProgress = false;
         });
-    },
+    }
 
     /**
      * Reorders the inbox to show the newest threads first.
      *
-     * @param {Array} threadIds Thread IDs in the desired order.
-     * @param {Array} newThreads HTML content of new threads keyed by thread ID.
+     * @param {Array} threadIds
+     *   Thread IDs in the desired order.
+     * @param {Array} newThreads
+     *   HTML content of new threads keyed by thread ID.
      */
     reorderInbox(threadIds, newThreads) {
       const existingThreads = {};
 
-      container
+      this.container
         .querySelectorAll(':scope > .private-message-thread-inbox')
         .forEach((el) => {
           existingThreads[el.dataset.threadId] = el;
@@ -142,17 +154,17 @@
             newThreads[threadId],
           ).childNodes;
           newThreadContent.forEach((child) => {
-            const appendedElement = container.appendChild(child);
+            const appendedElement = this.container.appendChild(child);
             Drupal.attachBehaviors(appendedElement);
           });
         } else if (existingThreads[threadId]) {
-          const appendedElement = container.appendChild(
+          const appendedElement = this.container.appendChild(
             existingThreads[threadId],
           );
           Drupal.attachBehaviors(appendedElement);
         }
       });
-    },
+    }
 
     /**
      * Attaches the "Load Older Threads" button handler.
@@ -162,12 +174,14 @@
         drupalSettings.privateMessageInboxBlock.totalThreads >
         drupalSettings.privateMessageInboxBlock.itemsToShow
       ) {
-        Drupal.privateMessageInboxPrevious.displayButton(container, (e) =>
+        Drupal.privateMessageInboxPrevious.displayButton(this.container, (e) =>
           this.loadOldThreads(e),
         );
       }
-    },
-  };
+    }
+  }
+
+  const privateMessageInboxBlock = new PrivateMessageInboxBlock();
 
   /**
    * Attaches the private message inbox block behavior.
@@ -184,25 +198,30 @@
         return;
       }
 
-      Drupal.PrivateMessageInboxBlock.init(containerFormContext);
+      privateMessageInboxBlock.init(containerFormContext);
     },
     detach(context) {
       Drupal.privateMessageInboxPrevious.detachEventListener(
         context,
-        Drupal.PrivateMessageInboxBlock.loadOldThreads,
+        privateMessageInboxBlock.loadOldThreads.bind(privateMessageInboxBlock),
       );
     },
   };
 
   /**
-   * Custom AJAX command to insert older threads into the inbox.
+   * Custom AJAX commands for private message inbox.
+   *
+   * @param {Drupal.Ajax} ajax
+   *   The Drupal Ajax object.
+   * @param {object} response
+   *   Object holding the server response.
    */
   Drupal.AjaxCommands.prototype.insertInboxOldPrivateMessageThreads = (
     ajax,
     response,
   ) => {
     if (response.threads) {
-      Drupal.PrivateMessageInboxBlock.insertPreviousThreads(response.threads);
+      privateMessageInboxBlock.insertPreviousThreads(response.threads);
     }
 
     if (!response.threads || !response.hasNext) {
@@ -212,12 +231,17 @@
 
   /**
    * Custom AJAX command to update the inbox with new threads.
+   *
+   * @param {Drupal.Ajax} ajax
+   *   The Drupal Ajax object.
+   * @param {object} response
+   *   Object holding the server response.
    */
   Drupal.AjaxCommands.prototype.privateMessageInboxUpdate = (
     ajax,
     response,
   ) => {
-    Drupal.PrivateMessageInboxBlock.reorderInbox(
+    privateMessageInboxBlock.reorderInbox(
       response.threadIds,
       response.newThreads,
     );
@@ -227,6 +251,6 @@
    * Custom AJAX command to trigger an inbox update.
    */
   Drupal.AjaxCommands.prototype.privateMessageTriggerInboxUpdate = () => {
-    Drupal.PrivateMessageInboxBlock.updateInbox();
+    privateMessageInboxBlock.updateInbox();
   };
 })(Drupal, drupalSettings, window, once);