broadcasted edit and destroy action

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(/<span class='dot-bullet'><a class="(edit|delete)-comment-link"\s.*?>.*?<\/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) {

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 }

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

app/views/comments/_widget.html.erb

@@ -3,7 +3,7 @@
     Comments <small id="comments-count-of-commentable-<%= commentable.id %>"><%= commentable.comments.size %></small>
   </h2>
   <ul class="comments-list" data-channel='comments' data-commentable-id="<%= commentable.id %>">
-    <%= 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 %>
   </ul>
   <!-- comment-form -->
   <%= render "comments/form", comment: commentable.comments.build  %>

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 %>
+<!--      console.log(">>>>> first reply was created....");-->
+<!--      $edit_link = $comment.find('a.edit-comment-link')[0];-->
+<!--      $delete_link = $comment.find('a.delete-comment-link')[0];-->
+<!--      $edit_link.parentNode.remove();-->
+<!--      $delete_link.parentNode.remove();-->
+    <%# end %>
   <% end %>
   $("#comment_new_chars_counter").html("Remaining : 255");
 <% else # if some errors occurs on creating a comment... %>

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 %>
+<!--  $comments_count.html("<%#= @commentable.comments.size %>").effect('highlight',{}, 1000);-->
+<!--  $("#comment_<%#= @comment.id %>").effect("highlight", { color: '#f7937c' }, 500).slideUp('fast');-->
 <% else %>
   $("#comments-widget-of-commentable-<%= @commentable.id %> .comments-header").after("<div class='alert alert-warning alert-dismissible fade in' role='alert'><button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button><%= @comment.errors.full_messages.join('') %></div>").next().delay(1500).slideUp('fast');
 <% end %>

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("<div class='alert alert-warning alert-dismissible fade in' role='alert'><button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button><%= @comment.errors.full_messages.join('') %></div>").prev().delay(1500).slideUp();