Nested partials were not working in turbo stream rails 7

22 Views Asked by At

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.

0

There are 0 best solutions below