Port report dialog functionality to TypeScript

app/javascript/legacy/report.coffee

@@ -1,29 +0,0 @@
-window.reportDialog = (type, target, callback) ->
-  swal
-    title: translate('frontend.report.confirm.title', {type: type})
-    text: translate('frontend.report.confirm.text')
-    type: "input"
-    showCancelButton: true
-    confirmButtonColor: "#DD6B55"
-    confirmButtonText: translate('views.actions.report')
-    cancelButtonText: translate('views.actions.cancel')
-    closeOnConfirm: true
-    inputPlaceholder: translate('frontend.report.confirm.input')
-  , (value) ->
-    if typeof value == "boolean" && value == false
-      return false
-
-    $.ajax
-      url: '/ajax/report'
-      type: 'POST'
-      data:
-        id: target
-        type: type
-        reason: value
-      success: (data, status, jqxhr) ->
-        showNotification data.message, data.success
-      error: (jqxhr, status, error) ->
-        console.log jqxhr, status, error
-        showNotification translate('frontend.error.message'), false
-      complete: (jqxhr, status) ->
-        callback type, target, jqxhr, status

app/javascript/packs/application.ts

@@ -1,3 +1,5 @@
+require('sweetalert/dist/sweetalert.css');
+
 import start from 'retrospring/common';
 import initAnswerbox from 'retrospring/features/answerbox/index';
 import initInbox from 'retrospring/features/inbox/index';

app/javascript/packs/legacy.coffee

@@ -12,15 +12,12 @@ import Cookies from 'js-cookie'
 
 require('nprogress/nprogress.css')
 require('jquery.growl/stylesheets/jquery.growl.css')
-require('sweetalert/dist/sweetalert.css')
 
 # this file is generated by Rails
 import I18n from '../legacy/i18n'
-
 import '../legacy/memes'
 import '../legacy/notifications'
 import '../legacy/pagination'
-import '../legacy/report'
 import '../legacy/locale-box'
 import '../legacy/util'
 
@@ -40,17 +37,10 @@ window.showNotification = (text, success=true) ->
 I18n.defaultLocale = 'en';
 I18n.locale = Cookies.get('hl') || 'en';
 
-window.showNotificationXHRError = (jqxhr, status, error) ->
-  console.log jqxhr, status, error
-  showNotification translate('frontend.error.message'), false
-
 $(document).on "click", "button#create-account", ->
   Turbolinks.visit "/sign_up"
 
 _ready = ->
-  if typeof sweetAlertInitialize != "undefined"
-    sweetAlertInitialize()
-
   if document.getElementById('particles')?
     jumbo         = $ '.j2-jumbo'
     bodyColorOrig = jumbo.css 'background-color'

app/javascript/retrospring/utilities/reportDialog.ts

@@ -0,0 +1,40 @@
+import Rails from '@rails/ujs';
+import swal from 'sweetalert';
+
+import I18n from '../../legacy/i18n';
+import { showNotification, showErrorNotification } from 'utilities/notifications';
+
+export function reportDialog(type: string, target: string): void {
+  swal({
+    title: I18n.translate('frontend.report.confirm.title', { type: type }),
+    text: I18n.translate('frontend.report.confirm.text'),
+    type: 'input',
+    showCancelButton: true,
+    confirmButtonColor: "#DD6B55",
+    confirmButtonText: I18n.translate('views.actions.report'),
+    cancelButtonText: I18n.translate('views.actions.cancel'),
+    closeOnConfirm: true,
+    inputPlaceholder: I18n.translate('frontend.report.confirm.input')
+  }, (returnValue) => {
+    if (returnValue === false) {
+      return;
+    }
+    
+    Rails.ajax({
+      url: '/ajax/report',
+      type: 'POST',
+      data: new URLSearchParams({
+        id: String(target),
+        type: type,
+        reason: returnValue
+      }).toString(),
+      success: (data) => {
+        showNotification(data.message);
+      },
+      error: (data, status, xhr) => {
+        console.log(data, status, xhr);
+        showErrorNotification(I18n.translate('frontend.error.message'));
+      }
+    });
+  });
+}