Refactor Alchemy.xhr to use Promises

AlchemyCMS · Mar 25, 2020 · 36fb0aa · 36fb0aa
1 parent c9075bb
commit 36fb0aa
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 26 deletions.
diff --git a/app/assets/javascripts/alchemy/alchemy.node_tree.js b/app/assets/javascripts/alchemy/alchemy.node_tree.js
@@ -1,24 +1,18 @@
 Alchemy.NodeTree = {
   onFinishDragging: function (evt) {
     var url = Alchemy.routes.move_api_node_path(evt.item.dataset.id)
-    var xhr = Alchemy.xhr('PATCH', url)
     var data = {
       target_parent_id: evt.to.dataset.nodeId,
       new_position: evt.newIndex
     };
-    var json = JSON.stringify(data)
+    var ajax = Alchemy.ajax('PATCH', url, data)
 
-    evt.to.parentElement.dataset.folded = 'false'
-    evt.to.classList.remove('folded')
-    xhr.onload = function () {
-      response_json = JSON.parse(xhr.responseText)
-      if (xhr.readyState == 4 && xhr.status == "200") {
-        Alchemy.NodeTree.displayNodeFolders()
-      } else {
-        Alchemy.growl(response_json.error, 'error');
-      }
-    }
-    xhr.send(json)
+    ajax.then(function(response) {
+      Alchemy.growl('Successfully moved menu item.')
+      Alchemy.NodeTree.displayNodeFolders()
+    }).catch(function() {
+      Alchemy.growl(error.message || error);
+    })
   },
 
   displayNodeFolders: function () {
@@ -41,18 +35,15 @@ Alchemy.NodeTree = {
       var menu_item = this.closest('li.menu-item')
       var url = Alchemy.routes.toggle_folded_api_node_path(nodeId)
       var list = menu_item.querySelector('.children')
-      var xhr = Alchemy.xhr('PATCH', url)
+      var ajax = Alchemy.ajax('PATCH', url)
 
-      xhr.onload = function () {
-        if (xhr.readyState == 4 && xhr.status == "200") {
-          list.classList.toggle('folded')
-          menu_item.dataset.folded = menu_item.dataset.folded == 'true' ? 'false' : 'true'
-          Alchemy.NodeTree.displayNodeFolders();
-        } else {
-          Alchemy.growl('error folding');
-        }
-      }
-      xhr.send()
+      ajax.then(function() {
+        list.classList.toggle('folded')
+        menu_item.dataset.folded = menu_item.dataset.folded == 'true' ? 'false' : 'true'
+        Alchemy.NodeTree.displayNodeFolders();
+      }).catch(function(error){
+        Alchemy.growl(error.message || error);
+      });
     });
   },
 

diff --git a/app/assets/javascripts/alchemy/alchemy.utils.js b/app/assets/javascripts/alchemy/alchemy.utils.js
@@ -13,13 +13,33 @@ Alchemy.on = function (eventName, baseSelector, targetSelector, callback) {
   });
 }
 
-Alchemy.xhr = function(method, url) {
+Alchemy.ajax = function(method, url, data) {
   var xhr = new XMLHttpRequest()
   var token = document.querySelector('meta[name="csrf-token"]').attributes.content.textContent
+  var promise = new Promise(function (resolve, reject) {
+    xhr.onload = function() {
+      try {
+        resolve({
+          data: JSON.parse(xhr.responseText),
+          status: xhr.status
+        })
+      } catch (error) {
+        reject(new Error(JSON.parse(xhr.responseText).error))
+      }
+    };
+    xhr.onerror = function() {
+      reject(new Error(xhr.statusText))
+    }
+  });
   xhr.open(method, url);
   xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
   xhr.setRequestHeader('Accept', 'application/json');
   xhr.setRequestHeader('X-CSRF-Token', token)
+  if (data) {
+    xhr.send(JSON.stringify(data))
+  } else {
+    xhr.send()
+  }
 
-  return xhr;
+  return promise
 }