Use anchors in comments order and pagination links

It was a bit frustrating to click on one of the order elements or the
link to the next page and having to scroll down again until reaching the
comments.

app/components/shared/comments_component.html.erb

@@ -9,9 +9,9 @@
         <%= render "shared/login_to_comment" %>
       <% end %>
 
-      <%= render "shared/order_links", i18n_namespace: "comments" %>
+      <%= render Shared::OrderLinksComponent.new("comments", anchor: "comments") %>
       <%= render "comments/comment_list", comments: comment_tree.root_comments %>
-      <%= paginate comment_tree.root_comments %>
+      <%= paginate comment_tree.root_comments, params: { anchor: "comments" } %>
     </div>
   </div>
 <% end %>

app/components/shared/order_links_component.rb

@@ -1,9 +1,10 @@
 class Shared::OrderLinksComponent < ApplicationComponent
-  attr_reader :i18n_namespace
+  attr_reader :i18n_namespace, :anchor
   delegate :current_path_with_query_params, :current_order, :valid_orders, to: :helpers
 
-  def initialize(i18n_namespace)
+  def initialize(i18n_namespace, anchor: nil)
     @i18n_namespace = i18n_namespace
+    @anchor = anchor
   end
 
   private
@@ -21,7 +22,7 @@ class Shared::OrderLinksComponent < ApplicationComponent
     end
 
     def link_path(order)
-      current_path_with_query_params(order: order, page: 1)
+      current_path_with_query_params(order: order, page: 1, anchor: anchor)
     end
 
     def link_text(order)

app/views/comments/_comment_tree.html.erb

@@ -31,9 +31,9 @@
           <%= render "shared/login_to_comment" %>
         <% end %>
 
-        <%= render "shared/order_links", i18n_namespace: "comments" %>
+        <%= render Shared::OrderLinksComponent.new("comments", anchor: "comments") %>
         <%= render "comments/comment_list", comments: comment_tree.root_comments, valuation: valuation %>
-        <%= paginate comment_tree.root_comments %>
+        <%= paginate comment_tree.root_comments, params: { anchor: "comments" } %>
       </div>
     </div>
   </section>

spec/system/comments/budget_investments_spec.rb

@@ -111,12 +111,14 @@ describe "Commenting Budget::Investments" do
     click_link "Newest first"
 
     expect(page).to have_link "Newest first", class: "is-active"
+    expect(page).to have_current_path(/#comments/, url: true)
     expect(c3.body).to appear_before(c2.body)
     expect(c2.body).to appear_before(c1.body)
 
     click_link "Oldest first"
 
     expect(page).to have_link "Oldest first", class: "is-active"
+    expect(page).to have_current_path(/#comments/, url: true)
     expect(c1.body).to appear_before(c2.body)
     expect(c2.body).to appear_before(c3.body)
   end
@@ -184,6 +186,7 @@ describe "Commenting Budget::Investments" do
     end
 
     expect(page).to have_css(".comment", count: 2)
+    expect(page).to have_current_path(/#comments/, url: true)
   end
 
   describe "Not logged user" do

spec/system/comments/budget_investments_valuation_spec.rb

@@ -161,6 +161,7 @@ describe "Internal valuation comments on Budget::Investments" do
       end
 
       expect(page).to have_css(".comment", count: 2)
+      expect(page).to have_current_path(/#comments/, url: true)
     end
   end
 

spec/system/comments/debates_spec.rb

@@ -127,12 +127,14 @@ describe "Commenting debates" do
     click_link "Newest first"
 
     expect(page).to have_link "Newest first", class: "is-active"
+    expect(page).to have_current_path(/#comments/, url: true)
     expect(c3.body).to appear_before(c2.body)
     expect(c2.body).to appear_before(c1.body)
 
     click_link "Oldest first"
 
     expect(page).to have_link "Oldest first", class: "is-active"
+    expect(page).to have_current_path(/#comments/, url: true)
     expect(c1.body).to appear_before(c2.body)
     expect(c2.body).to appear_before(c3.body)
   end
@@ -200,6 +202,7 @@ describe "Commenting debates" do
     end
 
     expect(page).to have_css(".comment", count: 2)
+    expect(page).to have_current_path(/#comments/, url: true)
   end
 
   describe "Not logged user" do

spec/system/comments/legislation_annotations_spec.rb

@@ -119,12 +119,14 @@ describe "Commenting legislation questions" do
     click_link "Newest first"
 
     expect(page).to have_link "Newest first", class: "is-active"
+    expect(page).to have_current_path(/#comments/, url: true)
     expect(c3.body).to appear_before(c2.body)
     expect(c2.body).to appear_before(c1.body)
 
     click_link "Oldest first"
 
     expect(page).to have_link "Oldest first", class: "is-active"
+    expect(page).to have_current_path(/#comments/, url: true)
     expect(c1.body).to appear_before(c2.body)
     expect(c2.body).to appear_before(c3.body)
   end
@@ -208,6 +210,7 @@ describe "Commenting legislation questions" do
     end
 
     expect(page).to have_css(".comment", count: 3)
+    expect(page).to have_current_path(/#comments/, url: true)
   end
 
   describe "Not logged user" do

spec/system/comments/legislation_questions_spec.rb

@@ -113,12 +113,14 @@ describe "Commenting legislation questions" do
     click_link "Newest first"
 
     expect(page).to have_link "Newest first", class: "is-active"
+    expect(page).to have_current_path(/#comments/, url: true)
     expect(c3.body).to appear_before(c2.body)
     expect(c2.body).to appear_before(c1.body)
 
     click_link "Oldest first"
 
     expect(page).to have_link "Oldest first", class: "is-active"
+    expect(page).to have_current_path(/#comments/, url: true)
     expect(c1.body).to appear_before(c2.body)
     expect(c2.body).to appear_before(c3.body)
   end
@@ -186,6 +188,7 @@ describe "Commenting legislation questions" do
     end
 
     expect(page).to have_css(".comment", count: 2)
+    expect(page).to have_current_path(/#comments/, url: true)
   end
 
   describe "Not logged user" do

spec/system/comments/polls_spec.rb

@@ -107,12 +107,14 @@ describe "Commenting polls" do
     click_link "Newest first"
 
     expect(page).to have_link "Newest first", class: "is-active"
+    expect(page).to have_current_path(/#comments/, url: true)
     expect(c3.body).to appear_before(c2.body)
     expect(c2.body).to appear_before(c1.body)
 
     click_link "Oldest first"
 
     expect(page).to have_link "Oldest first", class: "is-active"
+    expect(page).to have_current_path(/#comments/, url: true)
     expect(c1.body).to appear_before(c2.body)
     expect(c2.body).to appear_before(c3.body)
   end
@@ -180,6 +182,7 @@ describe "Commenting polls" do
     end
 
     expect(page).to have_css(".comment", count: 2)
+    expect(page).to have_current_path(/#comments/, url: true)
   end
 
   describe "Not logged user" do

spec/system/comments/proposals_spec.rb

@@ -107,12 +107,14 @@ describe "Commenting proposals" do
     click_link "Newest first"
 
     expect(page).to have_link "Newest first", class: "is-active"
+    expect(page).to have_current_path(/#comments/, url: true)
     expect(c3.body).to appear_before(c2.body)
     expect(c2.body).to appear_before(c1.body)
 
     click_link "Oldest first"
 
     expect(page).to have_link "Oldest first", class: "is-active"
+    expect(page).to have_current_path(/#comments/, url: true)
     expect(c1.body).to appear_before(c2.body)
     expect(c2.body).to appear_before(c3.body)
   end
@@ -180,6 +182,7 @@ describe "Commenting proposals" do
     end
 
     expect(page).to have_css(".comment", count: 2)
+    expect(page).to have_current_path(/#comments/, url: true)
   end
 
   describe "Not logged user" do

spec/system/comments/topics_spec.rb

@@ -114,12 +114,14 @@ describe "Commenting topics from proposals" do
     click_link "Newest first"
 
     expect(page).to have_link "Newest first", class: "is-active"
+    expect(page).to have_current_path(/#comments/, url: true)
     expect(c3.body).to appear_before(c2.body)
     expect(c2.body).to appear_before(c1.body)
 
     click_link "Oldest first"
 
     expect(page).to have_link "Oldest first", class: "is-active"
+    expect(page).to have_current_path(/#comments/, url: true)
     expect(c1.body).to appear_before(c2.body)
     expect(c2.body).to appear_before(c3.body)
   end
@@ -195,6 +197,7 @@ describe "Commenting topics from proposals" do
     end
 
     expect(page).to have_css(".comment", count: 2)
+    expect(page).to have_current_path(/#comments/, url: true)
   end
 
   describe "Not logged user" do
@@ -658,12 +661,14 @@ describe "Commenting topics from budget investments" do
     click_link "Newest first"
 
     expect(page).to have_link "Newest first", class: "is-active"
+    expect(page).to have_current_path(/#comments/, url: true)
     expect(c3.body).to appear_before(c2.body)
     expect(c2.body).to appear_before(c1.body)
 
     click_link "Oldest first"
 
     expect(page).to have_link "Oldest first", class: "is-active"
+    expect(page).to have_current_path(/#comments/, url: true)
     expect(c1.body).to appear_before(c2.body)
     expect(c2.body).to appear_before(c3.body)
   end
@@ -739,6 +744,7 @@ describe "Commenting topics from budget investments" do
     end
 
     expect(page).to have_css(".comment", count: 2)
+    expect(page).to have_current_path(/#comments/, url: true)
   end
 
   describe "Not logged user" do