From 1f3bc1134f27f4d28b30e4c26ee2a0c3f6c20f16 Mon Sep 17 00:00:00 2001
From: Kevin McConnell <kevin@37signals.com>
Date: Fri, 24 Jan 2025 17:42:36 +0000
Subject: [PATCH] Paginate the read notifications

---
 Gemfile                                       |  1 +
 Gemfile.lock                                  |  4 +++
 app/controllers/notifications_controller.rb   |  7 ++++--
 app/helpers/notifications_helper.rb           |  6 +++++
 .../fetch_on_visible_controller.js            | 25 +++++++++++++++++++
 app/views/notifications/index.html.erb        |  8 +++---
 .../notifications/index.turbo_stream.erb      |  7 ++++++
 7 files changed, 53 insertions(+), 5 deletions(-)
 create mode 100644 app/javascript/controllers/fetch_on_visible_controller.js
 create mode 100644 app/views/notifications/index.turbo_stream.erb

diff --git a/Gemfile b/Gemfile
index 5c3b0ff65..fdeb0ea2b 100644
--- a/Gemfile
+++ b/Gemfile
@@ -22,6 +22,7 @@ gem "thruster", require: false
 
 # Features
 gem "bcrypt", "~> 3.1.7"
+gem "geared_pagination", "~> 1.2"
 gem "rqrcode"
 gem "redcarpet"
 gem "rouge"
diff --git a/Gemfile.lock b/Gemfile.lock
index 26b1c521b..cff4ceb78 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -157,6 +157,9 @@ GEM
     fugit (1.11.1)
       et-orbi (~> 1, >= 1.2.11)
       raabro (~> 1.4)
+    geared_pagination (1.2.0)
+      activesupport (>= 5.0)
+      addressable (>= 2.5.0)
     globalid (1.2.1)
       activesupport (>= 6.1)
     hotwire-spark (0.1.12)
@@ -397,6 +400,7 @@ DEPENDENCIES
   brakeman
   capybara
   debug
+  geared_pagination (~> 1.2)
   hotwire-spark
   hotwire_combobox!
   importmap-rails
diff --git a/app/controllers/notifications_controller.rb b/app/controllers/notifications_controller.rb
index 85b656c4c..83e5db488 100644
--- a/app/controllers/notifications_controller.rb
+++ b/app/controllers/notifications_controller.rb
@@ -1,6 +1,9 @@
 class NotificationsController < ApplicationController
   def index
-    @read = Current.user.notifications.read.ordered
-    @unread = Current.user.notifications.unread.ordered
+    set_page_and_extract_portion_from Current.user.notifications.read.ordered
+
+    if @page.first?
+      @unread = Current.user.notifications.unread.ordered
+    end
   end
 end
diff --git a/app/helpers/notifications_helper.rb b/app/helpers/notifications_helper.rb
index ddc142efb..bb0dade2a 100644
--- a/app/helpers/notifications_helper.rb
+++ b/app/helpers/notifications_helper.rb
@@ -25,6 +25,12 @@ module NotificationsHelper
       data: { turbo_frame: "_top" }, &
   end
 
+  def notifications_next_page_link(page)
+    unless @page.last?
+      tag.div id: "next_page", data: { controller: "fetch-on-visible", fetch_on_visible_url_value: notifications_path(page: @page.next_param) }
+    end
+  end
+
   private
     def notification_event_action(notification)
       if notification_is_for_initial_assignement?(notification)
diff --git a/app/javascript/controllers/fetch_on_visible_controller.js b/app/javascript/controllers/fetch_on_visible_controller.js
new file mode 100644
index 000000000..42f1a36da
--- /dev/null
+++ b/app/javascript/controllers/fetch_on_visible_controller.js
@@ -0,0 +1,25 @@
+import { Controller } from "@hotwired/stimulus"
+import { get } from "@rails/request.js"
+
+export default class extends Controller {
+  static values = { url: String }
+
+  connect() {
+    this.#observe()
+  }
+
+  #observe() {
+    const observer = new IntersectionObserver((entries) => {
+      const visible = !!entries.find(entry => entry.isIntersecting)
+      if (visible) {
+        this.#fetch()
+      }
+    })
+
+    observer.observe(this.element)
+  }
+
+  #fetch() {
+    get(this.urlValue, { responseKind: "turbo-stream" })
+  }
+}
diff --git a/app/views/notifications/index.html.erb b/app/views/notifications/index.html.erb
index efbb8c4e9..1f302e623 100644
--- a/app/views/notifications/index.html.erb
+++ b/app/views/notifications/index.html.erb
@@ -29,9 +29,11 @@
   <% end %>
 </section>
 
-<% if @read.any? %>
-  <section class="notificiations-list--read panel center borderless unpad flex flex-column gap-half margin-block-start-double">
+<% if @page.records.any? %>
+  <section id="notifications_list_read" class="notificiations-list--read panel center borderless unpad flex flex-column gap-half margin-block-start-double">
     <h2 class="txt-small margin-block-start-double margin-block-end-half txt-uppercase">Previously seen</h2>
-    <%= render @read %>
+    <%= render @page.records %>
   </section>
+
+  <%= notifications_next_page_link(@page) %>
 <% end %>
diff --git a/app/views/notifications/index.turbo_stream.erb b/app/views/notifications/index.turbo_stream.erb
new file mode 100644
index 000000000..00d744dcd
--- /dev/null
+++ b/app/views/notifications/index.turbo_stream.erb
@@ -0,0 +1,7 @@
+<%= turbo_stream.append :notifications_list_read do %>
+  <%= render @page.records %>
+<% end %>
+
+<%= turbo_stream.replace :next_page do %>
+  <%= notifications_next_page_link(@page) %>
+<% end %>