jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

comments: refactor to use ViewComponent.

Browse Source
This commit is contained in:
evazion
2021-01-14 19:26:31 -06:00
parent d408ccbd41
commit 724d87f68a
9 changed files with 129 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/components/comment_component.rb Normal file
View File

@@ -0,0 +1,19 @@
# frozen_string_literal: true
class CommentComponent < ApplicationComponent
attr_reader :comment, :context, :dtext_data, :moderation_reports, :show_deleted, :current_user
delegate :link_to_user, :time_ago_in_words_tagged, :format_text, :policy, to: :helpers
def initialize(comment:, context: nil, dtext_data: nil, moderation_reports: [], show_deleted: false, current_user: User.anonymous)
@comment = comment
@context = context
@dtext_data = dtext_data
@moderation_reports = moderation_reports
@show_deleted = show_deleted
@current_user = current_user
end
def render?
!comment.is_deleted? || show_deleted || current_user.is_moderator?
end
end

65
app/components/comment_component/comment_component.html.erb Normal file
View File

@@ -0,0 +1,65 @@
<a name="comment-<%= comment.id %>"></a>
<article id="comment_<%= comment.id %>" class="comment message"
data-id="<%= comment.id %>"
data-post-id="<%= comment.post_id %>"
data-creator-id="<%= comment.creator_id %>"
data-updater-id="<%= comment.updater_id %>"
data-score="<%= comment.score %>"
data-do-not-bump-post="<%= comment.do_not_bump_post? %>"
data-is-deleted="<%= comment.is_deleted? %>"
data-is-sticky="<%= comment.is_sticky? %>"
data-below-threshold="<%= comment.score < CurrentUser.user.comment_threshold %>"
<% if moderation_reports.present? && policy(moderation_reports).show? %>
data-is-reported="<%= moderation_reports.pluck(:model_id).include?(comment.id) %>"
<% end %>
data-is-voted="<%= comment.voted_by?(CurrentUser.user) %>">
<div class="author">
<div class="author-name">
<%= link_to_user comment.creator %>
<% if comment.is_deleted? %>
(deleted)
<% end %>
</div>
<%= link_to time_ago_in_words_tagged(comment.created_at), post_path(comment.post, anchor: "comment_#{comment.id}"), class: "message-timestamp" %>
</div>
<div class="content">
<div class="body prose">
<%= format_text(comment.body, data: dtext_data) %>
</div>
<%= render "application/update_notice", record: comment %>
<% if policy(comment).create? %>
<menu>
<% if context == :index_by_comment %>
<li><%= link_to "Reply", new_comment_path(id: comment, comment: { post_id: comment.post_id }), class: "reply-link" %></li>
<% else %>
<li><%= link_to "Reply", new_comment_path(id: comment, comment: { post_id: comment.post_id }), class: "reply-link", remote: true %></li>
<% end %>
<% if policy(comment).update? %>
<% if comment.is_deleted? %>
<li><%= link_to "Undelete", undelete_comment_path(comment.id), method: :post, remote: true %></li>
<% else %>
<li><%= link_to "Delete", comment_path(comment.id), "data-confirm": "Are you sure you want to delete this comment?", method: :delete, remote: true %></li>
<% end %>
<li><%= link_to "Edit", edit_comment_path(comment.id), id: "edit_comment_link_#{comment.id}", class: "edit_comment_link" %></li>
<% end %>
<li class="comment-vote-up-link">
<%= link_to "Vote up", comment_comment_votes_path(comment_id: comment.id, score: "up"), method: :post, remote: true %>
</li>
<li class="comment-vote-down-link">
<%= link_to "Vote down", comment_comment_votes_path(comment_id: comment.id, score: "down"), method: :post, remote: true %>
</li>
<li class="comment-unvote-link">
<%= link_to "Unvote", comment_comment_votes_path(comment_id: comment.id), method: :delete, remote: true %>
</li>
<% if policy(comment).reportable? %>
<li><%= link_to "Report", new_moderation_report_path(moderation_report: { model_type: "Comment", model_id: comment.id }), remote: true %></li>
<% end %>
</menu>
<% if policy(comment).update? %>
<%= render "comments/form", comment: comment, hidden: true %>
<% end %>
<% end %>
</div>
</article>

31
app/components/comment_component/comment_component.scss Normal file
View File

@@ -0,0 +1,31 @@
article.comment {
flex: 1;
&[data-is-sticky="true"] {
background: var(--comment-sticky-background-color);
}
&[data-is-reported="true"] {
border: var(--moderation-report-border);
}
&[data-is-voted="true"] {
.comment-vote-up-link, .comment-vote-down-link {
display: none;
}
}
&[data-is-voted="false"] {
.comment-unvote-link {
display: none;
}
}
&[data-below-threshold="true"][data-is-sticky="false"] {
opacity: 0.3;
&:hover {
opacity: 1;
}
}
}

10
app/helpers/comments_helper.rb Normal file
View File

@@ -0,0 +1,10 @@
module CommentsHelper
def render_comment(comment, **options)
render CommentComponent.new(comment: comment, **options)
end
def render_comment_list(comments, **options)
dtext_data = DText.preprocess(comments.map(&:body))
render CommentComponent.with_collection(comments, dtext_data: dtext_data, **options)
end
end

34
app/javascript/src/styles/specific/comments.scss
View File

@@ -10,40 +10,6 @@ div.comments-for-post {
div.hidden-comments-notice { div.hidden-comments-notice {
margin: 1em 0; margin: 1em 0;
} }
div.list-of-comments {
article.comment {
flex: 1;
&[data-is-sticky="true"] {
background: var(--comment-sticky-background-color);
}
&[data-is-reported="true"] {
border: var(--moderation-report-border);
}
&[data-is-voted="true"] {
.comment-vote-up-link, .comment-vote-down-link {
display: none;
}
}
&[data-is-voted="false"] {
.comment-unvote-link {
display: none;
}
}
&[data-below-threshold="true"][data-is-sticky="false"] {
opacity: 0.3;
&:hover {
opacity: 1;
}
}
}
}
} }
div#c-comments { div#c-comments {

3
app/views/comments/_index_by_comment.html.erb
View File

@@ -1,5 +1,6 @@
<div id="p-index-by-comment" class="comments-for-post"> <div id="p-index-by-comment" class="comments-for-post">
<div class="list-of-comments list-of-messages"> <div class="list-of-comments list-of-messages">
<% dtext_data = DText.preprocess(@comments.map(&:body)) %>
<% @comments.each do |comment| %> <% @comments.each do |comment| %>
<% if CurrentUser.is_moderator? || (params[:search] && params[:search][:is_deleted] =~ /t/) || !comment.is_deleted? %> <% if CurrentUser.is_moderator? || (params[:search] && params[:search][:is_deleted] =~ /t/) || !comment.is_deleted? %>
<%= tag.div id: "post_#{comment.post.id}", **PostPreviewComponent.new(post: comment.post).article_attrs("post") do %> <%= tag.div id: "post_#{comment.post.id}", **PostPreviewComponent.new(post: comment.post).article_attrs("post") do %>
@@ -8,7 +9,7 @@
<%= link_to(image_tag(comment.post.preview_file_url), post_path(comment.post)) %> <%= link_to(image_tag(comment.post.preview_file_url), post_path(comment.post)) %>
<% end %> <% end %>
</div> </div>
<%= render partial: "comments/partials/show/comment", collection: [comment], locals: { context: :index_by_comment, dtext_data: DText.preprocess(@comments.map(&:body)), moderation_reports: [] } %> <%= render_comment(comment, dtext_data: dtext_data, context: :index_by_comment, show_deleted: params.dig(:search, :is_deleted).to_s.truthy?) %>
<% end %> <% end %>
<% end %> <% end %>
<% end %> <% end %>

2
app/views/comments/index_for_post.js.erb
View File

@@ -1,5 +1,5 @@
$("#threshold-comments-notice-for-<%= @post.id %>").hide(); $("#threshold-comments-notice-for-<%= @post.id %>").hide();
var current_comment_section = $("div.comments-for-post[data-post-id=<%= @post.id %>] div.list-of-comments"); var current_comment_section = $("div.comments-for-post[data-post-id=<%= @post.id %>] div.list-of-comments");
current_comment_section.html("<%= j(render(partial: 'comments/partials/show/comment', collection: @comments, locals: { context: :index_for_post, dtext_data: DText.preprocess(@comments.map(&:body)), moderation_reports: @post.moderation_reports.visible(CurrentUser.user).recent })) %>"); current_comment_section.html("<%= j render_comment_list(@comments, context: :index_by_post, moderation_reports: @post.moderation_reports.visible(CurrentUser.user).recent) %>");
$(window).trigger("danbooru:index_for_post", [<%= @post.id %>]); $(window).trigger("danbooru:index_for_post", [<%= @post.id %>]);

2
app/views/comments/partials/index/_list.html.erb
View File

@@ -20,7 +20,7 @@
<div class="list-of-comments list-of-messages"> <div class="list-of-comments list-of-messages">
<% if comments.present? %> <% if comments.present? %>
<%= render partial: "comments/partials/show/comment", collection: comments, locals: { context: :index_by_post, dtext_data: DText.preprocess(comments.map(&:body)), moderation_reports: post.moderation_reports.visible(CurrentUser.user).recent } %> <%= render_comment_list(comments, context: :index_by_post, moderation_reports: post.moderation_reports.visible(CurrentUser.user).recent) %>
<% elsif post.last_commented_at.present? %> <% elsif post.last_commented_at.present? %>
<p>There are no visible comments.</p> <p>There are no visible comments.</p>
<% else %> <% else %>

69
app/views/comments/partials/show/_comment.html.erb
View File

@@ -1,69 +0,0 @@
<%# locals: comment, context, dtext_data, moderation_reports %>
<% if CurrentUser.is_moderator? || (params[:search] && params[:search][:is_deleted] =~ /t/) || !comment.is_deleted? %>
<a name="comment-<%= comment.id %>"></a>
<article id="comment_<%= comment.id %>" class="comment message"
data-id="<%= comment.id %>"
data-post-id="<%= comment.post_id %>"
data-creator-id="<%= comment.creator_id %>"
data-updater-id="<%= comment.updater_id %>"
data-score="<%= comment.score %>"
data-do-not-bump-post="<%= comment.do_not_bump_post? %>"
data-is-deleted="<%= comment.is_deleted? %>"
data-is-sticky="<%= comment.is_sticky? %>"
data-below-threshold="<%= comment.score < CurrentUser.user.comment_threshold %>"
<% if moderation_reports.present? && policy(moderation_reports).show? %>
data-is-reported="<%= moderation_reports.pluck(:model_id).include?(comment.id) %>"
<% end %>
data-is-voted="<%= comment.voted_by?(CurrentUser.user) %>">
<div class="author">
<div class="author-name">
<%= link_to_user comment.creator %>
<% if comment.is_deleted? %>
(deleted)
<% end %>
</div>
<%= link_to time_ago_in_words_tagged(comment.created_at), post_path(comment.post, anchor: "comment_#{comment.id}"), class: "message-timestamp" %>
</div>
<div class="content">
<div class="body prose">
<%= format_text(comment.body, data: dtext_data) %>
</div>
<%= render "application/update_notice", record: comment %>
<% if policy(comment).create? %>
<menu>
<% if context == :index_by_comment %>
<li><%= link_to "Reply", new_comment_path(id: comment, comment: { post_id: comment.post_id }), class: "reply-link" %></li>
<% else %>
<li><%= link_to "Reply", new_comment_path(id: comment, comment: { post_id: comment.post_id }), class: "reply-link", remote: true %></li>
<% end %>
<% if policy(comment).update? %>
<% if comment.is_deleted? %>
<li><%= link_to "Undelete", undelete_comment_path(comment.id), method: :post, remote: true %></li>
<% else %>
<li><%= link_to "Delete", comment_path(comment.id), "data-confirm": "Are you sure you want to delete this comment?", method: :delete, remote: true %></li>
<% end %>
<li><%= link_to "Edit", edit_comment_path(comment.id), id: "edit_comment_link_#{comment.id}", class: "edit_comment_link" %></li>
<% end %>
<li class="comment-vote-up-link">
<%= link_to "Vote up", comment_comment_votes_path(comment_id: comment.id, score: "up"), method: :post, remote: true %>
</li>
<li class="comment-vote-down-link">
<%= link_to "Vote down", comment_comment_votes_path(comment_id: comment.id, score: "down"), method: :post, remote: true %>
</li>
<li class="comment-unvote-link">
<%= link_to "Unvote", comment_comment_votes_path(comment_id: comment.id), method: :delete, remote: true %>
</li>
<% if policy(comment).reportable? %>
<li><%= link_to "Report", new_moderation_report_path(moderation_report: { model_type: "Comment", model_id: comment.id }), remote: true %></li>
<% end %>
</menu>
<% if policy(comment).update? %>
<%= render "comments/form", comment: comment, hidden: true %>
<% end %>
<% end %>
</div>
</article>
<% end %>