From 90bf1c48555a3aa1fa107509f415b051b8fd7117 Mon Sep 17 00:00:00 2001 From: Lucius Choi Date: Sat, 23 Jun 2018 16:29:02 +0900 Subject: [PATCH] broadcasted edit and destroy action --- app/assets/javascripts/channels/comments.js | 22 +++++++++++++++++++-- app/controllers/comments_controller.rb | 6 +++++- app/jobs/broadcast_comment_job.rb | 20 ++++++++++++++++--- app/views/comments/_widget.html.erb | 2 +- app/views/comments/create.js.erb | 20 +++++++++++++------ app/views/comments/destroy.js.erb | 21 ++++++++++++++++++-- app/views/comments/update.js.erb | 2 +- 7 files changed, 77 insertions(+), 16 deletions(-) diff --git a/app/assets/javascripts/channels/comments.js b/app/assets/javascripts/channels/comments.js index 6478880..2e642f1 100644 --- a/app/assets/javascripts/channels/comments.js +++ b/app/assets/javascripts/channels/comments.js @@ -31,12 +31,30 @@ App.comments = App.cable.subscriptions.create('CommentsChannel', { if (comment_user_id != current_user_id){ data.comment = data.comment.replace(/.*?<\/a><\/span>/g, ''); console.info(data.comment); + console.log(data.comment_action); } else { console.info(data.comment); + console.log(data.comment_action); } - // console.log(data.comment); - return this.collection(data.parent_id).append(data.comment); + // console.log(data.comment); + if (data.comment_action == 'create') { + console.log('created'); + $comments_count = $("#comments-count-of-commentable-" + data.commentable_id); + $comments_count.html(data.commentable_comments_size).effect('highlight',{}, 1000); + return this.collection(data.parent_id).append(data.comment); + }; + if (data.comment_action == 'update') { + console.log('updated'); + return $("#comment_" + data.comment_id).html(data.comment).find('li').last().effect("highlight", {}, 1000); + }; } + if (data.comment_action == 'destroy') { + console.log('deleted'); + $comments_count = $("#comments-count-of-commentable-" + data.commentable_id); + $comments_count.html(data.commentable_comments_size).effect('highlight',{}, 1000); + return $("#comment_" + data.comment_id).effect("highlight", { color: '#f7937c' }, 500).slideUp('fast'); + } + }, userIsCurrentUser: function (comment) { diff --git a/app/controllers/comments_controller.rb b/app/controllers/comments_controller.rb index 7073e29..7ac6d11 100644 --- a/app/controllers/comments_controller.rb +++ b/app/controllers/comments_controller.rb @@ -13,7 +13,7 @@ def create @comment.user = current_user respond_to do |format| if @comment.save - BroadcastCommentJob.perform_now @comment + BroadcastCommentJob.perform_now @comment, 'create' format.html { redirect_to @commentable, notice: "Comment was successfully created."} format.json { render json: @comment } format.js @@ -31,6 +31,7 @@ def edit def update respond_to do |format| if @comment.update(comment_params) + BroadcastCommentJob.perform_now @comment, 'update' format.html { redirect_to @commentable, notice: "Comment was successfully updated."} format.json { render json: @comment } format.js @@ -43,7 +44,10 @@ def update end def destroy + old_comment = @comment.dup + old_comment.id = @comment.id @comment.destroy if @comment.errors.empty? + BroadcastCommentJob.perform_now old_comment, 'destroy' respond_to do |format| format.html { redirect_to @commentable, notice: "Comments was successfully destroyed."} format.json { head :no_content } diff --git a/app/jobs/broadcast_comment_job.rb b/app/jobs/broadcast_comment_job.rb index 51adbab..ef2e93d 100644 --- a/app/jobs/broadcast_comment_job.rb +++ b/app/jobs/broadcast_comment_job.rb @@ -2,10 +2,24 @@ class BroadcastCommentJob < ApplicationJob before_perform :wardenize queue_as :default - def perform(comment) - ActionCable.server.broadcast "#{comment.commentable_id}:comments", + def perform(comment, comment_action) + logger.info ">>>>>>>> perform action : #{comment_action}" + if comment_action == 'destroy' + ActionCable.server.broadcast "#{comment.commentable_id}:comments", + comment_id: comment.id, + parent_id: comment&.parent&.id, + commentable_id: comment.commentable.id, + commentable_comments_size: comment.commentable.comments.size, + comment_action: comment_action + else + ActionCable.server.broadcast "#{comment.commentable_id}:comments", comment: render_comment(comment), - parent_id: comment&.parent&.id + comment_id: comment.id, + parent_id: comment&.parent&.id, + commentable_id: comment.commentable.id, + commentable_comments_size: comment.commentable.comments.size, + comment_action: comment_action + end end private diff --git a/app/views/comments/_widget.html.erb b/app/views/comments/_widget.html.erb index 06489a7..891b3c1 100644 --- a/app/views/comments/_widget.html.erb +++ b/app/views/comments/_widget.html.erb @@ -3,7 +3,7 @@ Comments <%= commentable.comments.size %>
    - <%= render commentable.comments.includes(:user, :replies, :commentable).where(parent: nil).reverse, broadcasted: false %> + <%= render commentable.comments.includes(:user, :replies, :commentable).where(parent: nil), broadcasted: false %>
<%= render "comments/form", comment: commentable.comments.build %> diff --git a/app/views/comments/create.js.erb b/app/views/comments/create.js.erb index e0bc7e3..a87d2f1 100644 --- a/app/views/comments/create.js.erb +++ b/app/views/comments/create.js.erb @@ -17,15 +17,23 @@ $comments_count = $("#comments-count-of-commentable-<%= @commentable.id %>"); $comments_count.html("<%= @commentable.comments.size %>").effect('highlight',{}, 1000); // $comment_parent.append("<%#=j render @comment %>").find('li').last().effect("highlight", {}, 1000); $comment_form[0].reset(); + $comment_form.remove(); // when a reply was created - <% if @comment.parent %> - $comment_form.remove(); + <% if @comment.parent.present? %> // console.log("start"); - $comment = $("#comment_<%= @comment.parent.id %>") + $comment = $("#comment_<%= @comment.parent.id %>"); // console.log("end"); - $restore_link = $comment.find('a.delete-comment-link')[0] - $reply_link = $comment.find('a.reply-comment-link')[0] - $reply_link.href = $restore_link.href + "/reply" + $restore_link = $comment.find('a.delete-comment-link')[0]; + $reply_link = $comment.find('a.reply-comment-link')[0]; + $reply_link.href = $restore_link.href + "/reply"; + // suggested by Aleksandr Balakiriev + <%# if @comment.parent.replies.size == 1 %> + + + + + + <%# end %> <% end %> $("#comment_new_chars_counter").html("Remaining : 255"); <% else # if some errors occurs on creating a comment... %> diff --git a/app/views/comments/destroy.js.erb b/app/views/comments/destroy.js.erb index fa529cd..de699e3 100644 --- a/app/views/comments/destroy.js.erb +++ b/app/views/comments/destroy.js.erb @@ -1,7 +1,24 @@ $comments_count = $("#comments-count-of-commentable-<%= @commentable.id %>"); <% if @comment.errors.empty? %> - $comments_count.html("<%= @commentable.comments.size %>").effect('highlight',{}, 1000); - $("#comment_<%= @comment.id %>").effect("highlight", { color: '#f7937c' }, 500).slideUp('fast'); + <% if @comment.parent && can?(:update, @comment.parent) %> + // added edit and destroy link + $links = $("#comment_<%= @comment.id %> .dot-bullet a"); + $edit_link = $links[0]; + $delete_link = $links[1]; + $edit_link.href = "<%= edit_post_comment_url(@comment.parent.commentable, @comment.parent) %>" + $delete_link.href = "<%= post_comment_url(@comment.parent.commentable, @comment.parent) %>" + $new_edit_link = document.createElement('span'); + $new_edit_link.className= 'dot-bullet ml-1'; + $new_edit_link.appendChild($edit_link); + $new_delete_link = document.createElement('span'); + $new_delete_link.className= 'dot-bullet ml-1'; + $new_delete_link.appendChild($delete_link); + $("#comment_<%= @comment.parent.id %> .comment-info small .dot-bullet")[0].after($new_edit_link, $new_delete_link); + console.log($edit_link); + console.log($delete_link); + <% end %> + + <% else %> $("#comments-widget-of-commentable-<%= @commentable.id %> .comments-header").after("").next().delay(1500).slideUp('fast'); <% end %> diff --git a/app/views/comments/update.js.erb b/app/views/comments/update.js.erb index dadac6a..7696f25 100644 --- a/app/views/comments/update.js.erb +++ b/app/views/comments/update.js.erb @@ -2,7 +2,7 @@ $comment_form = $("#comment_<%= @comment.id %> .comment-form form"); $comment = $("#comment_<%= @comment.id %>"); <% if @comment.errors.empty? # if no erros on creating a comment... %> - $comment.html("<%=j render @comment %>").find('li').last().effect("highlight", {}, 1000); + $comment.html("<%=j render @comment, broadcasted: true %>").find('li').last().effect("highlight", {}, 1000); $comment_form[0].remove(); <% else # if some errors occurs on creating a comment... %> $comment_form.before("").prev().delay(1500).slideUp();