Implement Cursor-Based Pagination for Recent Circuits Using activerec…

…ord_cursor_paginate. (CircuitVerse#5199)

* feat(cursor): implement cursor-based pagination for recent circuits and update pagination styling

Gemfile

@@ -221,3 +221,5 @@ gem "sentry-sidekiq", "~> 5.17"
 
 # for SAML based SSO
 gem 'devise_saml_authenticatable'
+
+gem 'activerecord_cursor_paginate'

Gemfile.lock

@@ -75,6 +75,8 @@ GEM
     activerecord (7.0.8.5)
       activemodel (= 7.0.8.5)
       activesupport (= 7.0.8.5)
+    activerecord_cursor_paginate (0.2.0)
+      activerecord (>= 7.0)
     activestorage (7.0.8.5)
       actionpack (= 7.0.8.5)
       activejob (= 7.0.8.5)
@@ -899,6 +901,7 @@ PLATFORMS
   x86_64-linux
 
 DEPENDENCIES
+  activerecord_cursor_paginate
   acts_as_votable (~> 0.14.0)
   ahoy_matey
   aws-sdk-rails

app/controllers/circuitverse_controller.rb

@@ -4,19 +4,20 @@ class CircuitverseController < ApplicationController
   MAXIMUM_FEATURED_CIRCUITS = 3
 
   def index
-    @projects = Project.select(:id, :author_id, :image_preview, :name, :slug)
-                       .public_and_not_forked
-                       .where.not(image_preview: "default.png")
-                       .order(id: :desc)
-                       .includes(:author)
-                       .limit(Project.per_page)
-
-    page = params[:page].to_i
-    @projects = if page.positive?
-      @projects.paginate(page: page)
-    else
-      @projects.paginate(page: nil)
-    end
+    @projects_paginator = Project.select(:id, :author_id, :image_preview, :name, :slug)
+                                 .public_and_not_forked
+                                 .where.not(image_preview: "default.png")
+                                 .includes(:author)
+                                 .cursor_paginate(
+                                   order: { id: :desc },
+                                   limit: Project.per_page,
+                                   after: params[:after],
+                                   before: params[:before]
+                                 )
+    # Fetch the page of results from the paginator
+    @projects_page = @projects_paginator.fetch
+    # Extract the records for iteration in the view
+    @projects = @projects_page.records
 
     @featured_circuits = Project.joins(:featured_circuit)
                                 .order("featured_circuits.created_at DESC")

app/views/circuitverse/index.html.erb

@@ -192,7 +192,7 @@
         </div>
       </div>
     </div>
-    <% cache "recent-projects-#{params[:page]}", expires_in: 10.minutes do %>
+    <% cache "recent-projects-#{params[:after]}-#{params[:before]}", expires_in: 10.minutes do %>
       <div class="container" id="recent">
         <div class="row center-row home-circuit-card-row">
           <div class="col-12 col-sm-12 col-md-12 col-lg-12">
@@ -217,7 +217,14 @@
           <% end %>
         </div>
         <div class="container pagination-cont">
-          <%= will_paginate @projects, renderer: PaginateRenderer, page_links: false %>
+          <div class="pagination justify-content-center">
+            <% if @projects_page.has_previous? %>
+              <%= link_to t("previous"), root_path(before: @projects_page.previous_cursor), class: "page-link" %>
+            <% end %>
+            <% if @projects_page.has_next? %>
+              <%= link_to t("next"), root_path(after: @projects_page.next_cursor), class: "page-link" %>
+            <% end %>
+          </div>
         </div>
       </div>
     <% end %>
@@ -257,4 +264,4 @@
 
     <!-- Bootstrap core JavaScript
     ================================================== -->
-    <!-- Placed at the end of the document so the pages load faster -->
+    <!-- Placed at the end of the document so the pages load faster -->