Move recommended index partial to a component

Thanks to it, we can slightly simplify the debates view rendering it.

app/assets/stylesheets/layout.scss

@@ -1997,67 +1997,6 @@ table {
   }
 }
 
-.recommended-index {
-  @include full-width-background;
-  @include full-width-border(bottom, 1px solid #eee);
-  @include full-width-border(top, 1px solid #fafafa);
-  background: #fafafa;
-  margin-bottom: $line-height;
-  margin-top: rem-calc(-25);
-  padding: $line-height 0 calc($line-height / 2);
-
-  @include breakpoint(medium) {
-    padding-top: 0;
-  }
-
-  h2 {
-    font-size: $small-font-size;
-    text-transform: uppercase;
-  }
-
-  h3 {
-    font-size: $base-font-size;
-    margin-bottom: 0;
-  }
-
-  a {
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-
-  .recommendation {
-    @include card;
-    background: $body-background;
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
-    display: block;
-    margin-bottom: calc($line-height / 4);
-    padding: calc($line-height / 2);
-    z-index: 1;
-
-    &:hover:not(:focus-within) {
-      box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15);
-    }
-  }
-}
-
-.hide-recommendations {
-  color: $text-light;
-  cursor: pointer;
-  font-size: $small-font-size;
-  line-height: inherit;
-  position: absolute;
-  right: 12px;
-  top: -18px;
-  z-index: 2;
-
-  &:focus,
-  &:hover {
-    @include anchor-color-hover;
-  }
-}
-
 // 20. Documents
 // -------------
 

app/assets/stylesheets/shared/recommended_index.scss

@@ -0,0 +1,60 @@
+.recommended-index {
+  @include full-width-background;
+  @include full-width-border(bottom, 1px solid #eee);
+  @include full-width-border(top, 1px solid #fafafa);
+  background: #fafafa;
+  margin-bottom: $line-height;
+  margin-top: rem-calc(-25);
+  padding: $line-height 0 calc($line-height / 2);
+
+  @include breakpoint(medium) {
+    padding-top: 0;
+  }
+
+  h2 {
+    font-size: $small-font-size;
+    text-transform: uppercase;
+  }
+
+  h3 {
+    font-size: $base-font-size;
+    margin-bottom: 0;
+  }
+
+  a {
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  .recommendation {
+    @include card;
+    background: $body-background;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
+    display: block;
+    margin-bottom: calc($line-height / 4);
+    padding: calc($line-height / 2);
+    z-index: 1;
+
+    &:hover:not(:focus-within) {
+      box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15);
+    }
+  }
+
+  .hide-recommendations {
+    color: $text-light;
+    cursor: pointer;
+    font-size: $small-font-size;
+    line-height: inherit;
+    position: absolute;
+    right: 12px;
+    top: -18px;
+    z-index: 2;
+
+    &:focus,
+    &:hover {
+      @include anchor-color-hover;
+    }
+  }
+}

app/components/shared/recommended_index_component.rb

@@ -0,0 +1,14 @@
+class Shared::RecommendedIndexComponent < ApplicationComponent
+  attr_reader :recommended, :disable_recommendations_path, :namespace
+  use_helpers :recommended_path, :current_path_with_query_params
+
+  def initialize(recommended, disable_recommendations_path:, namespace:)
+    @recommended = recommended
+    @disable_recommendations_path = disable_recommendations_path
+    @namespace = namespace
+  end
+
+  def render?
+    feature?("user.recommendations") && recommended.present?
+  end
+end

app/helpers/proposals_helper.rb

@@ -73,6 +73,6 @@ module ProposalsHelper
   end
 
   def show_recommended_proposals?
-    params[:selected].blank? && feature?("user.recommendations") && @recommended_proposals.present?
+    params[:selected].blank?
   end
 end

app/views/debates/index.html.erb

@@ -18,11 +18,9 @@
   <%= render "shared/section_header", i18n_namespace: "debates.index.section_header", image: "debates" %>
 <% end %>
 
-<% if feature?("user.recommendations") && @recommended_debates.present? %>
+<%= render Shared::RecommendedIndexComponent.new(@recommended_debates,
-  <%= render "shared/recommended_index", recommended: @recommended_debates,
                                                  disable_recommendations_path: recommendations_disable_debates_path,
-                                         namespace: "debates" %>
+                                                 namespace: "debates") %>
-<% end %>
 
 <div class="row">
   <div id="debates" class="debates-list small-12 medium-9 column">

app/views/proposals/index.html.erb

@@ -25,9 +25,9 @@
 <% end %>
 
 <% if show_recommended_proposals? %>
-  <%= render "shared/recommended_index", recommended: @recommended_proposals,
+  <%= render Shared::RecommendedIndexComponent.new(@recommended_proposals,
                                                    disable_recommendations_path: recommendations_disable_proposals_path,
-                                         namespace: "proposals" %>
+                                                   namespace: "proposals") %>
 <% end %>
 
 <div class="row">