Advices to clean this show.html.erb view (Rails)?

Question

The following view shows a single post and its comments:

views/posts/show.html.erb:

<h2>posts show</h2>

<span>Title: <%= @post.title %></span><br />
<span>Content: <%= @post.content %></span><br />
<span>User: <%= @post.user.username %></span><br />

<div class="post-<%= @post.id %>">
  <h3><span class="vote-count"><%= @post.total_votes %></span> votes</h3><br />

  <div class='voted-user'>
    <% @post.votes.each do |vote| %>
      <%= link_to vote.user.username, vote.user %>
    <% end %>
  </div>

<%= link_to "Vote Up", vote_up_path(@votable, :votable_type => "Post"), :remote => true, :class => "vote-up" %><br />
<%= link_to "Vote Down", vote_down_path(@votable, :votable_type => "Post"), :remote => true, :class => "vote-down" %><br />

<h2>Comments</h2>

<p><%= link_to 'Order by Date', post_path(@post, :order_by => "created_at ASC") %></p>
<p><%= link_to 'Order by Votes', post_path(@post, :order_by => "total_votes DESC") %></p>

<% @comments.map do |comment| %>
  <div class="comment-<%= comment.id %>">
  <p>
    <b>Comment:</b>
    <%= comment.content %>
  </p>
  <p>
    <b>Vote:</b>
    <span class="vote-count"><%= comment.total_votes %></span>

    <div class='voted-user'>
      <% comment.votes.each do |vote| %>
        <%= link_to vote.user.username, vote.user %>
      <% end %>
    </div>
  </p>
  <p>
    <b>Commenter</b>
    <%= link_to comment.user.username, comment.user %>
  </p>
  <p>
    <b>Link</b>
    <%= link_to "Show Post Comment", [@post, comment] %>
  </p>
  <p>
    <b>Vote</b>
    <%= link_to "Vote Up", vote_up_path(comment, :votable_type => "Comment"), :remote => true, :class => "vote-up" %><br />
  </p>
  </div>
<% end %>

<%= will_paginate @comments %>

<h2>Add a comment:</h2>
<%= form_for([@post, @post.comments.build]) do |f| %>
  <div class="field">
    <%= f.label :content %><br />
    <%= f.text_area :content %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

<% if current_user.id == @post.user_id %>
  <%= link_to 'Edit', edit_post_path(@post) %> |
<% end %>
<%= link_to 'Back', posts_path %>

I just focused on making things work so I totally forgot to make it clean. I'm a Rails beginner and I would like some suggestions or advises to clean this view (if you suggest to move code to another file please mention the name of the file and the directoy). Thanks in advance.

Answer 1

Good on you for wanting to clean it up. This is some of what I would do. I've included some examples of a few things here: Partials, Helpers, and also cleaned up the HTML a little to allow more control over the style in your stylesheets (which I left out, but you can figure out that part I'm sure). If this was my project, I would extract everything even more (for example, I would probably move the entre "edit/back" links at the bottom, as well as the "Order" links, to their own partials or helpers, since I would probably be using them in a lot of places throughout the application.) And if your comments are polymorphic (i.e., not just for posts), then definitely move that into its own view file. Also, I did this a rather quickly, so it might have some errors, sorry if you find any.

_post.html.erb

<article class="post-info">
  <span class="title"><b>Title:</b> <%= post.title %></span>
  <p><%= post.content %></p>
  <span class="user"><b>User:</b> <%= post.user.username %></span>
</article>

<div class="post" id="post-<%=post.id%>">
  <div class="vote-count"><%= post.total_votes %></span> votes

  <ul class="voted-user">
    <% post.votes.each do |vote| %>
      <li><%= link_to vote.user.username, vote.user %></li>
    <% end %>
  </ul>

<ul class="voting">
    <li><%= link_to "Vote Up", vote_up_path(post, :votable_type => "Post"), :remote => true, :class => "vote-up" %></li>
    <li><%= link_to "Vote Down", vote_down_path(post, :votable_type => "Post"), :remote => true, :class => "vote-down" %></li>
</ul>

_comment.html.erb

<div class="comment" id="comment-<%=comment.id%>">
    <article class="comment">
    <b>Comment:</b> <%= comment.content %>
    </article>

  <div class="votes-total">
    <b>Votes:</b> <span class="vote-count"><%= comment.total_votes %></span>
  
    <ul class='voted-user'>
      <% comment.votes.each do |vote| %>
        <li><%= link_to vote.user.username, vote.user %></li>
      <% end %>
    </ul>
  </div>

  <div class="commenter">
    <b>Commenter:</b> <%= link_to comment.user.username, comment.user %>
  </div>
  
  <div class="link">
    <b>Link:</b> <%= link_to "Show Post Comment", [comment.post, comment] %>
  </div>
  <div class="vote">
    <b>Vote:</b> <%= link_to "Vote Up", vote_up_path(comment, :votable_type => "Comment"), :remote => true, :class => "vote-up" %>
  </div>
</div> <!-- .comment -->

show.html.erb

<h2>Posts</h2>
<%= render @post %>

<h2>Comments</h2>

<ul class="order">
    <li><%= link_to 'Order by Date', post_path(@post, :order_by => "created_at ASC") %></li>
    <li><%= link_to 'Order by Votes', post_path(@post, :order_by => "total_votes DESC") %></li>
</ul>

<%= render @comments %>
<%= will_paginate @comments %>


<h2>Add a Comment</h2>

<%= form_for([@post, @post.comments.build]) do |f| %>
  <div class="field">
    <%= f.label :content %>
    <%= f.text_area :content %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

<ul class="manage">
    <li><%= edit_link_if_allowed(current_user, @post) %></li>
    <li><%= link_to 'Back', posts_path %></li>
</ul>

Posts Helper

def edit_link_if_allowed(current_user, post)
    link_to "Edit", edit_post_path(post) if post.user_id == current_user.id
end

Answer 2

You could use Partials