Merge pull request #658 from Retrospring/feature/request-js-inbox

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

app/javascript/retrospring/features/inbox/delete.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';
@@ -43,21 +43,19 @@ export function deleteAllQuestionsHandler(event: Event): void {
       return;
     }
 
-    Rails.ajax({
+    post('/ajax/delete_all_inbox')
-      url: '/ajax/delete_all_inbox',
+      .then(async response => {
-      type: 'POST',
+        const data = await response.json;
-      dataType: 'json',
+
-      success: (data) => {
         if (!data.success) return false;
 
         updateDeleteButton(false);
         document.querySelector('#entries').innerHTML = 'Nothing to see here!';
-      },
+      })
-      error: (data, status, xhr) => {
+      .catch(err => {
-        console.log(data, status, xhr);
+        console.log(err);
         showErrorNotification(I18n.translate('frontend.error.message'));
-      }
+      });
-    });
   });
 }
 
@@ -77,20 +75,18 @@ export function deleteAllAuthorQuestionsHandler(event: Event): void {
   }, (returnValue) => {
     if (returnValue === null) return false;
 
-    Rails.ajax({
+    post(`/ajax/delete_all_inbox/${location.pathname.split('/')[2]}`)
-      url: `/ajax/delete_all_inbox/${location.pathname.split('/')[2]}`,
+      .then(async response => {
-      type: 'POST',
+        const data = await response.json;
-      dataType: 'json',
+
-      success: (data) => {
         if (!data.success) return false;
 
         updateDeleteButton(false);
         document.querySelector('#entries').innerHTML = 'Nothing to see here!';
-      },
+      })
-      error: (data, status, xhr) => {
+      .catch(err => {
-        console.log(data, status, xhr);
+        console.log(err);
         showErrorNotification(I18n.translate('frontend.error.message'));
-      }
+      });
-    });
   });
 }

app/javascript/retrospring/features/inbox/entry/answer.ts

@@ -1,4 +1,4 @@
-import Rails from '@rails/ujs';
+import { post } from '@rails/request.js';
 
 import { updateDeleteButton } from '../delete';
 import { showNotification, showErrorNotification } from 'utilities/notifications';
@@ -22,11 +22,13 @@ export function answerEntryHandler(event: Event): void {
     inbox: 'true'
   };
 
-  Rails.ajax({
+  post('/ajax/answer', {
-    url: '/ajax/answer',
+    body: data,
-    type: 'POST',
+    contentType: 'application/json'
-    data: new URLSearchParams(data).toString(),
+  })
-    success: (data) => {
+    .then(async response => {
+      const data = await response.json;
+
       if (!data.success) {
         showErrorNotification(data.message);
         element.disabled = false;
@@ -35,12 +37,11 @@ export function answerEntryHandler(event: Event): void {
       updateDeleteButton(false);
       showNotification(data.message);
       (inboxEntry as HTMLElement).remove();
-    },
+    })
-    error: (data, status, xhr) => {
+    .catch(err => {
-      console.log(data, status, xhr);
+      console.log(err);
       element.disabled = false;
-    }
+    });
-  });
 }
 
 export function answerEntryInputHandler(event: KeyboardEvent): void {

app/javascript/retrospring/features/inbox/entry/blockAnon.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";
@@ -7,24 +7,25 @@ export function blockAnonEventHandler(event: Event): void {
     const element: HTMLAnchorElement = event.target as HTMLAnchorElement;
 
     const data = {
-        question: element.getAttribute('data-q-id'),
+      question: element.getAttribute('data-q-id'),
     };
 
-    Rails.ajax({
+    post('/ajax/block_anon', {
-        url: '/ajax/block_anon',
+      body: data,
-        type: 'POST',
+      contentType: 'application/json'
-        data: new URLSearchParams(data).toString(),
+    })
-        success: (data) => {
+      .then(async response => {
-            if (!data.success) return false;
+        const data = await response.json;
-            const inboxEntry: Node = element.closest('.inbox-entry');
 
-            showNotification(data.message);
+        if (!data.success) return false;
+        const inboxEntry: Node = element.closest('.inbox-entry');
 
-            (inboxEntry as HTMLElement).remove();
+        showNotification(data.message);
-        },
+
-        error: (data, status, xhr) => {
+        (inboxEntry as HTMLElement).remove();
-            console.log(data, status, xhr);
+      })
-            showErrorNotification(I18n.translate('frontend.error.message'));
+      .catch(err => {
-        }
+        console.log(err);
-    });
+        showErrorNotification(I18n.translate('frontend.error.message'));        
+      });
 }

app/javascript/retrospring/features/inbox/entry/delete.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';
@@ -28,11 +28,13 @@ export function deleteEntryHandler(event: Event): void {
       return;
     }
 
-    Rails.ajax({
+    post('/ajax/delete_inbox', {
-      url: '/ajax/delete_inbox',
+      body: data,
-      type: 'POST',
+      contentType: 'application/json'
-      data: new URLSearchParams(data).toString(),
+    })
-      success: (data) => {
+      .then(async response => {
+        const data = await response.json;
+
         if (!data.success) return false;
         const inboxEntry: Node = element.closest('.inbox-entry');
 
@@ -40,11 +42,10 @@ export function deleteEntryHandler(event: Event): void {
         showNotification(data.message);
 
         (inboxEntry as HTMLElement).remove();
-      },
+      })
-      error: (data, status, xhr) => {
+      .catch(err => {
-        console.log(data, status, xhr);
+        console.log(err);
         showErrorNotification(I18n.translate('frontend.error.message'));
-      }
+      });
-    });
   })
 }

app/javascript/retrospring/features/inbox/generate.ts

@@ -1,23 +1,21 @@
-import Rails from '@rails/ujs';
+import { post } from '@rails/request.js';
 
 import I18n from 'retrospring/i18n';
 import { updateDeleteButton } from './delete';
 import { showErrorNotification } from 'utilities/notifications';
 
 export function generateQuestionHandler(): void {
-  Rails.ajax({
+  post('/ajax/generate_question')
-    url: '/ajax/generate_question',
+    .then(async response => {
-    type: 'POST',
+      const data = await response.json;
-    dataType: 'json',
+
-    success: (data) => {
       if (!data.success) return false;
 
       document.querySelector('#entries').insertAdjacentHTML('afterbegin', data.render);
       updateDeleteButton();
-    },
+    })
-    error: (data, status, xhr) => {
+    .catch(err => {
-      console.log(data, status, xhr);
+      console.log(err);
       showErrorNotification(I18n.translate('frontend.error.message'));      
-    }
+    });
-  });
 }