Handle clicking the comment submit button

app/javascript/retrospring/features/answerbox/comment/index.ts

@@ -1,6 +1,6 @@
 import registerEvents from "retrospring/utilities/registerEvents";
 import { commentDestroyHandler } from "./destroy";
-import {commentComposeEnd, commentComposeStart, commentCreateHandler} from "./new";
+import { commentComposeEnd, commentComposeStart, commentCreateClickHandler, commentCreateKeyboardHandler } from "./new";
 import { commentReportHandler } from "./report";
 import { commentSmileHandler } from "./smile";
 import { commentToggleHandler } from "./toggle";
@@ -13,6 +13,7 @@ export default (): void => {
     { type: 'click', target: '[data-action=ab-comment-destroy]', handler: commentDestroyHandler, global: true },
     { type: 'compositionstart', target: '[name=ab-comment-new]', handler: commentComposeStart, global: true },
     { type: 'compositionend', target: '[name=ab-comment-new]', handler: commentComposeEnd, global: true },
-    { type: 'keydown', target: '[name=ab-comment-new]', handler: commentCreateHandler, global: true }
+    { type: 'keydown', target: '[name=ab-comment-new]', handler: commentCreateKeyboardHandler, global: true },
+    { type: 'click', target: '[name=ab-comment-new-submit]', handler: commentCreateClickHandler, global: true }
   ]);
 }

app/javascript/retrospring/features/answerbox/comment/new.ts

@@ -5,7 +5,50 @@ import { showNotification, showErrorNotification } from 'utilities/notifications
 
 let compositionJustEnded = false;
 
-export function commentCreateHandler(event: KeyboardEvent): boolean {
+function createComment(input: HTMLInputElement, id: string, counter: Element, group: Element) {
+  if (input.value.length > 512) {
+    group.classList.add('has-error');
+    return true;
+  }
+
+  input.disabled = true;
+
+  post('/ajax/create_comment', {
+    body: {
+      answer: id,
+      comment: input.value
+    },
+    contentType: 'application/json'
+  })
+    .then(async response => {
+      const data = await response.json;
+
+      if (data.success) {
+        document.querySelector(`#ab-comments-${id}`).innerHTML = data.render;
+        const commentCount = document.getElementById(`#ab-comment-count-${id}`);
+        if (commentCount) {
+          commentCount.innerHTML = data.count;
+        }
+        input.value = '';
+        counter.innerHTML = String(512);
+
+        const sub = document.querySelector<HTMLElement>(`[data-action=ab-submarine][data-a-id="${id}"]`);
+        sub.dataset.torpedo = "no"
+        sub.children[0].nextSibling.textContent = ' ' + I18n.translate('voc.unsubscribe');
+      }
+
+      showNotification(data.message, data.success);
+    })
+    .catch(err => {
+      console.log(err);
+      showErrorNotification(I18n.translate('frontend.error.message'));
+    })
+    .finally(() => {
+      input.disabled = false;
+    });
+}
+
+export function commentCreateKeyboardHandler(event: KeyboardEvent): boolean {
   if (compositionJustEnded && event.which == 13) {
     compositionJustEnded = false;
     return;
@@ -19,49 +62,22 @@ export function commentCreateHandler(event: KeyboardEvent): boolean {
   if ((event.ctrlKey || event.metaKey) && event.which === 13) {
     event.preventDefault();
 
-    if (input.value.length > 512) {
+    createComment(input, id, counter, group);
-      group.classList.add('has-error');
-      return true;
-    }
-
-    input.disabled = true;
-
-    post('/ajax/create_comment', {
-      body: {
-        answer: id,
-        comment: input.value
-      },
-      contentType: 'application/json'
-    })
-      .then(async response => {
-        const data = await response.json;
-
-        if (data.success) {
-          document.querySelector(`#ab-comments-${id}`).innerHTML = data.render;
-          const commentCount = document.getElementById(`#ab-comment-count-${id}`);
-          if (commentCount) {
-            commentCount.innerHTML = data.count;
-          }
-          input.value = '';
-          counter.innerHTML = String(512);
-
-          const sub = document.querySelector<HTMLElement>(`[data-action=ab-submarine][data-a-id="${id}"]`);
-          sub.dataset.torpedo = "no"
-          sub.children[0].nextSibling.textContent = ' ' + I18n.translate('voc.unsubscribe');
-        }
-
-        showNotification(data.message, data.success);
-      })
-      .catch(err => {
-        console.log(err);
-        showErrorNotification(I18n.translate('frontend.error.message'));
-      })
-      .finally(() => {
-        input.disabled = false;
-      });
   }
 }
 
+export function commentCreateClickHandler(event: MouseEvent): void {
+  event.preventDefault();
+
+  const button = event.target as HTMLButtonElement;
+  const id = button.dataset.aId;
+  const input = document.querySelector<HTMLInputElement>(`[name="ab-comment-new"][data-a-id="${id}"]`);
+  const counter = document.querySelector(`#ab-comment-charcount-${id}`);
+  const group = document.querySelector(`[name=ab-comment-new-group][data-a-id="${id}"]`);
+
+  createComment(input, id, counter, group);
+}
+
 export function commentComposeStart(): boolean {
   compositionJustEnded = false;
   return true;