part-4-allow-comments-on-your-app.md

Part 4: Allow Comments on your App

We are going to add the possibility to comment on ideas in your Rails Girls application.

1. Create comment scaffold

Create a comment scaffold, with the commentator name, the comment body (contents of the comment) and with the reference to the ideas table (idea_id).

rails g scaffold comment user_name:string body:text idea_id:integer

This will create a migration file that lets your database know about the new comments table. Run the migrations using

rails db:migrate

2. Add relations to models

You need to make sure that Rails knows the relation between objects (ideas and comments). As one idea can have many comments we need to make sure the idea model knows that. Open app/models/idea.rb and below the row

class Idea < ApplicationRecord

add

has_many :comments

The comment also has to know that it belongs to an idea. So open app/models/comment.rb and below

class Comment < ApplicationRecord

add the row

belongs_to :idea

3. Render the comment form and existing comments

Open app/views/ideas/show.html.erb and after the image_tag

<%= image_tag(@idea.picture_url, :width => 600) if @idea.picture.present? %>

add

<h3>Comments</h3>
<% @comments.each do |comment| %>
  <div>    
    <strong><%= comment.user_name %></strong>    
    <br>    
    <p><%= comment.body %></p>    
    <p><%= link_to 'Delete', comment_path(comment), method: :delete, data: { confirm: 'Are you sure?' } %></p>  
  </div>
  <% end %>
  <%= render partial: 'comments/form', locals: { comment: @comment } %>

In app/controllers/ideas_controller.rb add to the show method

@comments = @idea.comments.all
@comment = @idea.comments.build

Open app/views/comments/_form.html.erb and after

  <div class="field">
    <%= form.label :body %><br>
    <%= form.text_area :body %>
  </div>

add the row

<%= form.hidden_field :idea_id %>

next, remove

<div class="field">
  <%= form.label :idea_id %><br>
  <%= form.number_field :idea_id %>
</div>

That’s it. Now view an idea you have inserted to your application and there you should see the form for inserting a comment as well as deleting older comments.