How do I DRY up this view?

Question

I have a view that has a lot of repetitive logic. I am not quite sure how to DRY it up.

Any ideas?

      <li><a href="#">Great Grandparents</a>
        <ul>
          <li><% if relative.humanize == "Great grandfather" || relative.humanize == "Great grandmother" %>
            <%= link_to image_tag(membership.user.avatar.url, size: "48x48", :class => "img-circle") , family_tree_path(membership.user.family_tree) %>
                <%= link_to membership.user.name, family_tree_path(membership.user.family_tree)%>
              <% else %>
              None added yet, add them <%= link_to 'here', "#" , class: 'btn invite popupbox','data-popup' => 'invite_friend' %>
            <% end %>
          </li>
        </ul>
      </li>
      <li><a href="#">Grandparents</a>
        <ul>
          <li><% if relative.humanize == "Grandfather" || relative.humanize == "Grandmother" %>
            <%= link_to image_tag(membership.user.avatar.url, size: "48x48", :class => "img-circle") , family_tree_path(membership.user.family_tree) %>
                <%= link_to membership.user.name, family_tree_path(membership.user.family_tree)%>
              <% else %>
              None added yet, add them <%= link_to 'here', "#" , class: 'btn invite popupbox','data-popup' => 'invite_friend' %>
            <% end %>
          </li>
        </ul>
      </li>
      <li><a href="#">Parents</a>
        <ul>
            <li><% if relative.humanize == "Mom" || relative.humanize == "Dad" %>
            <%= link_to image_tag(membership.user.avatar.url, size: "48x48", :class => "img-circle") , family_tree_path(membership.user.family_tree) %>
                <%= link_to membership.user.name, family_tree_path(membership.user.family_tree)%>
              <% else %>
              None added yet, add them <%= link_to 'here', "#" , class: 'btn invite popupbox','data-popup' => 'invite_friend' %>
            <% end %>
          </li>
        </ul>

      </li>

Note: The above has been truncated, there are at least 7 more. There is a lot of repetition, but I am not quite sure how to DRY it up in a Railsy way.

Answer 1

In your view do:

<% relatives_sections = [
  { section_name: 'Great grandparents', human_names: ['Great grandfather', 'Great grandmother']},
  { section_name: 'Grandparents', human_names: ['Grandfather', 'Grandmother']},
  { section_name: 'Parents', human_names: ['Mom', 'Dad']},
  ...
] %>

<% relatives_sections.each do |section| %>
<li><a href="#"><%= section[:section_name] %></a>
  <ul>
    <li>
      <% if section[:human_names].include?(relative.humanize) %>
        <%= link_to image_tag(membership.user.avatar.url, size: "48x48", :class => "img-circle") , family_tree_path(membership.user.family_tree) %>
        <%= link_to membership.user.name, family_tree_path(membership.user.family_tree)%>
      <% else %>
        None added yet, add them <%= link_to 'here', "#" , class: 'btn invite popupbox','data-popup' => 'invite_friend' %>
      <% end %>
    </li>
  </ul>
</li>
<% end %>

You may also want to move the whole <li> block to the _relatives.html.erb partial that contains

<li><a href="#"><%= section_name %></a>
  <ul>
    <li>
      <% if human_names.include?(relative.humanize) %>
        <%= link_to image_tag(user.avatar.url, size: "48x48", :class => "img-circle") , family_tree_path(user.family_tree) %>
        <%= link_to user.name, family_tree_path(user.family_tree)%>
      <% else %>
        None added yet, add them <%= link_to 'here', "#" , class: 'btn invite popupbox','data-popup' => 'invite_friend' %>
      <% end %>
    </li>
  </ul>
</li>

Then, in your view:

<% common_vars = {user: membership.user, relative:relative} %>
<% relatives_sections.each do |section| %>
  <%= render partial: 'relatives', locals: section.merge(common_vars) %>
<% end %>

And as the last step you may consider moving the relative_sections into a helper, and further DRYing it there, if possible.