From 849d4f74f263e6327c838f680598de189a7bcf9d Mon Sep 17 00:00:00 2001 From: Karina Kwiatek Date: Sat, 11 Mar 2023 19:48:04 +0100 Subject: [PATCH] Move comments to a turbo frame --- app/controllers/ajax/comment_controller.rb | 4 +++- app/controllers/comment_controller.rb | 10 ++++++++++ app/views/answerbox/_comments.html.haml | 21 ++------------------ app/views/application/_answerbox.html.haml | 23 ++++++++++++++++++++-- app/views/comment/index.html.haml | 3 +++ config/locales/views.en.yml | 8 ++++---- config/locales/voc.en.yml | 1 + config/routes.rb | 1 + 8 files changed, 45 insertions(+), 26 deletions(-) create mode 100644 app/controllers/comment_controller.rb create mode 100644 app/views/comment/index.html.haml diff --git a/app/controllers/ajax/comment_controller.rb b/app/controllers/ajax/comment_controller.rb index 72dd305e..c2ef3341 100644 --- a/app/controllers/ajax/comment_controller.rb +++ b/app/controllers/ajax/comment_controller.rb @@ -14,10 +14,12 @@ class Ajax::CommentController < AjaxController return end + comments = Comment.where(answer:).includes([{user: :profile}, :smiles]) + @response[:status] = :okay @response[:message] = t(".success") @response[:success] = true - @response[:render] = render_to_string(partial: 'answerbox/comments', locals: { a: answer }) + @response[:render] = render_to_string(partial: 'answerbox/comments', locals: { a: answer, comments: }) @response[:count] = answer.comment_count end diff --git a/app/controllers/comment_controller.rb b/app/controllers/comment_controller.rb new file mode 100644 index 00000000..62def069 --- /dev/null +++ b/app/controllers/comment_controller.rb @@ -0,0 +1,10 @@ +# frozen_string_literal: true + +class CommentController < ApplicationController + def index + answer = Answer.find(params[:id]) + comments = Comment.where(answer:).includes([{user: :profile}, :smiles]) + + render "index", locals: { a: answer, comments: } + end +end diff --git a/app/views/answerbox/_comments.html.haml b/app/views/answerbox/_comments.html.haml index 023990e9..62a1035c 100644 --- a/app/views/answerbox/_comments.html.haml +++ b/app/views/answerbox/_comments.html.haml @@ -1,8 +1,8 @@ -- if a.comments.all.count.zero? +- if comments.all.count.zero? = t(".none") - else %ul.comment__container - - a.comments.order(:created_at).each do |comment| + - comments.order(:created_at).each do |comment| %li.comment{ data: { comment_id: comment.id } } %div{ style: "height: 0; width: 0" }= render "modal/comment_smiles", comment: comment .d-flex @@ -24,20 +24,3 @@ %button.btn.btn-link.btn-sm.dropdown-toggle{ data: { bs_toggle: :dropdown }, aria: { expanded: false } } %span.caret = render "actions/comment", comment: comment, answer: a -- if user_signed_in? - %button.d-none{ name: "ab-open-and-comment", data: { a_id: a.id, selection_hotkey: "c" } } - .comment__compose-wrapper{ - name: "ab-comment-new-group", - data: { a_id: a.id, controller: "character-count", character_count_max_value: 512 } - } - .form-group.has-feedback.comment__input-group.input-group - %textarea.form-control.comment__input{ type: :text, placeholder: t(".placeholder"), name: "ab-comment-new", data: { a_id: a.id, "character-count-target": "input" } } - .comment__submit-wrapper - %button.btn.btn-primary{ - type: :button, - name: "ab-comment-new-submit", - title: t(".action"), - data: { a_id: a.id, "character-count-target": "action" } - } - %i.fa.fa-paper-plane-o - %span.text-muted.form-control-feedback.comment__character-count{ id: "ab-comment-charcount-#{a.id}", data: { "character-count-target": "counter" } } 512 diff --git a/app/views/application/_answerbox.html.haml b/app/views/application/_answerbox.html.haml index b84a5f17..c6236f3c 100644 --- a/app/views/application/_answerbox.html.haml +++ b/app/views/application/_answerbox.html.haml @@ -35,5 +35,24 @@ .col-md-6.d-md-flex.answerbox__actions = render "answerbox/actions", a:, display_all:, subscribed_answer_ids: .card-footer{ id: "ab-comments-section-#{a.id}", class: display_all.nil? ? "d-none" : nil } - %div{ id: "ab-smiles-#{a.id}" }= render "answerbox/smiles", a: a - %div{ id: "ab-comments-#{a.id}" }= render "answerbox/comments", a: a + = turbo_frame_tag("ab-comments-list-#{a.id}", src: comments_path(a.question, a), loading: :lazy) do + .d-flex.justify-content-center + .spinner-border{ role: :status } + .visually-hidden= t("voc.loading") + - if user_signed_in? + %button.d-none{ name: "ab-open-and-comment", data: { a_id: a.id, selection_hotkey: "c" } } + .comment__compose-wrapper{ + name: "ab-comment-new-group", + data: { a_id: a.id, controller: "character-count", character_count_max_value: 512 } + } + .form-group.has-feedback.comment__input-group.input-group + %textarea.form-control.comment__input{ type: :text, placeholder: t(".comments.placeholder"), name: "ab-comment-new", data: { a_id: a.id, "character-count-target": "input" } } + .comment__submit-wrapper + %button.btn.btn-primary{ + type: :button, + name: "ab-comment-new-submit", + title: t(".comments.action"), + data: { a_id: a.id, "character-count-target": "action" } + } + %i.fa.fa-paper-plane-o + %span.text-muted.form-control-feedback.comment__character-count{ id: "ab-comment-charcount-#{a.id}", data: { "character-count-target": "counter" } } 512 diff --git a/app/views/comment/index.html.haml b/app/views/comment/index.html.haml new file mode 100644 index 00000000..d13a5cf0 --- /dev/null +++ b/app/views/comment/index.html.haml @@ -0,0 +1,3 @@ += turbo_frame_tag "ab-comments-list-#{a.id}" do + %div{ id: "ab-smiles-#{a.id}" }= render "answerbox/smiles", a: + %div{ id: "ab-comments-#{a.id}" }= render "answerbox/comments", a:, comments: diff --git a/config/locales/views.en.yml b/config/locales/views.en.yml index 20994bce..473f38bb 100644 --- a/config/locales/views.en.yml +++ b/config/locales/views.en.yml @@ -117,18 +117,18 @@ en: actions: share: title: "Share" - comments: - none: "There are no comments yet." - placeholder: "Comment..." - action: "Post comment" smiles: none: "No one smiled this yet." + comments: + none: "There are no comments yet." application: answerbox: read: "Read the entire answer" answered: "%{hide} %{user}" # resolves into "Answered by %{user}" hide: "Answered by" pinned: "Pinned" + comments: + placeholder: "Comment…" questionbox: title: "Ask something!" placeholder: "Type your question here…" diff --git a/config/locales/voc.en.yml b/config/locales/voc.en.yml index a05407eb..01f1ff9c 100644 --- a/config/locales/voc.en.yml +++ b/config/locales/voc.en.yml @@ -12,6 +12,7 @@ en: follow: "Follow" format_markdown: "Styling with Markdown is supported" load: "Load more" + loading: "Loading…" login: "Sign in" logout: "Sign out" mute: "Mute" diff --git a/config/routes.rb b/config/routes.rb index 3af4b3a8..85fc5a6e 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -153,6 +153,7 @@ Rails.application.routes.draw do get "/@:username/a/:id", to: "answer#show", as: :answer post "/@:username/a/:id/pin", to: "answer#pin", as: :pin_answer delete "/@:username/a/:id/pin", to: "answer#unpin", as: :unpin_answer + get "/@:username/a/:id/comments", to: "comment#index", as: :comments get "/@:username/q/:id", to: "question#show", as: :question get "/@:username/followers", to: "user#followers", as: :show_user_followers get "/@:username/followings", to: "user#followings", as: :show_user_followings