Extract ajax and events into own utils modules

app/javascript/alchemy/admin/node_tree.js

@@ -1,5 +1,6 @@
 import Sortable from "sortablejs"
-import { on, ajax } from "./utils"
+import ajax from "./utils/ajax"
+import { on } from "./utils/events"
 
 function displayNodeFolders() {
   document.querySelectorAll("li.menu-item").forEach((el) => {

app/javascript/alchemy/admin/utils/ajax.js

@@ -0,0 +1,40 @@
+function buildPromise(xhr) {
+  return new Promise((resolve, reject) => {
+    xhr.onload = () => {
+      try {
+        resolve({
+          data: JSON.parse(xhr.responseText),
+          status: xhr.status
+        })
+      } catch (error) {
+        reject(new Error(JSON.parse(xhr.responseText).error))
+      }
+    }
+    xhr.onerror = () => {
+      reject(new Error(xhr.statusText))
+    }
+  })
+}
+
+function getToken() {
+  const metaTag = document.querySelector('meta[name="csrf-token"]')
+  return metaTag.attributes.content.textContent
+}
+
+export default function ajax(method, url, data) {
+  const xhr = new XMLHttpRequest()
+  const promise = buildPromise(xhr)
+
+  xhr.open(method, url)
+  xhr.setRequestHeader("Content-type", "application/json; charset=utf-8")
+  xhr.setRequestHeader("Accept", "application/json")
+  xhr.setRequestHeader("X-CSRF-Token", getToken())
+
+  if (data) {
+    xhr.send(JSON.stringify(data))
+  } else {
+    xhr.send()
+  }
+
+  return promise
+}

app/javascript/alchemy/admin/utils/events.js

@@ -0,0 +1,16 @@
+export function on(eventName, baseSelector, targetSelector, callback) {
+  document.querySelectorAll(baseSelector).forEach((baseNode) => {
+    baseNode.addEventListener(eventName, (evt) => {
+      const targets = Array.from(baseNode.querySelectorAll(targetSelector))
+      let currentNode = evt.target
+
+      while (currentNode !== baseNode) {
+        if (targets.includes(currentNode)) {
+          callback.call(currentNode, evt)
+          return
+        }
+        currentNode = currentNode.parentElement
+      }
+    })
+  })
+}