Port questionbox user functionality to TypeScript

app/javascript/packs/application.ts

@@ -4,6 +4,7 @@ import initInbox from 'retrospring/features/inbox/index';
 import initUser from 'retrospring/features/user';
 import initSettings from 'retrospring/features/settings/index';
 import initLists from 'retrospring/features/lists';
+import initQuestionbox from 'retrospring/features/questionbox';
 
 start();
 document.addEventListener('turbolinks:load', initAnswerbox);
@@ -11,3 +12,4 @@ document.addEventListener('DOMContentLoaded', initInbox);
 document.addEventListener('DOMContentLoaded', initUser);
 document.addEventListener('turbolinks:load', initSettings);
 document.addEventListener('DOMContentLoaded', initLists);
+document.addEventListener('DOMContentLoaded', initQuestionbox);

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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,59 @@
+import Rails from '@rails/ujs';
+import { showErrorNotification, showNotification } from 'utilities/notifications';
+import I18n from '../../../legacy/i18n';
+
+export function questionboxUserHandler(event: Event) {
+  const button = event.target as HTMLButtonElement;
+  const promote = button.dataset.promote === "true";
+  const anonymousQuestion = document.querySelector<HTMLInputElement>('input[name=qb-anonymous]')?.checked;
+
+  document.querySelector<HTMLInputElement>('textarea[name=qb-question]').readOnly = true;
+  button.disabled = true;
+
+  Rails.ajax({
+    url: '/ajax/ask',
+    type: 'POST',
+    data: new URLSearchParams({
+      rcpt: document.querySelector<HTMLInputElement>('input[name=qb-to]').value,
+      question: document.querySelector<HTMLInputElement>('textarea[name=qb-question]').value,
+      anonymousQuestion: String(anonymousQuestion)
+    }).toString(),
+    success: (data) => {
+      if (data.success) {
+        document.querySelector<HTMLInputElement>('textarea[name=qb-question]').value = '';
+
+        if (promote) {
+          const questionbox = document.querySelector('#question-box');
+          questionbox.classList.toggle('d-none');
+
+          const promote = document.querySelector('#question-box-promote');
+          promote.classList.toggle('d-none');
+        }
+      }
+      
+      showNotification(data.message, data.success);
+    },
+    error: (data, status, xhr) => {
+      console.log(data, status, xhr);
+      showErrorNotification(I18n.translate('frontend.error.message'));
+    },
+    complete: () => {
+      document.querySelector<HTMLInputElement>('textarea[name=qb-question]').readOnly = false;
+      button.disabled = false;
+    }
+  });
+}
+
+export function questionboxPromoteHandler(event: Event) {
+  const questionbox = document.querySelector('#question-box');
+  questionbox.classList.toggle('d-none');
+
+  const promote = document.querySelector('#question-box-promote');
+  promote.classList.toggle('d-none');
+}
+
+export function questionboxUserInputHandler(event: KeyboardEvent) {
+  if (event.keyCode == 13 && (event.ctrlKey || event.metaKey)) {
+    document.querySelector<HTMLButtonElement>(`button[name=qb-ask]`).click();
+  }
+}