Merge pull request #657 from Retrospring/feature/request-js-answerbox

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

app/javascript/retrospring/features/answerbox/comment/destroy.ts

@@ -1,4 +1,4 @@
-import Rails from '@rails/ujs';
+import { post } from '@rails/request.js';
 import swal from 'sweetalert';
 
 import I18n from 'retrospring/i18n';
@@ -25,24 +25,23 @@ export function commentDestroyHandler(event: Event): void {
       return;
     }
     
-    Rails.ajax({
-      url: '/ajax/destroy_comment',
-      type: 'POST',
-      data: new URLSearchParams({
+    post('/ajax/destroy_comment', {
+      body: {
         comment: id
-      }).toString(),
-      success: (data) => {
-        if (!data.success) return false;
+      },
+      contentType: 'application/json'
+    })
+      .then(async response => {
+        const data = await response.json;
 
         showNotification(data.message);
 
         document.querySelector(`[data-comment-id="${id}"]`).remove();
-      },
-      error: (data, status, xhr) => {
-        console.log(data, status, xhr);
+      })
+      .catch(err => {
+        console.log(err);
         showErrorNotification(I18n.translate('frontend.error.message'));
         button.disabled = false;
-      }
-    });
+      });
   });
 }

app/javascript/retrospring/features/answerbox/comment/new.ts

@@ -1,4 +1,4 @@
-import Rails from '@rails/ujs';
+import { post } from '@rails/request.js';
 
 import I18n from 'retrospring/i18n';
 import { showNotification, showErrorNotification } from 'utilities/notifications';
@@ -19,14 +19,16 @@ export function commentCreateHandler(event: KeyboardEvent): boolean {
 
     input.disabled = true;
 
-    Rails.ajax({
-      url: '/ajax/create_comment',
-      type: 'POST',
-      data: new URLSearchParams({
+    post('/ajax/create_comment', {
+      body: {
         answer: id,
         comment: input.value
-      }).toString(),
-      success: (data) => {
+      },
+      contentType: 'application/json'
+    })
+      .then(async response => {
+        const data = await response.json;
+
         if (data.success) {
           document.querySelector(`#ab-comments-${id}`).innerHTML = data.render;
           document.querySelector(`#ab-comment-count-${id}`).innerHTML = data.count;
@@ -39,14 +41,13 @@ export function commentCreateHandler(event: KeyboardEvent): boolean {
         }
 
         showNotification(data.message, data.success);
-      },
-      error: (data, status, xhr) => {
-        console.log(data, status, xhr);
+      })
+      .catch(err => {
+        console.log(err);
         showErrorNotification(I18n.translate('frontend.error.message'));
-      },
-      complete: () => {
+      })
+      .finally(() => {
         input.disabled = false;
-      }
-    });
+      });
   }
 }

app/javascript/retrospring/features/answerbox/comment/smile.ts

@@ -1,4 +1,4 @@
-import Rails from '@rails/ujs';
+import { post } from '@rails/request.js'; 
 
 import I18n from 'retrospring/i18n';
 import { showNotification, showErrorNotification } from 'utilities/notifications';
@@ -22,25 +22,27 @@ export function commentSmileHandler(event: Event): void {
 
   button.disabled = true;
 
-  Rails.ajax({
-    url: targetUrl,
-    type: 'POST',
-    data: new URLSearchParams({
+  post(targetUrl, {
+    body: {
       id: id
-    }).toString(),
-    success: (data) => {
+    },
+    contentType: 'application/json'
+  })
+    .then(async response => {
+      const data = await response.json;
+
       success = data.success;
       if (success) {
         document.querySelector(`#ab-comment-smile-count-${id}`).innerHTML = String(count);
       }
 
       showNotification(data.message, data.success);
-    },
-    error: (data, status, xhr) => {
-      console.log(data, status, xhr);
+    })
+    .catch(err => {
+      console.log(err);
       showErrorNotification(I18n.translate('frontend.error.message'));
-    },
-    complete: () => {
+    })
+    .finally(() => {
       button.disabled = false;
 
       if (success) {
@@ -53,6 +55,5 @@ export function commentSmileHandler(event: Event): void {
             break;
         }
       }
-    }
-  });
+    });
 }

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

@@ -1,4 +1,4 @@
-import Rails from '@rails/ujs';
+import { post } from '@rails/request.js';
 import { showErrorNotification, showNotification } from 'utilities/notifications';
 import swal from 'sweetalert';
 
@@ -23,24 +23,25 @@ export function answerboxDestroyHandler(event: Event): void {
       button.disabled = false;
       return;
     }
-    
-    Rails.ajax({
-      url: '/ajax/destroy_answer',
-      type: 'POST',
-      data: new URLSearchParams({
+
+    post('/ajax/destroy_answer', {
+      body: {
         answer: answerId
-      }).toString(),
-      success: (data) => {
+      },
+      contentType: 'application/json'
+    })
+      .then(async response => {
+        const data = await response.json;
+
         if (data.success) {
           document.querySelector(`.answerbox[data-id="${answerId}"]`).remove();
         }
         
         showNotification(data.message, data.success);
-      },
-      error: (data, status, xhr) => {
-        console.log(data, status, xhr);
+      })
+      .catch(err => {
+        console.log(err);
         showErrorNotification(I18n.translate('frontend.error.message'));
-      }
-    });
+      });
   });
 }

app/javascript/retrospring/features/answerbox/smile.ts

@@ -1,4 +1,4 @@
-import Rails from '@rails/ujs';
+import { post } from '@rails/request.js';
 
 import I18n from 'retrospring/i18n';
 import { showNotification, showErrorNotification } from 'utilities/notifications';
@@ -22,25 +22,27 @@ export function answerboxSmileHandler(event: Event): void {
 
   button.disabled = true;
 
-  Rails.ajax({
-    url: targetUrl,
-    type: 'POST',
-    data: new URLSearchParams({
+  post(targetUrl, {
+    body: {
       id: id
-    }).toString(),
-    success: (data) => {
+    },
+    contentType: 'application/json'
+  })
+    .then(async response => {
+      const data = await response.json;
+
       success = data.success;
       if (success) {
         document.querySelector(`#ab-smile-count-${id}`).innerHTML = String(count);
       }
 
       showNotification(data.message, data.success);
-    },
-    error: (data, status, xhr) => {
-      console.log(data, status, xhr);
+    })
+    .catch(err => {
+      console.log(err);
       showErrorNotification(I18n.translate('frontend.error.message'));
-    },
-    complete: () => {
+    })
+    .finally(() => {
       button.disabled = false;
 
       if (success) {
@@ -53,6 +55,5 @@ export function answerboxSmileHandler(event: Event): void {
             break;
         }
       }
-    }
-  });
+    });
 }

app/javascript/retrospring/features/answerbox/subscribe.ts

@@ -1,4 +1,4 @@
-import Rails from '@rails/ujs';
+import { post } from '@rails/request.js';
 
 import I18n from 'retrospring/i18n';
 import { showNotification, showErrorNotification } from 'utilities/notifications';
@@ -20,13 +20,15 @@ export function answerboxSubscribeHandler(event: Event): void {
     targetUrl = '/ajax/unsubscribe';
   }
 
-  Rails.ajax({
-    url: targetUrl,
-    type: 'POST',
-    data: new URLSearchParams({
+  post(targetUrl, {
+    body: {
       answer: id
-    }).toString(),
-    success: (data) => {
+    },
+    contentType: 'application/json'
+  })
+    .then(async response => {
+      const data = await response.json;
+
       if (data.success) {
         button.dataset.torpedo = ["yes", "no"][torpedo];
         button.children[0].nextSibling.textContent = ' ' + (torpedo ? I18n.translate('voc.unsubscribe') : I18n.translate('voc.subscribe'));
@@ -34,10 +36,9 @@ export function answerboxSubscribeHandler(event: Event): void {
       } else {
         showErrorNotification(I18n.translate(`frontend.subscription.fail.${torpedo ? 'subscribe' : 'unsubscribe'}`));
       }
-    },
-    error: (data, status, xhr) => {
-      console.log(data, status, xhr);
+    })
+    .catch(err => {
+      console.log(err);
       showErrorNotification(I18n.translate('frontend.error.message'));
-    }
-  });
+    });
 }

app/javascript/retrospring/features/settings/mute.ts

@@ -1,4 +1,3 @@
-import Rails from '@rails/ujs';
 import { destroy, post } from '@rails/request.js';
 
 function createSubmitEvent(