use more classic pagination

Gemfile

@@ -42,6 +42,8 @@ gem "thor"
 
 gem "imgproxy"
 
+gem "pagy"
+
 group :development, :test do
   # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
   gem "debug", platforms: %i[mri windows]

Gemfile.lock

@@ -153,6 +153,7 @@ GEM
       racc (~> 1.4)
     nokogiri (1.16.4-x86_64-linux)
       racc (~> 1.4)
+    pagy (8.4.4)
     parallel (1.24.0)
     parser (3.3.1.0)
       ast (~> 2.4.1)
@@ -301,6 +302,7 @@ DEPENDENCIES
   erb-formatter
   imgproxy
   jsbundling-rails
+  pagy
   pry-rails
   puma (>= 5.0)
   rails (~> 7.1.3, >= 7.1.3.2)

app/controllers/application_controller.rb

@@ -1,2 +1,3 @@
 class ApplicationController < ActionController::Base
+  include Pagy::Backend
 end

app/controllers/works_controller.rb

@@ -2,7 +2,9 @@ class WorksController < ApplicationController
   before_action :authenticate, only: [:show, :index]
 
   def index
-    @work = random_work
+    # We always pick one work
+    @pagy, works = pagy(Work.all, items: 1)
+    @work = works.sole
   end
 
   def show

app/javascript/controllers/hints_controller.js

@@ -15,9 +15,11 @@ export default class extends Controller {
 
     this.hint = document.createElement("div");
 
-    this.hint.innerText = isMobile
-      ? "flip phone to resize"
-      : "drag corner to resize ⇲";
+    this.hint.innerText = "click to go =>, click left edge to go <=";
+
+    this.hint.innerText += isMobile
+      ? " | flip phone to resize"
+      : " | drag corner to resize ⇲";
 
     this.hint.style.position = "fixed";
     this.hint.style.bottom = "10px";

app/javascript/controllers/random_image_controller.js

@@ -26,60 +26,64 @@ export default class extends Controller {
 
     this.imageDisplayTarget.src = this.imgproxyUrlValue;
 
+    const urlParams = new URLSearchParams(window.location.search);
+    if (!urlParams.has("page")) {
+      urlParams.set("page", 1);
+    }
     // Add event listener to intercept clicks on the viewport
     document.addEventListener("click", this.handleClick.bind(this));
-
-    // Update the page URL with the current slug value while keeping all query parameters
-    const currentSlug = this.slugValue;
-    console.log("slug value", currentSlug);
-
-    let currentPath = window.location.pathname;
-
-    if (/\/works\/\w+/.test(currentPath)) {
-      // If "/works/smth" is present, replace it with "/works/${currentSlug}"
-      currentPath = currentPath.replace(
-        /\/works\/\w+/,
-        `/works/${currentSlug}`
-      );
-    } else {
-      // Otherwise, prepend "/works/${currentSlug}" to the current path
-      currentPath = `/works/${currentSlug}${currentPath}`;
-    }
-
-    console.log("currentPath", currentPath);
-
-    const newURL = `${window.location.origin}${currentPath}${window.location.search}${window.location.hash}`;
-    window.history.replaceState({}, "", newURL);
   }
 
   handleClick(event) {
-    // Calculate the width of the left 20% of the screen
-    const leftBoundary = window.innerWidth * 0.2;
+    // Calculate the width of the left 50% of the screen
+    const leftBoundary = window.innerWidth * 0.5;
 
     // Check if the click target is the draggable box or its children
     if (!event.target.closest("[data-controller='draggable']")) {
-      // Check if the click target is the image element
-      if (event.target === this.imageDisplayTarget) {
-        // Get the current URL
-        const url = new URL(window.location.href);
+      // Check if the click occurred on the left half of the document
+      if (event.clientX < leftBoundary) {
+        this.navigateBack();
+      } else {
+        this.navigateForward();
+      }
+    }
+  }
 
-        // Extract the existing prev_slug and session_id values
-        const prevSlug = url.searchParams.get("ps");
-        const sessionId = url.searchParams.get("i");
+  navigateBack() {
+    const url = new URL(window.location.href);
+    const page = url.searchParams.get("page");
+    this.pageValue = parseInt(page);
 
-        // Update the session_id value if it's not already present
-        if (!sessionId) {
-          url.searchParams.set("i", this.sessionsOutlet.sessionIdValue);
+    if (!this.pageValue) {
+      return;
+    }
+
+    if (this.pageValue > 1) {
+      let newPage = this.pageValue - 1;
+      Turbo.visit(
+        `/works?page=${newPage}&i=${this.sessionsOutlet.sessionIdValue}`,
+        {
+          action: "replace",
         }
+      );
+    }
+  }
 
-        // Construct the new URL with the updated query parameters
-        let newURL = `/works/rand?ps=${prevSlug || this.slugValue}&i=${sessionId || this.sessionsOutlet.sessionIdValue}`;
+  navigateForward() {
+    const url = new URL(window.location.href);
+    const page = url.searchParams.get("page");
+    this.pageValue = parseInt(page);
 
-        // Send a Turbo visit request to the new URL
-        Turbo.visit(newURL, {
-          action: "replace",
-        });
-      }
+    if (!this.pageValue) {
+      this.pageValue = 1;
     }
+
+    let newPage = this.pageValue + 1;
+    Turbo.visit(
+      `/works?page=${newPage}&i=${this.sessionsOutlet.sessionIdValue}`,
+      {
+        action: "replace",
+      }
+    );
   }
 }

app/models/work.rb

@@ -2,9 +2,9 @@ class Work < ApplicationRecord
   scope :excluding_slugs, ->(slugs) { where.not(slug: slugs) }
   scope :random, -> { order(Arel.sql("RANDOM()")) }
 
-  serialize :medium, JSON
-  serialize :dimensions, JSON
-  serialize :meta, JSON
+  serialize :medium, coder: JSON
+  serialize :dimensions, coder: JSON
+  serialize :meta, coder: JSON
 
   validates :title, presence: true
   validates :location, presence: true

app/views/works/_image.html.erb

@@ -0,0 +1,61 @@
+<img
+  data-controller="random-image resize"
+  data-random-image-slug-value="<%= @work.slug %>"
+  data-random-image-imgproxy-url-value="<%= @work.imgproxy_url %>"
+  data-random-image-prev-slug-value="<%= params[:prev_slug] %>"
+  data-random-image-target="imageDisplay"
+  data-random-image-app-env-value="<%= Rails.env %>"
+  data-random-image-sessions-outlet=".session-hex"
+  data-resize-random-image-outlet=".image-display"
+  class="image-display"
+/>
+<div
+  data-controller="draggable"
+  data-action="
+    mousedown->draggable#mousedown
+    mousemove->draggable#mousemove
+    mouseup->draggable#mouseup
+  "
+  class="
+    info-box draggable-box p-3 bg-white bg-opacity-20 text-black font-mono max-w-md
+    text-left filter backdrop-blur-lg text-sm
+  "
+  style="position: absolute; top: 4rem; left: 4rem; width: auto; height: auto;"
+>
+  <h1
+    class="
+      text-2xl font-bold leading-7 text-black xs:truncate xs:text-3xl
+      xs:tracking-tight
+    "
+  >
+    <%= @work.slug.humanize.split.map(&:capitalize).join(" ") %>
+  </h1>
+  <p>
+    📍
+    <%= @work.location %>
+    <br>
+    🗓️
+    <%= @work.year %>
+  </p>
+
+
+  <% if @work.description.present? %>
+    <p class="mt-2 text-base leading-6 text-black">
+      <%= @work.description %>
+    </p>
+  <% end %>
+
+
+  <div class="h-8">
+  </div>
+
+  <% if @work.dimensions.present? %>
+    <p><%= @work.height %>
+    ╳
+    <%= @work.width %>
+    <%= @work.depth %>
+    cm
+    </p>
+  <% end %>
+  <p>©️ Andy Barnow, Marina Naperstak</p>
+</div>

app/views/works/index.html.erb

@@ -0,0 +1 @@
+<%= render "image" %>

app/views/works/show.html.erb

@@ -1,61 +1 @@
-<img
-  data-controller="random-image resize"
-  data-random-image-slug-value="<%= @work.slug %>"
-  data-random-image-imgproxy-url-value="<%= @work.imgproxy_url %>"
-  data-random-image-prev-slug-value="<%= params[:prev_slug] %>"
-  data-random-image-target="imageDisplay"
-  data-random-image-app-env-value="<%= Rails.env %>"
-  data-random-image-sessions-outlet=".session-hex"
-  data-resize-random-image-outlet=".image-display"
-  class="image-display"
-/>
-<div
-  data-controller="draggable"
-  data-action="
-    mousedown->draggable#mousedown
-    mousemove->draggable#mousemove
-    mouseup->draggable#mouseup
-  "
-  class="
-    info-box draggable-box p-3 bg-white bg-opacity-20 text-black font-mono max-w-md
-    text-left filter backdrop-blur-lg text-sm
-  "
-  style="position: absolute; top: 4rem; left: 4rem; width: auto; height: auto;"
->
-  <h1
-    class="
-      text-2xl font-bold leading-7 text-black xs:truncate xs:text-3xl
-      xs:tracking-tight
-    "
-  >
-    <%= @work.slug.humanize.split.map(&:capitalize).join(" ") %>
-  </h1>
-  <p>
-    📍
-    <%= @work.location %>
-    <br>
-    🗓️
-    <%= @work.year %>
-  </p>
-
-
-  <% if @work.description.present? %>
-    <p class="mt-2 text-base leading-6 text-black">
-      <%= @work.description %>
-    </p>
-  <% end %>
-
-
-  <div class="h-8">
-  </div>
-
-  <% if @work.dimensions.present? %>
-    <p><%= @work.height %>
-    ╳
-    <%= @work.width %>
-    <%= @work.depth %>
-    cm
-    </p>
-  <% end %>
-  <p>©️ Andy Barnow, Marina Naperstak</p>
-</div>
+<%= render "image" %>

config/routes.rb

@@ -4,6 +4,7 @@
   # Reveal health status on /up that returns 200 if the app boots with no exceptions, otherwise 500.
   # Can be used by load balancers and uptime monitors to verify that the app is live.
   get "up" => "rails/health#show", :as => :rails_health_check
-  get "/" => "works#show", :status => 301
+  get "/" => "works#index", :status => 301
   get "works/:slug" => "works#show", :as => "work"
+  get "/works" => "works#index"
 end