Am building a blog post and i have a model named comments, i have used the same model also for replies .
comment.rb
# frozen_string_literal: true
class Comment < ApplicationRecord
include ActionView::Helpers
belongs_to :post
belongs_to :user
has_many :likes, as: :likeable
scope :ordered, -> { order(id: :desc) }
belongs_to :parent, class_name: 'Comment', optional: true
has_many :replies, class_name: 'Comment', foreign_key: :parent_id, dependent: :destroy
has_many :notifications, dependent: :destroy
validates :body, presence: true
after_create_commit :broadcast_later
private
def broadcast_later
if parent_id.nil?
broadcast_prepend_later_to(
'comments_list',
partial: 'comments/comment',
locals: { comment: self, user: user }
)
else
broadcast_after_to(
'comments_list',
partial: 'comments/comment',
locals: { comment: parent, user: user },
target: dom_id(parent)
)
end
end
end
Below is my comments partial.
<%= turbo_frame_tag comment do%>
<div class="">
<div class="p-4 rounded-lg border-2 border-gray-200 my-4">
<div class="flex items-center justify-between">
<span class="flex items-center">
<p class="inline-flex items-center mr-3 text-sm text-gray-900 dark:text-white font-semibold">
<img class="mr-2 w-6 h-6 rounded-full" src="https://flowbite.com/docs/images/people/profile-picture-2.jpg" alt="Michael Gough">
Michael Gough
</p>
<p class="text-sm text-gray-600 dark:text-gray-400">
<time pubdate datetime="2022-02-08" title="February 8th, 2022">Feb. 8, 2022</time>
</p>
</span>
</div>
<p class="mt-4 text-gray-500 dark:text-gray-400"><%= comment.body %></p>
</div>
<%= turbo_frame_tag Comment.new do%>
<%= render "comments/like_button", comment: comment, user: comment.user%>
<% end %>
<% if comment.replies.any? %>
<% comment.replies.each do |reply| %>
<div class="ml-4">
<%= render 'comments/comment', comment: reply, user: reply.user %>
<% end %>
<% end %>
</div>
<% end %>
am rendering comments recursively using the same comments partial.
below is my comments/create_turbo_stream.erb
<%= render partial: "comments/like_button", locals: { comment: @comment, user: @comment.user }%>
<% end %>
<% if @comment.parent_id.nil? %>
<%= turbo_stream.prepend "comments" do %>
<%= render "comments/comment", user: @comment.user, comment: @comment%>
<% end %>
<% else %>
<%= turbo_stream.after dom_id(@comment.parent) do %>
<div class="ml-4">
<%= render "comments/comment", user: @comment.user, comment: @comment%>
</div>
<% end %>
<% end %>
Below is my post show page where am displaying a post with all its comments below.
<div>
<%= turbo_stream_from "comments_list"%>
<%= turbo_frame_tag "comments" do%>
<%= render @comments%>
<% end %>
</div>
The problem is when i create a child comment, it renders a parent nested with its child two times as seen in this screen shot. any one with an idea on how i propery get them nested after broadcasting.
- Any help will be appreciated!