Refactor utils ajax 2 (#2615)

* 🏷️ removes generic type for argument header

* fixes typo

* 🐛 combines argument header with actual headers

* provides a way to abort ongoing ajax requests

* makes ajax signature more flexible

app/javascript/src/Plans/components/ApplicationPlansTableCard.jsx

@@ -23,7 +23,7 @@ const ApplicationPlansTableCard = ({ plans: initialPlans, count, searchHref }: P
   const [plans, setPlans] = React.useState<ApplicationPlan[]>(initialPlans)
   const [isLoading, setIsLoading] = React.useState<boolean>(false)
 
-  const handleActionCopy = (path) => ajax(path, 'POST')
+  const handleActionCopy = (path) => ajax(path, { method: 'POST' })
     .then(data => data.json()
       .then(res => {
         if (data.status === 201) {
@@ -45,7 +45,7 @@ const ApplicationPlansTableCard = ({ plans: initialPlans, count, searchHref }: P
   const handleActionDelete = (path) => confirm('Are you sure?')
     .then(confirmed => {
       if (confirmed) {
-        return ajax(path, 'DELETE')
+        return ajax(path, { method: 'DELETE' })
           .then(data => data.json().then(res => {
             if (data.status === 200) {
               alert.notice(res.notice)
@@ -61,7 +61,7 @@ const ApplicationPlansTableCard = ({ plans: initialPlans, count, searchHref }: P
     })
     .finally(() => setIsLoading(false))
 
-  const handleActionPublishHide = (path) => ajax(path, 'POST')
+  const handleActionPublishHide = (path) => ajax(path, { method: 'POST' })
     .then(data => data.json()
       .then(res => {
         if (data.status === 200) {

app/javascript/src/Plans/components/DefaultPlanSelectCard.jsx

@@ -31,7 +31,7 @@ const DefaultPlanSelectCard = ({ product, initialDefaultPlan, path }: Props): Re
     const body = plan.id >= 0 ? new URLSearchParams({ id: plan.id.toString() }) : undefined
     const url = path.replace(':id', String(product.id))
 
-    ajax(url, 'POST', body)
+    ajax(url, { method: 'POST', body })
       .then(data => {
         if (data.ok) {
           alert.notice('Default plan was updated')

app/javascript/src/utilities/ajax.js

@@ -2,25 +2,24 @@
 
 export type Method = 'GET' | 'POST' | 'DELETE'
 
-type FetchFunction = (url: string, method: Method, body?: URLSearchParams) => Promise<Response>
+type FetchOptions = { method: Method, body?: URLSearchParams, signal?: AbortSignal }
+type FetchFunction = (url: string, opts: FetchOptions) => Promise<Response>
 
-const _ajax = (headers: Object) => {
+const _ajax = (headers: { [key: string]: string }) => {
   const meta = document.querySelector('meta[name="csrf-token"]')
   const token = (meta && meta.getAttribute('content')) || ''
 
-  return function (url, method, body?) {
+  return function (url, { method, body, signal }) {
     return fetch(url, {
       method: method,
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
-        'X-CSRF-Token': token
-      },
-      body
+      headers: { ...headers, 'X-CSRF-Token': token },
+      body,
+      signal
     })
   }
 }
 
-const ajax: FetchFunction = _ajax({ 'ContentType': 'application/x-www-form-urlencoded; charset=UTF-8' })
+const ajax: FetchFunction = _ajax({ 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' })
 const ajaxJSON: FetchFunction = _ajax({ 'Content-Type': 'application/json; charset=UTF-8' })
 
 export { ajax, ajaxJSON }