diff --git a/app/javascript/retrospring/controllers/reaction_controller.ts b/app/javascript/retrospring/controllers/reaction_controller.ts new file mode 100644 index 000000000..f35fd8ae5 --- /dev/null +++ b/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; + } +} diff --git a/app/javascript/retrospring/initializers/stimulus.ts b/app/javascript/retrospring/initializers/stimulus.ts index 737fe7851..505d23ade 100644 --- a/app/javascript/retrospring/initializers/stimulus.ts +++ b/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); } diff --git a/app/views/reactions/_create.html.haml b/app/views/reactions/_create.html.haml index a82c1d609..d756ea895 100644 --- a/app/views/reactions/_create.html.haml +++ b/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 diff --git a/app/views/reactions/_destroy.html.haml b/app/views/reactions/_destroy.html.haml index 23dffdaf2..6516f1ef4 100644 --- a/app/views/reactions/_destroy.html.haml +++ b/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