wip: move xhr management to a module and refactor

It sort of work for common cases, but edge cases needs work,
specifically the login flow.

umap/static/umap/js/modules/global.js

@@ -1,8 +1,9 @@
 import * as L from '../../vendors/leaflet/leaflet-src.esm.js'
 import URLs from './urls.js'
+import { Request, ServerRequest } from './request.js'
 // Import modules and export them to the global scope.
 // For the not yet module-compatible JS out there.
 
 // Copy the leaflet module, it's expected by leaflet plugins to be writeable.
 window.L = { ...L }
-window.umap = { URLs }
+window.umap = { URLs, Request, ServerRequest }

umap/static/umap/js/modules/request.js

@@ -0,0 +1,146 @@
+// Uses `L._`` from Leaflet.i18n which we cannot import as a module yet
+import { Evented, DomUtil } from '../../vendors/leaflet/leaflet-src.esm.js'
+
+const BaseRequest = Evented.extend({
+  _fetch: async function (method, uri, headers, data) {
+    const id = Math.random()
+    this.fire('dataloading', { id: id })
+    let response
+
+    try {
+      response = await fetch(uri, {
+        method: method,
+        mode: 'cors',
+        headers: headers,
+        body: data,
+      })
+    } catch (error) {
+      this._onError(error)
+      this.fire('dataload', { id: id })
+      return
+    }
+    if (!response.ok) {
+      this.onNok(response.status, await response.text())
+    }
+    // TODO
+    // - error handling
+    // - UI connection / events
+    // - preflight mode in CORS ?
+
+    this.fire('dataload', { id: id })
+    return response
+  },
+
+  get: async function (uri, headers) {
+    return await this._fetch('GET', uri, headers)
+  },
+
+  post: async function (uri, headers, data) {
+    return await this._fetch('POST', uri, headers, data)
+  },
+
+  _onError: function (error) {
+    console.error(error)
+    this.onError(error)
+  },
+  onError: function (error) {},
+  onNok: function (status) {},
+})
+
+export const Request = BaseRequest.extend({
+  initialize: function (ui) {
+    this.ui = ui
+  },
+  onError: function (error) {
+    console.error(error)
+    this.ui.alert({ content: L._('Problem in the response'), level: 'error' })
+  },
+  onNok: function (status, message) {
+    this.onError(message)
+  },
+})
+
+// Adds uMap specifics to requests handling
+// like logging, CSRF, etc.
+export const ServerRequest = Request.extend({
+  post: async function (uri, headers, data) {
+    const token = document.cookie.replace(
+      /(?:(?:^|.*;\s*)csrftoken\s*\=\s*([^;]*).*$)|^.*$/,
+      '$1'
+    )
+    if (token) {
+      headers = headers || {}
+      headers['X-CSRFToken'] = token
+    }
+    const response = await Request.prototype.post.call(this, uri, headers, data)
+    return this._handle_json_response(response)
+  },
+
+  get: async function (uri, headers) {
+    const response = await Request.prototype.get.call(this, uri, headers)
+    return this._handle_json_response(response)
+  },
+
+  _handle_json_response: async function (response) {
+    try {
+      const data = await response.json()
+      this._handle_server_instructions(data)
+      return [data, response]
+    } catch (error) {
+      this._onError(error)
+    }
+  },
+
+  _handle_server_instructions: function (data) {
+    // In some case, the response contains instructions
+    if (data.redirect) {
+      const newPath = data.redirect
+      if (window.location.pathname == newPath) {
+        window.location.reload() // Keep the hash, so the current view
+      } else {
+        window.location = newPath
+      }
+    } else if (data.info) {
+      this.ui.alert({ content: data.info, level: 'info' })
+      this.ui.closePanel()
+    } else if (data.error) {
+      this.ui.alert({ content: data.error, level: 'error' })
+    } else if (data.html) {
+      const ui_options = { data }
+      let listen_options
+      this.ui.openPanel(ui_options)
+    }
+  },
+
+  onNok: function (status, message) {
+    if (status === 403) {
+      this.ui.alert({
+        content: message || L._('Action not allowed :('),
+        level: 'error',
+      })
+    } else if (status === 412) {
+      const msg = L._(
+        'Woops! Someone else seems to have edited the data. You can save anyway, but this will erase the changes made by others.'
+      )
+      const actions = [
+        {
+          label: L._('Save anyway'),
+          callback: function () {
+            // TODO
+            delete settings.headers['If-Match']
+            this._fetch(settings)
+          },
+        },
+        {
+          label: L._('Cancel'),
+        },
+      ]
+      this.ui.alert({
+        content: msg,
+        level: 'error',
+        duration: 100000,
+        actions: actions,
+      })
+    }
+  },
+})

umap/static/umap/js/umap.autocomplete.js

@@ -13,7 +13,7 @@ L.U.AutoComplete = L.Class.extend({
   initialize: function (el, options) {
     this.el = el
     const ui = new L.U.UI(document.querySelector('header'))
-    this.xhr = new L.U.Xhr(ui)
+    this.server = new window.umap.ServerRequest(ui)
     L.setOptions(this, options)
     let CURRENT = null
     try {
@@ -158,21 +158,19 @@ L.U.AutoComplete = L.Class.extend({
     }
   },
 
-  search: function () {
+  search: async function () {
-    const val = this.input.value
+    let val = this.input.value
     if (val.length < this.options.minChar) {
       this.clear()
       return
     }
     if (`${val}` === `${this.CACHE}`) return
     else this.CACHE = val
-    this._do_search(
+    val = val.toLowerCase()
-      val,
+    const [{ data }, response] = await this.server.get(
-      function (data) {
+      `/agnocomplete/AutocompleteUser/?q=${encodeURIComponent(val)}`
-        this.handleResults(data.data)
-      },
-      this
     )
+    this.handleResults(data)
   },
 
   createResult: function (item) {
@@ -272,14 +270,6 @@ L.U.AutoComplete.Ajax = L.U.AutoComplete.extend({
       label: option.innerHTML,
     }
   },
-
-  _do_search: function (val, callback, context) {
-    val = val.toLowerCase()
-    this.xhr.get(`/agnocomplete/AutocompleteUser/?q=${encodeURIComponent(val)}`, {
-      callback: callback,
-      context: context || this,
-    })
-  },
 })
 
 L.U.AutoComplete.Ajax.SelectMultiple = L.U.AutoComplete.Ajax.extend({

umap/static/umap/js/umap.datalayer.permissions.js

@@ -51,20 +51,15 @@ L.U.DataLayerPermissions = L.Class.extend({
       pk: this.datalayer.umap_id,
     })
   },
-  save: function () {
+  save: async function () {
     if (!this.isDirty) return this.datalayer.map.continueSaving()
     const formData = new FormData()
     formData.append('edit_status', this.options.edit_status)
-    this.datalayer.map.post(this.getUrl(), {
+    await this.datalayer.map.server.post(this.getUrl(), {}, formData)
-      data: formData,
-      context: this,
-      callback: function (data) {
     this.commit()
     this.isDirty = false
     this.datalayer.map.continueSaving()
   },
-    })
-  },
 
   commit: function () {
     L.Util.extend(this.datalayer.options.permissions, this.options)

umap/static/umap/js/umap.forms.js

@@ -685,7 +685,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
     return !this.value() || this.value() === this.obj.getMap().options.default_iconUrl
   },
 
-  showSymbolsTab: function () {
+  showSymbolsTab: async function () {
     this.openTab('symbols')
     this.searchInput = L.DomUtil.create('input', '', this.body)
     this.searchInput.type = 'search'
@@ -695,13 +695,11 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
     if (this.pictogram_list) {
       this.buildSymbolsList()
     } else {
-      this.builder.map.get(this.builder.map.options.urls.pictogram_list_json, {
+      const [{ pictogram_list }, response] = await this.builder.map.server.get(
-        callback: (data) => {
+        this.builder.map.options.urls.pictogram_list_json
-          this.pictogram_list = data.pictogram_list
+      )
+      this.pictogram_list = pictogram_list
       this.buildSymbolsList()
-        },
-        context: this,
-      })
     }
   },
 

umap/static/umap/js/umap.js

@@ -98,9 +98,12 @@ L.U.Map.include({
     this.urls = new window.umap.URLs(this.options.urls)
 
     this.ui = new L.U.UI(this._container)
-    this.xhr = new L.U.Xhr(this.ui)
+    this.server = new window.umap.ServerRequest(this.ui)
-    this.xhr.on('dataloading', (e) => this.fire('dataloading', e))
+    this.server.on('dataloading', (e) => this.fire('dataloading', e))
-    this.xhr.on('dataload', (e) => this.fire('dataload', e))
+    this.server.on('dataload', (e) => this.fire('dataload', e))
+    this.request = new window.umap.Request(this.ui)
+    this.request.on('dataloading', (e) => this.fire('dataloading', e))
+    this.request.on('dataload', (e) => this.fire('dataload', e))
 
     this.initLoader()
     this.name = this.options.name
@@ -1083,7 +1086,7 @@ L.U.Map.include({
     return properties
   },
 
-  saveSelf: function () {
+  saveSelf: async function () {
     const geojson = {
       type: 'Feature',
       geometry: this.geometry(),
@@ -1093,10 +1096,8 @@ L.U.Map.include({
     formData.append('name', this.options.name)
     formData.append('center', JSON.stringify(this.geometry()))
     formData.append('settings', JSON.stringify(geojson))
-    this.post(this.urls.get('map_save', { map_id: this.options.umap_id }), {
+    const uri = this.urls.get('map_save', { map_id: this.options.umap_id })
-      data: formData,
+    const [data, response] = await this.server.post(uri, {}, formData)
-      context: this,
-      callback: function (data) {
     let duration = 3000,
       alert = { content: L._('Map has been saved!'), level: 'info' }
     if (!this.options.umap_id) {
@@ -1150,8 +1151,6 @@ L.U.Map.include({
     this.ui.closePanel()
     this.permissions.save()
   },
-    })
-  },
 
   save: function () {
     if (!this.isDirty) return
@@ -1820,23 +1819,6 @@ L.U.Map.include({
     this.loader.onAdd(this)
   },
 
-  post: function (url, options) {
-    options = options || {}
-    options.listener = this
-    this.xhr.post(url, options)
-  },
-
-  get: function (url, options) {
-    options = options || {}
-    options.listener = this
-    this.xhr.get(url, options)
-  },
-
-  ajax: function (options) {
-    options.listener = this
-    this.xhr._ajax(options)
-  },
-
   initContextMenu: function () {
     this.contextmenu = new L.U.ContextMenu(this)
     this.contextmenu.enable()

umap/static/umap/js/umap.layer.js

@@ -670,13 +670,12 @@ L.U.DataLayer = L.Evented.extend({
     return this
   },
 
-  fetchData: function () {
+  fetchData: async function () {
     if (!this.umap_id) return
     if (this._loading) return
     this._loading = true
-    this.map.get(this._dataUrl(), {
+    const [geojson, response] = await this.map.server.get(this._dataUrl())
-      callback: function (geojson, response) {
+    this._last_modified = response.headers['Last-Modified']
-        this._last_modified = response.getResponseHeader('Last-Modified')
     // FIXME: for now this property is set dynamically from backend
     // And thus it's not in the geojson file in the server
     // So do not let all options to be reset
@@ -692,9 +691,6 @@ L.U.DataLayer = L.Evented.extend({
     this.fire('loaded')
     this._loading = false
   },
-      context: this,
-    })
-  },
 
   fromGeoJSON: function (geojson) {
     this.addData(geojson)
@@ -1062,13 +1058,10 @@ L.U.DataLayer = L.Evented.extend({
     reader.onload = (e) => this.importRaw(e.target.result, type)
   },
 
-  importFromUrl: function (url, type) {
+  importFromUrl: async function (uri, type) {
-    url = this.map.localizeUrl(url)
+    uri = this.map.localizeUrl(uri)
-    this.map.xhr._ajax({
+    const response = await this.map.request.get(uri)
-      verb: 'GET',
+    this.importRaw(await response.text(), type)
-      uri: url,
-      callback: (data) => this.importRaw(data, type),
-    })
   },
 
   getColor: function () {
@@ -1385,8 +1378,8 @@ L.U.DataLayer = L.Evented.extend({
     }
   },
 
-  buildVersionsFieldset: function (container) {
+  buildVersionsFieldset: async function (container) {
-    const appendVersion = function (data) {
+    const appendVersion = (data) => {
       const date = new Date(parseInt(data.at, 10))
       const content = `${date.toLocaleString(L.lang)} (${parseInt(data.size) / 1000}Kb)`
       const el = L.DomUtil.create('div', 'umap-datalayer-version', versionsContainer)
@@ -1402,25 +1395,18 @@ L.U.DataLayer = L.Evented.extend({
     }
 
     const versionsContainer = L.DomUtil.createFieldset(container, L._('Versions'), {
-      callback: function () {
+      callback: async function () {
-        this.map.xhr.get(this.getVersionsUrl(), {
+        const [{versions}, response] = await this.map.server.get(this.getVersionsUrl())
-          callback: function (data) {
+        versions.forEach(appendVersion)
-            for (let i = 0; i < data.versions.length; i++) {
-              appendVersion.call(this, data.versions[i])
-            }
-          },
-          context: this,
-        })
       },
       context: this,
     })
   },
 
-  restore: function (version) {
+  restore: async function (version) {
     if (!this.map.editEnabled) return
     if (!confirm(L._('Are you sure you want to restore this version?'))) return
-    this.map.xhr.get(this.getVersionUrl(version), {
+    const [geojson, response] = await this.map.server.get(this.getVersionUrl(version))
-      callback: function (geojson) {
     if (geojson._storage) geojson._umap_options = geojson._storage // Retrocompat.
     if (geojson._umap_options) this.setOptions(geojson._umap_options)
     this.empty()
@@ -1428,9 +1414,6 @@ L.U.DataLayer = L.Evented.extend({
     else this.addData(geojson)
     this.isDirty = true
   },
-      context: this,
-    })
-  },
 
   featuresToGeoJSON: function () {
     const features = []
@@ -1548,7 +1531,7 @@ L.U.DataLayer = L.Evented.extend({
     return this.isReadOnly() || this.isRemoteLayer()
   },
 
-  save: function () {
+  save: async function () {
     if (this.isDeleted) return this.saveDelete()
     if (!this.isLoaded()) {
       return
@@ -1566,9 +1549,10 @@ L.U.DataLayer = L.Evented.extend({
       map_id: this.map.options.umap_id,
       pk: this.umap_id,
     })
-    this.map.post(saveUrl, {
+    const headers =  this._last_modified
-      data: formData,
+      ? { 'If-Unmodified-Since': this._last_modified }
-      callback: function (data, response) {
+      : {}
+    const [data, response] = await this.map.server.post(saveUrl, headers, formData)
     // Response contains geojson only if save has conflicted and conflicts have
     // been resolved. So we need to reload to get extra data (saved from someone else)
     if (data.geojson) {
@@ -1577,7 +1561,7 @@ L.U.DataLayer = L.Evented.extend({
       delete data.geojson
     }
     this._geojson = geojson
-        this._last_modified = response.getResponseHeader('Last-Modified')
+    this._last_modified = response.headers['Last-Modified']
     this.setUmapId(data.id)
     this.updateOptions(data)
     this.backupOptions()
@@ -1587,23 +1571,13 @@ L.U.DataLayer = L.Evented.extend({
     this.isDirty = false
     this.permissions.save()
   },
-      context: this,
-      headers: this._last_modified
-        ? { 'If-Unmodified-Since': this._last_modified }
-        : {},
-    })
-  },
 
-  saveDelete: function () {
+  saveDelete: async function () {
-    const callback = function () {
+    if (this.umap_id) {
+      await this.map.server.post(this.getDeleteUrl())
+    }
     this.isDirty = false
     this.map.continueSaving()
-    }
-    if (!this.umap_id) return callback.call(this)
-    this.map.xhr.post(this.getDeleteUrl(), {
-      callback: callback,
-      context: this,
-    })
   },
 
   getMap: function () {

umap/static/umap/js/umap.permissions.js

@@ -131,9 +131,8 @@ L.U.MapPermissions = L.Class.extend({
     this.map.ui.openPanel({ data: { html: container }, className: 'dark' })
   },
 
-  attach: function () {
+  attach: async function () {
-    this.map.post(this.getAttachUrl(), {
+    await this.map.server.post(this.getAttachUrl())
-      callback: function () {
     this.options.owner = this.map.options.user
     this.map.ui.alert({
       content: L._('Map has been attached to your account'),
@@ -141,11 +140,8 @@ L.U.MapPermissions = L.Class.extend({
     })
     this.map.ui.closePanel()
   },
-      context: this,
-    })
-  },
 
-  save: function () {
+  save: async function () {
     if (!this.isDirty) return this.map.continueSaving()
     const formData = new FormData()
     if (!this.isAnonymousMap() && this.options.editors) {
@@ -159,17 +155,12 @@ L.U.MapPermissions = L.Class.extend({
       formData.append('owner', this.options.owner && this.options.owner.id)
       formData.append('share_status', this.options.share_status)
     }
-    this.map.post(this.getUrl(), {
+    await this.map.server.post(this.getUrl(), {}, formData)
-      data: formData,
-      context: this,
-      callback: function (data) {
     this.commit()
     this.isDirty = false
     this.map.continueSaving()
     this.map.fire('postsync')
   },
-    })
-  },
 
   getUrl: function () {
     return L.Util.template(this.map.options.urls.map_update_permissions, {