From 8b76d0b0375e25267d27e039e725336441732538 Mon Sep 17 00:00:00 2001
From: Merci Jacob <mercihabam@gmail.com>
Date: Thu, 10 Oct 2024 16:58:25 +0200
Subject: [PATCH] Abort background processes relative to a page when it's
 unmounted

---
 modules/core/js_modules/Hm_MessagesStore.js |  6 ++++--
 modules/core/site.js                        | 13 +++++++++----
 modules/imap/js_modules/route_handlers.js   |  5 +++--
 modules/imap/site.js                        | 16 +++++++++-------
 4 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/modules/core/js_modules/Hm_MessagesStore.js b/modules/core/js_modules/Hm_MessagesStore.js
index dada9b41e9..64f8763768 100644
--- a/modules/core/js_modules/Hm_MessagesStore.js
+++ b/modules/core/js_modules/Hm_MessagesStore.js
@@ -15,13 +15,14 @@ class Hm_MessagesStore {
      * @property {RowObject} 1 - An object containing the row message and the IMAP key
      */
 
-    constructor(path, page = 1, rows = {}) {
+    constructor(path, page = 1, rows = {}, abortController = new AbortController()) {
         this.path = path;
         this.list = path + '_' + page;
         this.rows = rows;
         this.links = "";
         this.count = 0;
         this.flagAsReadOnOpen = true;
+        this.abortController = abortController;
     }
 
     /**
@@ -133,7 +134,8 @@ class Hm_MessagesStore {
               [],
               hideLoadingState,
               undefined,
-              reject
+              reject,
+              this.abortController?.signal
             );
         });
     }
diff --git a/modules/core/site.js b/modules/core/site.js
index 00ad8d20d0..8c8abc2500 100644
--- a/modules/core/site.js
+++ b/modules/core/site.js
@@ -127,7 +127,7 @@ var Hm_Ajax = {
         return;
     },
 
-    request: function(args, callback, extra, no_icon, batch_callback, on_failure) {
+    request: function(args, callback, extra, no_icon, batch_callback, on_failure, signal) {
         var bcb = false;
         if (typeof batch_callback != 'undefined' && $.inArray(batch_callback, this.batch_callbacks) === -1) {
             bcb = batch_callback.toString();
@@ -146,7 +146,7 @@ var Hm_Ajax = {
             $('body').addClass('wait');
         }
         Hm_Ajax.active_reqs++;
-        return ajax.make_request(args, callback, extra, name, on_failure, batch_callback);
+        return ajax.make_request(args, callback, extra, name, on_failure, batch_callback, signal);
     },
 
     show_loading_icon: function() {
@@ -208,6 +208,11 @@ var Hm_Ajax_Request = function() { return {
         }
         const url = window.location.next ?? window.location.href;
         xhr.open('POST', url)
+        if (config.signal) {
+            config.signal.addEventListener('abort', function() {
+                xhr.abort();
+            });
+        }
         xhr.addEventListener('load', function() {
             config.callback.done(Hm_Utils.json_decode(xhr.response, true), xhr);
             config.callback.always(Hm_Utils.json_decode(xhr.response, true));
@@ -235,7 +240,7 @@ var Hm_Ajax_Request = function() { return {
         return res.join('&');
     },
 
-    make_request: function(args, callback, extra, request_name, on_failure, batch_callback) {
+    make_request: function(args, callback, extra, request_name, on_failure, batch_callback, signal) {
         var name;
         var arg;
         this.batch_callback = batch_callback;
@@ -261,7 +266,7 @@ var Hm_Ajax_Request = function() { return {
         }
         var dt = new Date();
         this.start_time = dt.getTime();
-        this.xhr_fetch({url: '', data: args, callback: this});
+        this.xhr_fetch({url: '', data: args, callback: this, signal});
         return false;
     },
 
diff --git a/modules/imap/js_modules/route_handlers.js b/modules/imap/js_modules/route_handlers.js
index c65cde3a45..a449a53e66 100644
--- a/modules/imap/js_modules/route_handlers.js
+++ b/modules/imap/js_modules/route_handlers.js
@@ -1,5 +1,5 @@
 function applyImapMessageListPageHandlers(routeParams) {
-    const refreshInterval = setup_imap_folder_page(routeParams.list_path);
+    const setupPageResult = setup_imap_folder_page(routeParams.list_path);
 
     sortHandlerForMessageListAndSearchPage();
 
@@ -11,7 +11,8 @@ function applyImapMessageListPageHandlers(routeParams) {
     if (window.wpMessageListPageHandler) wpMessageListPageHandler(routeParams);
 
     return async function() {
-        const refreshIntervalId = await refreshInterval;
+        const [refreshIntervalId, abortController] = await setupPageResult;
+        abortController.abort();
         clearInterval(refreshIntervalId);
     }
 }
diff --git a/modules/imap/site.js b/modules/imap/site.js
index 945b3de546..5ee584324b 100644
--- a/modules/imap/site.js
+++ b/modules/imap/site.js
@@ -431,11 +431,12 @@ var remove_from_cached_imap_pages = function(msg_cache_key) {
     });
 }
 
-async function select_imap_folder(path, reload, processInTheBackground = false) {    
-    const messages = new Hm_MessagesStore(path, Hm_Utils.get_url_page_number());
-    return await messages.load(reload, processInTheBackground).then(() => {        
+async function select_imap_folder(path, reload, processInTheBackground = false, abortController = null) {    
+    const messages = new Hm_MessagesStore(path, Hm_Utils.get_url_page_number(), null, abortController);
+    await messages.load(reload, processInTheBackground).then(() => {        
         display_imap_mailbox(messages.rows, messages.links, path);
     });
+    return messages;
 };
 
 var setup_imap_folder_page = async function(listPath) {
@@ -466,11 +467,12 @@ var setup_imap_folder_page = async function(listPath) {
         await select_imap_folder(listPath, true, true)
     }
 
-    // Refresh in the background each 30 seconds
-    const interval = setInterval(() => {
-        select_imap_folder(listPath, true, true);
+    // Refresh in the background each 30 seconds and abort any pending request when the page unmounts
+    const backgroundAbortController = new AbortController();
+    const interval = setInterval(async () => {
+        select_imap_folder(listPath, true, true, backgroundAbortController);
     }, 30000);
-    return interval;
+    return [interval, backgroundAbortController];
 };
 
 $('#imap_filter_form').on('submit', async function(event) {