comments_controller.rb
class CommentsController < ApplicationController
before_action :fetch_post
def index
end
def new
end
def create
@comment = current_user.comments.build(comments_params)
@comment.post = @post
if @comment.save
render turbo_stream: turbo_stream.replace(@post)
end
end
def add_reply
@comment = current_user.comments.build(comments_params)
@comment.post = @post
if @comment.save
render turbo_stream: turbo_stream.replace(@comment)
end
end
private
def comments_params
params.require(:comment).permit(:content, :parent_id)
end
def fetch_post
@post = Post.find_by(id: params[:comment][:post_id])
end
end
_post.html.erb
<%= tag.div id: dom_id(post) do %>
<div class="card text-center bg-secondary my-2" style="width: 18rem;">
<div class="card-footer text-body-secondary">
<%= post.user.first_name %> <%= post.user.last_name%> posted <%= time_ago_in_words(post.created_at) %> ago
</div>
<div class="row">
<% if post.medias.attached? %>
<% post.medias.each do |media| %>
<div class="col-md-6">
<%= image_tag file_path(media), class: "rounded mx-auto d-block w-100 mt-2" %>
</div>
<% end %>
<% end %>
</div>
<div class="card-body">
<p class="card-text"><%= post.description %></p>
<%= link_to "View Post", post_path(post), class: "btn btn-dark" %>
</div>
<div class="mb-2 row">
<div class="col-sm-4">
<div class="row">
<div class="text-center my-2">
<%= pluralize(post.likes.count, "like") %>
</div>
<div class="text-center my-2">
<% if current_user_post_like?(post) %>
<%= link_to likes_path({id: post}), data: {turbo_stream: true, turbo_method: :delete} do %>
<i class="fa-solid fa-heart fa-2xl" style="color: #e31621;"></i>
<% end %>
<% else %>
<%= link_to likes_path({id: post}), data: {turbo_stream: true, turbo_method: :post} do %>
<i class="fa-regular fa-heart fa-2xl" style="color: #e1dada;"></i>
<% end %>
<% end %>
</div>
</div>
</div>
<div class=" col-sm-4 flex-grow-1 p-0">
<div class="row">
<div class="my-2">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
<%= pluralize(post.comments.count, "comment") %>
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">All comments</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<%= render post.comments %>
</div>
</div>
</div>
</div>
</div>
<div class="my-2">
<%= render 'shared/comments', {post: post} %>
</div>
</div>
</div>
</div>
</div>
<% end %>
<%= tag.span id: dom_id(comment) do %>
<section class="gradient-custom">
<div class="container my-5 py-5">
<div class="row d-flex justify-content-center">
<div>
<div class="card">
<div class="card-body p-4">
<div class="row">
<div class="col">
<div class="d-flex flex-start">
<% if comment.user.photo.attached? %>
<%= image_tag file_path(comment.user.photo) , alt: "avatar", width: "65", height: "65", class: "rounded-circle shadow-1-strong me-3" %>
<% else %>
<img class="rounded-circle shadow-1-strong me-3"
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(10).webp" alt="avatar" width="65"
height="65" />
<% end %>
<div class="flex-grow-1 flex-shrink-1">
<div>
<div class="d-flex justify-content-between align-items-center">
<p class="mb-1">
<%= comment.user.first_name %> <span class="small">- <%= time_ago_in_words(comment.created_at) %> ago</span>
</p>
<div class="form-outline w-50">
<%= form_with scope: :comment, url: add_reply_path, data: {controller: 'comment', action: "turbo:submit-end->form#clearForm" } do |f| %>
<%= f.hidden_field :post_id, value: comment.post.id %>
<%= f.hidden_field :parent_id, value: comment.id %>
<%= f.text_field :content, id: "addANote", class: "form-control", placeholder: "Add Reply" %>
<% end %>
</div>
</div>
<p class="small text-start mb-0">
<%= comment.content %>
</p>
</div>
<% comment.replies.each do |reply| %>
<div class="d-flex flex-start mt-4">
<a class="me-3" href="#">
<img class="rounded-circle shadow-1-strong"
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(11).webp" alt="avatar"
width="65" height="65" />
</a>
<div class="flex-grow-1 flex-shrink-1">
<div>
<div class="d-flex justify-content-between align-items-center">
<p class="mb-1">
<%= reply.user.first_name %> <span class="small">- <%= time_ago_in_words(comment.created_at) %> ago</span>
</p>
</div>
<p class="small mb-0 text-start">
<%= reply.content %>
</p>
</div>
</div>
</div>
<% end %>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<% end %>
i want to add reply using turbo stream but its not getting updated, i need to refresh the page, to show latest changes. i have post partial which is inside views/posts/_post.html.erb and comments partial which is present inside views/comments/_comment.html.erb. I did the R&D but nothing worked. Please help me out with this.