refactor(js): use httpRequest instead of getJSON and ajax

app/javascript/components/MapEditor/hooks.ts

@@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect } from 'react';
-import { getJSON, ajax, fire } from '@utils';
+import { httpRequest, fire } from '@utils';
 import type { Feature, FeatureCollection, Geometry } from 'geojson';
 
 export const SOURCE_SELECTION_UTILISATEUR = 'selection_utilisateur';
@@ -37,7 +37,9 @@ export function useFeatureCollection(
         type: 'FeatureCollection',
         features: callback(features)
       }));
-      ajax({ url, type: 'GET' }).catch(() => null);
+      httpRequest(url)
+        .js()
+        .catch(() => null);
     },
     [url, setFeatureCollection]
   );
@@ -99,7 +101,10 @@ export function useFeatureCollection(
       try {
         const newFeatures: Feature[] = [];
         for (const feature of features) {
-          const data = await getJSON(url, { feature, source }, 'post');
+          const data = await httpRequest(url, {
+            method: 'post',
+            json: { feature, source }
+          }).json<{ feature: Feature & { lid?: string | number } }>();
           if (data) {
             if (source == SOURCE_SELECTION_UTILISATEUR) {
               data.feature.lid = feature.id;
@@ -128,9 +133,15 @@ export function useFeatureCollection(
         for (const feature of features) {
           const id = feature.properties?.id;
           if (id) {
-            await getJSON(`${url}/${id}`, { feature }, 'patch');
+            await httpRequest(`${url}/${id}`, {
+              method: 'patch',
+              json: { feature }
+            }).json();
           } else {
-            const data = await getJSON(url, { feature, source }, 'post');
+            const data = await httpRequest(url, {
+              method: 'post',
+              json: { feature, source }
+            }).json<{ feature: Feature & { lid?: string | number } }>();
             if (data) {
               if (source == SOURCE_SELECTION_UTILISATEUR) {
                 data.feature.lid = feature.id;
@@ -157,7 +168,7 @@ export function useFeatureCollection(
         const deletedFeatures = [];
         for (const feature of features) {
           const id = feature.properties?.id;
-          await getJSON(`${url}/${id}`, null, 'delete');
+          await httpRequest(`${url}/${id}`, { method: 'delete' }).json();
           deletedFeatures.push(feature);
         }
         removeFeatures(deletedFeatures, external);

app/javascript/components/TypesDeChampEditor/OperationsQueue.ts

@@ -1,4 +1,4 @@
-import { getJSON } from '@utils';
+import { httpRequest } from '@utils';
 import invariant from 'tiny-invariant';
 
 type Operation = {
@@ -45,7 +45,7 @@ export class OperationsQueue {
     const url = `${this.baseUrl}${path}`;
 
     try {
-      const data = await getJSON(url, payload, method);
+      const data = await httpRequest(url, { method, json: payload }).json();
       resolve(data);
     } catch (e) {
       handleError(e as OperationError, reject);

app/javascript/components/shared/queryClient.ts

@@ -1,5 +1,5 @@
 import { QueryClient, QueryFunction } from 'react-query';
-import { getJSON, isNumeric } from '@utils';
+import { httpRequest, isNumeric } from '@utils';
 import { matchSorter } from 'match-sorter';
 
 type Gon = {
@@ -57,39 +57,27 @@ function buildURL(scope: string, term: string, extra?: string) {
   return `${api_geo_url}/${scope}?nom=${term}&limit=${API_GEO_QUERY_LIMIT}`;
 }
 
-function buildOptions(): [RequestInit, AbortController | null] {
-  if (window.AbortController) {
-    const controller = new AbortController();
-    const signal = controller.signal;
-    return [{ signal }, controller];
-  }
-  return [{}, null];
-}
-
 const defaultQueryFn: QueryFunction<unknown, QueryKey> = async ({
-  queryKey: [scope, term, extra]
+  queryKey: [scope, term, extra],
+  signal
 }) => {
   if (scope == 'pays') {
-    return matchSorter(await getPays(), term, { keys: ['label'] });
+    return matchSorter(await getPays(signal), term, { keys: ['label'] });
   }
 
   const url = buildURL(scope, term, extra);
-  const [options, controller] = buildOptions();
-  const promise = fetch(url, options).then((response) => {
-    if (response.ok) {
-      return response.json();
-    }
-    throw new Error(`Error fetching from "${scope}" API`);
-  });
-  return Object.assign(promise, {
-    cancel: () => controller && controller.abort()
-  });
+  return httpRequest(url, { csrf: false, signal }).json();
 };
 
 let paysCache: { label: string }[];
-async function getPays(): Promise<{ label: string }[]> {
+async function getPays(signal?: AbortSignal): Promise<{ label: string }[]> {
   if (!paysCache) {
-    paysCache = await getJSON('/api/pays', null);
+    const data = await httpRequest('/api/pays', { signal }).json<
+      typeof paysCache
+    >();
+    if (data) {
+      paysCache = data;
+    }
   }
   return paysCache;
 }

app/javascript/shared/remote-poller.js

@@ -1,4 +1,4 @@
-import { ajax, delegate } from '@utils';
+import { httpRequest, delegate } from '@utils';
 
 addEventListener('DOMContentLoaded', () => {
   attachementPoller.deactivate();
@@ -69,7 +69,9 @@ class RemotePoller {
     for (let url of urls) {
       // Start the request. The JS payload in the response will update the page.
       // (Errors are ignored, because background tasks shouldn't report errors to the user.)
-      ajax({ url, type: 'get' }).catch(() => {});
+      httpRequest(url)
+        .js()
+        .catch(() => {});
     }
   }