From c2f0ee2a06fecb78e14e57c6f7a4591e9e705d35 Mon Sep 17 00:00:00 2001
From: Dave Roberts <d.roberts@ctrlo.com>
Date: Tue, 21 Jan 2025 16:43:24 +0000
Subject: [PATCH] Refactored code and added await to stop race conditions

---
 .../form-group/autosave/lib/modal.js          | 32 ++++++++++---------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/frontend/components/form-group/autosave/lib/modal.js b/src/frontend/components/form-group/autosave/lib/modal.js
index b0166d7c6..f4d69f815 100644
--- a/src/frontend/components/form-group/autosave/lib/modal.js
+++ b/src/frontend/components/form-group/autosave/lib/modal.js
@@ -11,24 +11,25 @@ class AutosaveModal extends AutosaveBase {
   async initAutosave() {
     const $modal = $(this.element);
     const $form = $('.form-edit');
-    
+
     $modal.find('.btn-js-restore-values').on('click', async (e) => {
-      this.storage.setItem('recovering', true);
-      let curvalCount = $form.find('.linkspace-field[data-column-type="curval"]').length;
-      
       e.preventDefault();
+      e.stopPropagation();
+
+      await this.storage.setItem('recovering', true);
+      let curvalCount = $form.find('.linkspace-field[data-column-type="curval"]').length;
 
       let errored = false;
 
       let $list = $("<ul></ul>");
       const $body = $modal.find(".modal-body");
       $body.html("<p>Restoring values...</p>").append($list);
-      await Promise.all($form.find('.linkspace-field').map(async (_,field) => {
+      Promise.all($form.find('.linkspace-field').map(async (_, field) => {
         const $field = $(field);
-        await this.storage.getItem(this.columnKey($field)).then(json => {
+        try {
+          const json = await this.storage.getItem(this.columnKey($field))
           let values = json ? JSON.parse(json) : undefined;
-          return values && Array.isArray(values) ? values : undefined;
-        }).then(values => {
+          if (!values) return;
           const $editButton = $field.closest('.card--topic').find('.btn-js-edit');
           if ($editButton && $editButton.length) $editButton.trigger('click');
           if (Array.isArray(values)) {
@@ -41,29 +42,30 @@ class AutosaveModal extends AutosaveBase {
                 curvalCount--;
                 const $li = $(`<li class="li-error">Error restoring ${name}, please check these values before submission<ul><li class="warning">${e.message}</li></ul></li>`);
                 $list.append($li);
-                if(!curvalCount) this.storage.removeItem('recovering');
+                if (!curvalCount) this.storage.removeItem('recovering');
               });
               $field.on("validationPassed", () => {
                 curvalCount--;
                 const $li = $(`<li class="li-success">Restored ${name}</li>`);
                 $list.append($li);
-                if(!curvalCount) this.storage.removeItem('recovering');
+                if (!curvalCount) this.storage.removeItem('recovering');
               });
             }
             setFieldValues($field, values);
-            if(type !== "curval") {
+            if (type !== "curval") {
               const $li = $(`<li class="li-success">Restored ${name}</li>`);
               $list.append($li);
             }
+            // For some reason a delay is needed here else the promise forgets what it's doing frontend
             $field.addClass("field--changed");
           }
-        }).catch(e => {
+        } catch (e) {
           const name = $field.data("name");
           const $li = $(`<li class="li-error">Failed to restore ${name}<ul><li class="warning">${e.message}</li></ul></li>`);
           console.error(e);
           $list.append($li);
           errored = true;
-        });
+        }
       })).then(() => {
         $body.append(`<p>${errored ? "Values restored with errors." : "All values restored."} Please check that all field values are as expected.</p>`);
       }).catch(e => {
@@ -71,13 +73,13 @@ class AutosaveModal extends AutosaveBase {
       }).finally(() => {
         $modal.find(".modal-footer").find("button:not(.btn-cancel)").hide();
         $modal.find(".modal-footer").find(".btn-cancel").text("Close");
-        if(!curvalCount) this.storage.removeItem('recovering');
+        if (!curvalCount) this.storage.removeItem('recovering');
       });
     });
 
     const item = await this.storage.getItem(this.table_key);
 
-    if (item){
+    if (item) {
       $modal.modal('show');
       $modal.find('.btn-js-delete-values').attr('disabled', 'disabled').hide();
     }