Merge pull request #659 from Retrospring/feature/request-js-lists

Refactor lists TS functionality to use `@rails/request.js`

app/javascript/retrospring/features/lists/create.ts

@@ -1,4 +1,4 @@
-import Rails from '@rails/ujs';
+import { post } from '@rails/request.js';
 import { showNotification, showErrorNotification } from 'utilities/notifications';
 import I18n from 'retrospring/i18n';
 
@@ -6,24 +6,25 @@ export function createListHandler(event: Event): void {
   const button = event.target as HTMLButtonElement;
   const input = document.querySelector<HTMLInputElement>('input#new-list-name');
 
-  Rails.ajax({
+  post('/ajax/create_list', {
-    url: '/ajax/create_list',
+    body: {
-    type: 'POST',
-    data: new URLSearchParams({
       name: input.value,
       user: button.dataset.user
-    }).toString(),
+    },
-    success: (data) => {
+    contentType: 'application/json'
+  })
+    .then(async response => {
+      const data = await response.json;
+
       if (data.success) {
         document.querySelector('#lists-list ul.list-group').insertAdjacentHTML('beforeend', data.render);
       }
       
       showNotification(data.message, data.success);
-    },
+    })
-    error: (data, status, xhr) => {
+    .catch(err => {
-      console.log(data, status, xhr);
+      console.log(err);
       showErrorNotification(I18n.translate('frontend.error.message'));
-    }
     });
 }
 

app/javascript/retrospring/features/lists/destroy.ts

@@ -1,4 +1,4 @@
-import Rails from '@rails/ujs';
+import { post } from '@rails/request.js';
 import swal from 'sweetalert';
 import { showNotification, showErrorNotification } from 'utilities/notifications';
 import I18n from 'retrospring/i18n';
@@ -18,13 +18,15 @@ export function destroyListHandler(event: Event): void {
     cancelButtonText: I18n.translate('voc.cancel'),
     closeOnConfirm: true 
   }, () => {
-    Rails.ajax({
+    post('/ajax/destroy_list', {
-      url: '/ajax/destroy_list',
+      body: {
-      type: 'POST',
-      data: new URLSearchParams({
         list: list
-      }).toString(),
+      },
-      success: (data) => {
+      contentType: 'application/json'
+    })
+      .then(async response => {
+        const data = await response.json;
+
         if (data.success) {
           const element = document.querySelector(`li.list-group-item#list-${list}`);
 
@@ -34,11 +36,10 @@ export function destroyListHandler(event: Event): void {
         }
         
         showNotification(data.message, data.success);
-      },
+      })
-      error: (data, status, xhr) => {
+      .catch(err => {
-        console.log(data, status, xhr);
+        console.log(err);
         showErrorNotification(I18n.translate('frontend.error.message'));
-      }
       });
   });
 }

app/javascript/retrospring/features/lists/membership.ts

@@ -1,4 +1,4 @@
-import Rails from '@rails/ujs';
+import { post } from '@rails/request.js';
 import { showNotification, showErrorNotification } from 'utilities/notifications';
 import I18n from 'retrospring/i18n';
 
@@ -12,15 +12,17 @@ export function listMembershipHandler(event: Event): void {
 
   memberCount += checkbox.checked ? 1 : -1;
 
-  Rails.ajax({
+  post('/ajax/list_membership', {
-    url: '/ajax/list_membership',
+    body: {
-    type: 'POST',
-    data: new URLSearchParams({
       list: list,
       user: checkbox.dataset.user,
       add: String(checkbox.checked)
-    }).toString(),
+    },
-    success: (data) => {
+    contentType: 'application/json'
+  })
+    .then(async response => {
+      const data = await response.json;
+
       if (data.success) {
         checkbox.checked = data.checked;
         memberCountElement.innerHTML = I18n.t('frontend.list.item.members', { count: memberCount });
@@ -28,13 +30,12 @@ export function listMembershipHandler(event: Event): void {
       }
 
       showNotification(data.message, data.success);
-    },
+    })
-    error: (data, status, xhr) => {
+    .catch(err => {
-      console.log(data, status, xhr);
+      console.log(err);
       showErrorNotification(I18n.translate('frontend.error.message'));
-    },
+    })
-    complete: () => {
+    .finally(() => {
       checkbox.removeAttribute('disabled');
-    }
     });
 }