Move related list partial to a component

This way the code is easier to follow; the code checking whether the
list has contents is in the partial rendering the list.

We also remove some duplication setting up related content in the
controllers.

For some reason, we have to manually ignore i18n keys which were
automatically ignored when the code was in the view.

app/assets/stylesheets/application.scss

@@ -41,6 +41,7 @@
 @import "debates/**/*";
 @import "layout/**/*";
 @import "proposals/**/*";
+@import "relationable/**/*";
 @import "sdg/**/*";
 @import "sdg_management/*";
 @import "sdg_management/**/*";

app/assets/stylesheets/layout.scss

@@ -2410,46 +2410,6 @@ table {
   }
 }
 
-.related-content-list {
-  list-style-type: none;
-  margin-left: 0;
-
-  li {
-    border-bottom: 1px solid $border;
-    margin-bottom: 0 !important;
-    padding: $line-height / 2;
-
-    @include breakpoint(medium) {
-      display: flex;
-      justify-content: space-between;
-
-      > :first-child {
-        flex: 1;
-        margin-right: 1em;
-      }
-    }
-
-    &:first-child {
-      border-top: 1px solid $border;
-    }
-  }
-
-  h3 {
-    font-size: $base-font-size;
-    font-weight: normal;
-  }
-
-  .related-content-title {
-    color: #4f4f4f;
-    font-size: rem-calc(12);
-    text-transform: uppercase;
-  }
-
-  .flag {
-    margin-top: $line-height / 2;
-  }
-}
-
 .relate-content-score {
   display: block;
 

app/assets/stylesheets/relationable/related_content_list.scss

@@ -0,0 +1,39 @@
+.related-content-list {
+  list-style-type: none;
+  margin-left: 0;
+
+  li {
+    border-bottom: 1px solid $border;
+    margin-bottom: 0 !important;
+    padding: $line-height / 2;
+
+    @include breakpoint(medium) {
+      display: flex;
+      justify-content: space-between;
+
+      > :first-child {
+        flex: 1;
+        margin-right: 1em;
+      }
+    }
+
+    &:first-child {
+      border-top: 1px solid $border;
+    }
+  }
+
+  h3 {
+    font-size: $base-font-size;
+    font-weight: normal;
+  }
+
+  .related-content-title {
+    color: #4f4f4f;
+    font-size: rem-calc(12);
+    text-transform: uppercase;
+  }
+
+  .flag {
+    margin-top: $line-height / 2;
+  }
+}

app/components/relationable/related_list_component.html.erb

@@ -1,5 +1,5 @@
 <ul class="related-content-list" id="related-content-list">
-  <% @related_contents.compact.each do |related| %>
+  <% related_contents.compact.each do |related| %>
     <% related_content = related.find_related_content(relationable) %>
 
     <li id="related-content-<%= related_content.id %>">
@@ -18,4 +18,4 @@
   <% end %>
 </ul>
 
-<%= paginate @related_contents %>
+<%= paginate related_contents %>

app/components/relationable/related_list_component.rb

@@ -0,0 +1,18 @@
+class Relationable::RelatedListComponent < ApplicationComponent
+  attr_reader :relationable
+  delegate :current_user, to: :helpers
+
+  def initialize(relationable)
+    @relationable = relationable
+  end
+
+  def render?
+    related_contents.present?
+  end
+
+  private
+
+    def related_contents
+      @related_contents ||= Kaminari.paginate_array(relationable.relationed_contents).page(params[:page]).per(5)
+    end
+end

app/controllers/budgets/investments_controller.rb

@@ -57,7 +57,6 @@ module Budgets
     def show
       @commentable = @investment
       @comment_tree = CommentTree.new(@commentable, params[:page], @current_order)
-      @related_contents = Kaminari.paginate_array(@investment.relationed_contents).page(params[:page]).per(5)
       set_comment_flags(@comment_tree.comments)
       @investment_ids = [@investment.id]
       @remote_translations = detect_remote_translations([@investment], @comment_tree.comments)

app/controllers/dashboard_controller.rb

@@ -26,7 +26,6 @@ class DashboardController < Dashboard::BaseController
   end
 
   def related_content
-    @related_contents = Kaminari.paginate_array(proposal.relationed_contents).page(params[:page]).per(5)
   end
 
   private

app/controllers/debates_controller.rb

@@ -25,7 +25,6 @@ class DebatesController < ApplicationController
 
   def show
     super
-    @related_contents = Kaminari.paginate_array(@debate.relationed_contents).page(params[:page]).per(5)
     redirect_to debate_path(@debate), status: :moved_permanently if request.path != debate_path(@debate)
   end
 

app/controllers/management/proposals_controller.rb

@@ -30,7 +30,6 @@ class Management::ProposalsController < Management::BaseController
   def show
     super
     @notifications = @proposal.notifications
-    @related_contents = Kaminari.paginate_array(@proposal.relationed_contents).page(params[:page]).per(5)
 
     redirect_to management_proposal_path(@proposal), status: :moved_permanently if request.path != management_proposal_path(@proposal)
   end

app/controllers/proposals_controller.rb

@@ -29,7 +29,6 @@ class ProposalsController < ApplicationController
     super
     @notifications = @proposal.notifications
     @notifications = @proposal.notifications.not_moderated
-    @related_contents = Kaminari.paginate_array(@proposal.relationed_contents).page(params[:page]).per(5)
 
     if request.path != proposal_path(@proposal)
       redirect_to proposal_path(@proposal), status: :moved_permanently

app/views/relationable/_related_content.html.erb

@@ -8,8 +8,5 @@
     <%= render "relationable/form", relationable: relationable %>
   <% end %>
 
-  <% if @related_contents.present? %>
-    <%= render "relationable/related_list", relationable: relationable %>
-  <% end %>
-
+  <%= render Relationable::RelatedListComponent.new(relationable) %>
 </div>

config/i18n-tasks.yml

@@ -218,6 +218,7 @@ ignore_unused:
   - landings.cambia_tu_ciudad.*
   - "seeds.settings.*"
   - "dashboard.polls.*.submit"
+  - "related_content.content_title.*"
   - "sdg.goals.goal_*"
   - "sdg.*.filter.more.*"
   - "sdg_management.relations.index.filter*"