Merge pull request #661 from Retrospring/feature/request-js-question

Refactor question(box) TS functionality to use `@rails/request.js`

app/javascript/retrospring/features/question/answer.ts

@@ -1,4 +1,4 @@
-import Rails from '@rails/ujs';
+import { post } from '@rails/request.js';
 
 import { showNotification, showErrorNotification } from 'utilities/notifications';
 
@@ -22,11 +22,13 @@ export function questionAnswerHandler(event: Event): void {
     inbox: String(false)
   };
 
-  Rails.ajax({
-    url: '/ajax/answer',
-    type: 'POST',
-    data: new URLSearchParams(data).toString(),
-    success: (data) => {
+  post('/ajax/answer', {
+    body: data,
+    contentType: 'application/json'
+  })
+    .then(async response => {
+      const data = await response.json;
+
       if (!data.success) {
         showErrorNotification(data.message);
         button.disabled = false;
@@ -37,13 +39,12 @@ export function questionAnswerHandler(event: Event): void {
       showNotification(data.message);
       document.querySelector('div#answers').insertAdjacentHTML('afterbegin', data.render);
       document.querySelector('div#q-answer-box').remove();
-    },
-    error: (data, status, xhr) => {
-      console.log(data, status, xhr);
+    })
+    .catch(err => {
+      console.log(err);
       button.disabled = false;
       document.querySelector<HTMLInputElement>('textarea#q-answer-text').readOnly = false;
-    }
-  });
+    });
 }
 
 export function questionAnswerInputHandler(event: KeyboardEvent): void {

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

@@ -1,10 +1,10 @@
-import Rails from '@rails/ujs';
+import { post } from '@rails/request.js';
 import { showErrorNotification, showNotification } from 'utilities/notifications';
 import swal from 'sweetalert';
 
 import I18n from 'retrospring/i18n';
 
-export function questionboxDestroyHandler(event: Event): void {
+export function questionDestroyHandler(event: Event): void {
   event.preventDefault();
   const button = event.target as HTMLButtonElement;
   const questionId = button.dataset.qId;
@@ -24,13 +24,15 @@ export function questionboxDestroyHandler(event: Event): void {
       return;
     }
 
-    Rails.ajax({
-      url: '/ajax/destroy_question',
-      type: 'POST',
-      data: new URLSearchParams({
+    post('/ajax/destroy_question', {
+      body: {
         question: questionId
-      }).toString(),
-      success: (data) => {
+      },
+      contentType: 'application/json'
+    })
+      .then(async response => {
+        const data = await response.json;
+
         if (data.success) {
           if (button.dataset.redirect !== undefined) {
             window.location.pathname = button.dataset.redirect;
@@ -43,11 +45,10 @@ export function questionboxDestroyHandler(event: Event): void {
         }
         
         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/question/index.ts

@@ -1,8 +1,12 @@
 import registerEvents from 'utilities/registerEvents';
 import { questionAnswerHandler, questionAnswerInputHandler } from './answer';
+import { questionDestroyHandler } from './destroy';
+import { questionReportHandler } from './report';
 
 export default (): void => {
   registerEvents([
+    { type: 'click', target: '[data-action=ab-question-report]', handler: questionReportHandler, global: true },
+    { type: 'click', target: '[data-action=ab-question-destroy]', handler: questionDestroyHandler, global: true },
     { type: 'click', target: '#q-answer-btn', handler: questionAnswerHandler, global: true },
     { type: 'keydown', target: '#q-answer-text', handler: questionAnswerInputHandler, global: true }
   ]);

app/javascript/retrospring/features/question/report.ts

@@ -1,6 +1,6 @@
 import { reportDialog } from 'utilities/reportDialog';
 
-export function questionboxReportHandler(event: Event): void {
+export function questionReportHandler(event: Event): void {
   event.preventDefault();
   const button = event.target as HTMLButtonElement;
   const questionId = button.dataset.qId;

app/javascript/retrospring/features/questionbox/all.ts

@@ -1,4 +1,4 @@
-import Rails from '@rails/ujs';
+import { post } from '@rails/request.js';
 import { showErrorNotification, showNotification } from 'utilities/notifications';
 import I18n from 'retrospring/i18n';
 
@@ -8,31 +8,32 @@ export function questionboxAllHandler(event: Event): void {
   button.disabled = true;
   document.querySelector<HTMLInputElement>('textarea[name=qb-all-question]').readOnly = true;
 
-  Rails.ajax({
-    url: '/ajax/ask',
-    type: 'POST',
-    data: new URLSearchParams({
+  post('/ajax/ask', {
+    body: {
       rcpt: 'followers',
       question: document.querySelector<HTMLInputElement>('textarea[name=qb-all-question]').value,
       anonymousQuestion: 'false'      
-    }).toString(),
-    success: (data) => {
+    },
+    contentType: 'application/json'
+  })
+    .then(async response => {
+      const data = await response.json;
+
       if (data.success) {
         document.querySelector<HTMLInputElement>('textarea[name=qb-all-question]').value = '';
         window['$']('#modal-ask-followers').modal('hide');
       }
       
       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;
       document.querySelector<HTMLInputElement>('textarea[name=qb-all-question]').readOnly = false;
-    }
-  });
+    });
 }
 
 export function questionboxAllInputHandler(event: KeyboardEvent): void {

app/javascript/retrospring/features/questionbox/index.ts

@@ -1,15 +1,11 @@
 import registerEvents from 'utilities/registerEvents';
 import { questionboxAllHandler, questionboxAllInputHandler } from './all';
-import { questionboxDestroyHandler } from './destroy';
-import { questionboxReportHandler } from './report';
 import { questionboxPromoteHandler, questionboxUserHandler, questionboxUserInputHandler } from './user';
 
 export default (): void => {
   registerEvents([
-    { type: 'click', target: '[data-action=ab-question-report]', handler: questionboxReportHandler, global: true },
     { type: 'click', target: '[name=qb-ask]', handler: questionboxUserHandler, global: true },
     { type: 'click', target: '#new-question', handler: questionboxPromoteHandler, global: true },
-    { type: 'click', target: '[data-action=ab-question-destroy]', handler: questionboxDestroyHandler, global: true },
     { type: 'click', target: '[name=qb-all-ask]', handler: questionboxAllHandler, global: true },
     { type: 'keydown', target: '[name=qb-question]', handler: questionboxUserInputHandler, global: true },
     { type: 'keydown', target: '[name=qb-all-question]', handler: questionboxAllInputHandler, global: true }

app/javascript/retrospring/features/questionbox/user.ts

@@ -1,4 +1,4 @@
-import Rails from '@rails/ujs';
+import { post } from '@rails/request.js';
 import { showErrorNotification, showNotification } from 'utilities/notifications';
 import I18n from 'retrospring/i18n';
 
@@ -15,15 +15,17 @@ export function questionboxUserHandler(event: Event): void {
   document.querySelector<HTMLInputElement>('textarea[name=qb-question]').readOnly = true;
   button.disabled = true;
 
-  Rails.ajax({
-    url: '/ajax/ask',
-    type: 'POST',
-    data: new URLSearchParams({
+  post('/ajax/ask', {
+    body: {
       rcpt: document.querySelector<HTMLInputElement>('input[name=qb-to]').value,
       question: document.querySelector<HTMLInputElement>('textarea[name=qb-question]').value,
       anonymousQuestion: String(anonymousQuestion)      
-    }).toString(),
-    success: (data) => {
+    },
+    contentType: 'application/json'
+  })
+    .then(async response => {
+      const data = await response.json;
+
       if (data.success) {
         document.querySelector<HTMLInputElement>('textarea[name=qb-question]').value = '';
 
@@ -37,16 +39,15 @@ export function questionboxUserHandler(event: Event): void {
       }
       
       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(() => {
       document.querySelector<HTMLInputElement>('textarea[name=qb-question]').readOnly = false;
       button.disabled = false;
-    }
-  });
+    });
 }
 
 export function questionboxPromoteHandler(): void {