Refactored code and added await to stop race conditions

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,43 +42,44 @@ 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 => {
         $body.append(`<div class="alert alert-danger"><h4>Critical error restoring values</h4><p>${e}</p></div>`);
       }).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();
     }