Add ReactionController to disable button during submits

app/javascript/retrospring/controllers/reaction_controller.ts

@@ -0,0 +1,15 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ['button'];
+
+  declare readonly buttonTarget: HTMLButtonElement;
+
+  enable(): void {
+    this.buttonTarget.disabled = false;
+  }
+
+  disable(): void {
+    this.buttonTarget.disabled = true;
+  }
+}

app/javascript/retrospring/initializers/stimulus.ts

@@ -16,6 +16,7 @@ import NavigationController from "retrospring/controllers/navigation_controller"
 import ShareController from "retrospring/controllers/share_controller";
 import ClipboardController from "retrospring/controllers/clipboard_controller";
 import QuestionboxFocusController from "retrospring/controllers/questionbox_focus_controller";
+import ReactionController from "retrospring/controllers/reaction_controller";
 
 /**
  * This module sets up Stimulus and our controllers
@@ -43,4 +44,5 @@ export default function (): void {
   window['Stimulus'].register('share', ShareController);
   window['Stimulus'].register('clipboard', ClipboardController);
   window['Stimulus'].register('questionbox-focus', QuestionboxFocusController);
+  window['Stimulus'].register('reaction', ReactionController);
 }

app/views/reactions/_create.html.haml

@@ -1,13 +1,19 @@
 - if type == "Answer"
   = button_to create_reactions_path(id: target.id, username: target.user.screen_name),
-              form: { class: "d-inline-block", id: "reaction-#{type}-#{target.id}" },
-              class: "btn btn-link answerbox__action smile" do
+              form: { class: "d-inline-block",
+                      id: "reaction-#{type}-#{target.id}",
+                      data: { controller: :reaction, action: "turbo:submit-start->reaction#disable turbo:submit-end->reaction#enable" } },
+              class: "btn btn-link answerbox__action smile",
+              data: { reaction_target: :button } do
     %i.fa.fa-fw.fa-smile-o
     %span= target.smile_count
 
 - if type == "Comment"
   = button_to create_comment_reactions_path(id: target.id, username: target.user.screen_name),
-              form: { class: "d-inline-block", id: "reaction-#{type}-#{target.id}" },
-              class: "btn btn-link answerbox__action smile" do
+              form: { class: "d-inline-block",
+                      id: "reaction-#{type}-#{target.id}",
+                      data: { controller: :reaction, action: "turbo:submit-start->reaction#disable turbo:submit-end->reaction#enable" } },
+              class: "btn btn-link answerbox__action smile",
+              data: { reaction_target: :button } do
     %i.fa.fa-fw.fa-smile-o
     %span= target.smile_count

app/views/reactions/_destroy.html.haml

@@ -1,15 +1,21 @@
 - if type == "Answer"
   = button_to destroy_reactions_path(id: target.id, username: target.user.screen_name),
               method: :delete,
-              form: { class: "d-inline-block", id: "reaction-#{type}-#{target.id}" },
-              class: "btn btn-link answerbox__action unsmile" do
+              form: { class: "d-inline-block",
+                      id: "reaction-#{type}-#{target.id}",
+                      data: { controller: :reaction, action: "turbo:submit-start->reaction#disable turbo:submit-end->reaction#enable" } },
+              class: "btn btn-link answerbox__action unsmile",
+              data: { reaction_target: :button } do
     %i.fa.fa-fw.fa-smile-o
     %span= target.smile_count
 
 - if type == "Comment"
   = button_to destroy_comment_reactions_path(id: target.id, username: target.user.screen_name),
               method: :delete,
-              form: { class: "d-inline-block", id: "reaction-#{type}-#{target.id}" },
-              class: "btn btn-link answerbox__action unsmile" do
+              form: { class: "d-inline-block",
+                      id: "reaction-#{type}-#{target.id}",
+                      data: { controller: :reaction, action: "turbo:submit-start->reaction#disable turbo:submit-end->reaction#enable" } },
+              class: "btn btn-link answerbox__action unsmile",
+              data: { reaction_target: :button } do
     %i.fa.fa-fw.fa-smile-o
     %span= target.smile_count