Port question functionality to TypeScript

app/javascript/packs/application.ts

@@ -5,6 +5,7 @@ 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';
+import initQuestion from 'retrospring/features/questionbox';
 
 start();
 document.addEventListener('turbolinks:load', initAnswerbox);
@@ -13,3 +14,4 @@ document.addEventListener('DOMContentLoaded', initUser);
 document.addEventListener('turbolinks:load', initSettings);
 document.addEventListener('DOMContentLoaded', initLists);
 document.addEventListener('DOMContentLoaded', initQuestionbox);
+document.addEventListener('DOMContentLoaded', initQuestion);

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

@@ -0,0 +1,52 @@
+import Rails from '@rails/ujs';
+
+import { showNotification, showErrorNotification } from 'utilities/notifications';
+
+export function questionAnswerHandler(event: Event): void {
+  const button = event.target as HTMLButtonElement;
+  const questionId = button.dataset.qId;
+
+  button.disabled = true;
+  document.querySelector<HTMLInputElement>('textarea#q-answer-text').readOnly = true;
+
+  const shareTo = [];
+  Array.from(document.querySelectorAll(`input[type=checkbox][name=share][data-q-id=${questionId}]:checked`))
+    .forEach((element: HTMLInputElement) => {
+      shareTo.push(element.dataset.service);
+    });
+
+  const data = {
+    id: questionId,
+    answer: document.querySelector<HTMLInputElement>('textarea#q-answer-text').value,
+    share: JSON.stringify(shareTo),
+    inbox: String(false)
+  };
+
+  Rails.ajax({
+    url: '/ajax/answer',
+    type: 'POST',
+    data: new URLSearchParams(data).toString(),
+    success: (data) => {
+      if (!data.success) {
+        showErrorNotification(data.message);
+        button.disabled = false;
+        document.querySelector<HTMLInputElement>('textarea#q-answer-text').readOnly = false;
+        return false;
+      }
+
+      showNotification(data.message);
+      document.querySelector('div#q-answer-box').remove();
+    },
+    error: (data, status, xhr) => {
+      console.log(data, status, xhr);
+      button.disabled = false;
+      document.querySelector<HTMLInputElement>('textarea#q-answer-text').readOnly = false;
+    }
+  });
+}
+
+export function questionAnswerInputHandler(event: KeyboardEvent): void {
+  if (event.keyCode == 13 && (event.ctrlKey || event.metaKey)) {
+    document.querySelector<HTMLButtonElement>('button#q-answer-btn').click();
+  }
+}

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

@@ -0,0 +1,9 @@
+import registerEvents from 'utilities/registerEvents';
+import { questionAnswerHandler, questionAnswerInputHandler } from './answer';
+
+export default (): void => {
+  registerEvents([
+    { type: 'click', target: '#q-answer-btn', handler: questionAnswerHandler, global: true },
+    { type: 'keydown', target: '#q-answer-text', handler: questionAnswerInputHandler, global: true }
+  ]);
+}