コメント画面の表示、写真の投稿に対してコメントが書けるページを作りたい。

Question

前提・実現したいこと

ruby on railsにて写真の投稿にコメントする機能を作成しています。
具体的には、下記の画像のように実装したいです。

コメント画面を作る際、

ユーザーは写真にコメントを残すことができる
何度でもコメントをすることができる
コメントが空の場合エラーを起こす

上記の設定も行いたいです。

発生している問題・エラーメッセージ

app/views/comments/new.html.erbに、endとdivを付け加えたらエラーは消えましたが、画面がヘッダー以外、何もない画面が出てきました。

該当のソースコード

app/views/comments/new.html.erb

<div class="topic-index-wrapper">
  <div class="container">
  <% if @comment_topics.present? %>
   <% @comment_topics.each do |topic| %>
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <div class="topic-index-single">
          <h2 class="topic-author">
            <%= topic.user.name %>
          </h2>
           
            <%= form_for @comment do |f| %>
             <div class="form-group">
              <%= f.label :message %>
              <%= f.text_area :message, class: "form-control" %>
              <%= f.hidden_field:topic_id, :value => params[:topic_id] %>
              
               <%= image_tag 'icons/comment.png', class: 'topic-index-icon' %>
              <% if logged_in? %>
                <%= f.submit "コメント", class: "btn btn-black btn-block" %>
              <% end %>
          　<% end %>
          </div>
        </div>
      </div>
    </div>
  <% end %>
 <% end %>
</div>
</div>

app/views/topics/index.html.erb

<div class="topic-index-wrapper">
  <div class="container">
    <% @topics.each do |topic| %>
      <div class="row">
        <div class="col-md-6 col-md-offset-3">
          <div class="topic-index-single">
            <h2 class="topic-author">
              <%= topic.user.name %>
            </h2>
            
            <%= image_tag topic.image.url %>
            <% if !topic.favorite_users.include?(current_user) %>
              <%= link_to favorites_path(topic_id: topic.id), method: :post do %>
                <%= image_tag 'icons/heart-black.png', class: 'topic-index-icon' %>
              <% end %>
             <% else %>
               <%= link_to favorites_path(topic_id: topic.id), method: :delete do %>
                <%= image_tag 'icons/heart-pink.png', class: 'topic-index-icon' %>
              <% end %>
             <% end %>
             <%= topic.favorite_users.count %>
             
             <%=link_to new_comment_path(topic_id: topic.id), method: :get do %>
               <%= image_tag 'icons/comment.png', class: 'topic-index-icon' %>
              <% end %>
            <p class="topic-text">
              <%= topic.description %>
            </p>
          </div>
        </div>
      </div>
    <% end %>
  </div>
</div>

config/routes.rb

Rails.application.routes.draw do
  get 'topics/new'
  get 'sessions/new'
  get 'comments/new'
  
  get 'users/new'
  root 'pages#index'
  get 'pages/help'
  root to: "home#index"
  
  get '/login', to: 'sessions#new'
  post '/login', to: 'sessions#create'
  delete '/logout', to: 'sessions#destroy'
  
  resources :users
  resources :topics
  resources :comments
  
  get 'favorites/index'
  post '/favorites', to: 'favorites#create'
  delete '/favorites', to: 'favorites#destroy'
  
  get 'comments/index'
  post '/comments', to: 'comment#create'
  
end

app/controllers/comments_controller.rb

class CommentsController < ApplicationController
  def index
    @comment_topics = current_user.comment_topics
  end
  
  def new
    @comment = Comment.new
    @topic_id = params[:topic_id]
  end
  
  def create
    @comment = current_user.comments.new(comment_params)
    
    if @comment.save
      redirect_to topics_path, success: 'コメントしました'
    else
      flash.now[:danger] = 'コメントに失敗しました'
      render :new
    end
  end
  
  private
  def comment_params
    params.require(:comment).permit(:user_id, :topic_id,:message)
  end
  
end

試したこと

app/views/comments/new.html.erbにendとdivを付け加える。
iconの場所に注意してコードを書く。

補足情報（FW/ツールのバージョンなど）

AWS Cloud9
Rails 5.2.3

Answer 1

私もこういう時はm.tsさんと同じようにします。

<% @comment_topics.each do |topic| %> (1)
 <div class="row">                    (2)
  <div class="col-md-6 col-md-offset-3">(3)
   <div class="topic-index-single">     (4)
    <%= form_for @comment do |f| %>     (5)
     <div class="form-group">           (6)
      <% if !topic.comment_users.include?(current_user) %>(7)
        <%= link_to favorites_path(), method: :post do %>(8)
        <% end %>(8)
      <% end %>(7)
      <% if logged_in? %>(7)
      <% end %>          (7)
    </div>   (6)
   </div> (4)
  </div> (3)

となり、(1),(5) に対する end と(2)に対する/div が足りないです

Comments

[m.ts10806]

インデントきちんと揃えたら一目瞭然ですね。

[winterboum]

で、
html.erbでは対応つけの確認が注意力期待になってしまうので辛いです。
slim　とか　haml　ですと　インデントで階層を表現し、閉じる方は書かずに済むのでこの点では優れています。

[winterboum]

はい、
インデントで対応つけを自動でやってくれるbeatifier があると良いのですが。

Answer 2

Ruby分かりませんが、出力部分を全部消してみました。

    <% @topics.each do |topic| %>
            <% if !topic.favorite_users.include?(current_user) %>
              <% end %>
             <% else %>
              <% end %>
             <% end %>
              <% end %>
    <% end %>

むしろ多すぎるのでは？

Comments

[chihiro7215]

<% if !topic.favorite_users.include?(current_user) %>～中略～　は、いいね機能でハートマークの表示、非表示の代わりに、適用されるCSSが切り替わるようにするために書いた出力コードです。
回答に出ているコードは topics/index.html.erbからですか？それとも、comments/new.html.erbからでしょうか？

[winterboum]

そちらは　エラーにある new の方ではなく indexの方ですね。
で、
<%= link_to favorites_path(topic_id: topic.id), method: :post do %>
があるので合ってます。

[m.ts10806]

Rubyに限った話ではなく、あくまで問題解決の考え方です。
endの数が合ってないなら組み合わせが分かるように最小構成部分だけ残して確かめてみようという話です。