Merge pull request #660 from Retrospring/feature/request-js-moderation

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

app/controllers/ajax/moderation_controller.rb

@@ -59,7 +59,7 @@ class Ajax::ModerationController < AjaxController
       raise Errors::InvalidBanDuration unless %w[hours days weeks months].include? duration_unit
 
       expiry = DateTime.now + duration.public_send(duration_unit)
-      @response[:message] = I18n.t(".success.temporary", date: expiry.to_s)
+      @response[:message] = t(".success.temporary", date: expiry.to_s)
     end
 
     UseCase::User::Ban.call(

app/javascript/retrospring/features/moderation/ban.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';
@@ -44,16 +44,17 @@ export function banFormHandler(event: Event): void {
     }
   }
 
-  Rails.ajax({
+  post('/ajax/mod/ban', {
-    url: '/ajax/mod/ban',
+    body: data,
-    type: 'POST',
+    contentType: 'application/json'
-    data: new URLSearchParams(data).toString(),
+  })
-    success: (data) => {
+    .then(async response => {
+      const data = await response.json;
+
       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/moderation/blockAnon.ts

@@ -1,46 +1,47 @@
-import Rails from '@rails/ujs';
+import { post } from '@rails/request.js';
 import swal from 'sweetalert';
 
 import { showErrorNotification, showNotification } from "utilities/notifications";
 import I18n from "retrospring/i18n";
 
 export function blockAnonEventHandler(event: Event): void {
-    event.preventDefault();
+  event.preventDefault();
   
-    swal({
+  swal({
-        title: I18n.translate('frontend.mod_mute.confirm.title'),
+    title: I18n.translate('frontend.mod_mute.confirm.title'),
-        text: I18n.translate('frontend.mod_mute.confirm.text'),
+    text: I18n.translate('frontend.mod_mute.confirm.text'),
-        type: 'warning',
+    type: 'warning',
-        showCancelButton: true,
+    showCancelButton: true,
-        confirmButtonColor: "#DD6B55",
+    confirmButtonColor: "#DD6B55",
-        confirmButtonText: I18n.translate('voc.y'),
+    confirmButtonText: I18n.translate('voc.y'),
-        cancelButtonText: I18n.translate('voc.n'),
+    cancelButtonText: I18n.translate('voc.n'),
-        closeOnConfirm: true,
+    closeOnConfirm: true,
-    }, (dialogResult) => {
+  }, (dialogResult) => {
-        if (!dialogResult) {
+    if (!dialogResult) {
-            return;
+      return;
-        }
+    }
 
-        const sender: HTMLAnchorElement = event.target as HTMLAnchorElement;
+    const sender: HTMLAnchorElement = event.target as HTMLAnchorElement;
 
-        const data = {
+    const data = {
-            question: sender.getAttribute('data-q-id'),
+      question: sender.getAttribute('data-q-id'),
-            global: 'true'
+      global: 'true'
-        };
+    };
 
-        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;
 
-                showNotification(data.message);
+        if (!data.success) return false;
-            },
+
-            error: (data, status, xhr) => {
+        showNotification(data.message);
-                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/moderation/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';
@@ -18,22 +18,24 @@ export function destroyReportHandler(event: Event): void {
     cancelButtonText: I18n.translate('voc.cancel'),
     closeOnConfirm: true
   }, () => {
-    Rails.ajax({
+    post('/ajax/mod/destroy_report', {
-      url: '/ajax/mod/destroy_report',
+      body: {
-      type: 'POST',
-      data: new URLSearchParams({
         id: id
-      }).toString(),
+      },
-      success: (data) => {
+      contentType: 'application/json'
+    })
+      .then(async response => {
+        const data = await response.json;
+
         if (data.success) {
           document.querySelector(`.moderationbox[data-id="${id}"]`).remove();
         }
+
         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/moderation/privilege.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';
@@ -9,29 +9,29 @@ export function privilegeCheckHandler(event: Event): void {
 
   const privilegeType = checkbox.dataset.type;
 
-  Rails.ajax({
+  post('/ajax/mod/privilege', {
-    url: '/ajax/mod/privilege',
+    body: {
-    type: 'POST',
-    data: new URLSearchParams({
       user: checkbox.dataset.user,
       type: privilegeType,
       status: String(checkbox.checked)
-    }).toString(),
+    },
-    success: (data) => {
+    contentType: 'application/json'
+  })
+    .then(async response => {
+      const data = await response.json;
+
       if (data.success) {
         checkbox.checked = data.checked;
       }
 
       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'));
       checkbox.checked = false;
-    },
+    })
-    complete: () => {
+    .finally(() => {
       checkbox.disabled = false;
-    }
+    });
-  });
-
 }