Add basic pagination to the your shows page (#1103)

app/controllers/api/your_shows_controller.rb

@@ -3,6 +3,8 @@
 module API
   # Exposes all of the current human's shows -- ones that they have saved
   class YourShowsController < ApplicationController
+    PAGE_SIZE = 10
+
     def index
       authorize! { current_human.present? }
 
@@ -18,9 +20,12 @@ def index
                      SQL
                    )
                  )
+                 .limit(PAGE_SIZE)
+                 .offset((current_page - 1) * PAGE_SIZE)
 
       render json: {
-        your_shows: MyShowSerializer.many(my_shows)
+        your_shows: MyShowSerializer.many(my_shows),
+        page: current_page
       }
     end
 
@@ -75,5 +80,13 @@ def search(my_shows)
         my_shows
       end
     end
+
+    def current_page
+      Integer(params[:page]).tap do |val|
+        raise ArgumentError unless val >= 1
+      end
+    rescue TypeError, ArgumentError
+      1
+    end
   end
 end

app/javascript/components/YourShowsList.tsx

@@ -1,6 +1,7 @@
 import { FunctionComponent, useContext, useEffect, useState } from "react"
 import { Human, YourShow } from "../types"
 import { Link, useSearchParams } from "react-router-dom"
+import { Button } from "./Button"
 import { displayMyShowStatus } from "../helpers/my_shows"
 import { Markdown } from "./Markdown"
 import { Poster } from "./Poster"
@@ -78,6 +79,8 @@ export const YourShowsList: FunctionComponent<Props> = (props: Props) => {
     ? searchParams.getAll("statuses")
     : ["currently_watching"]
 
+  const page: number = parseInt(searchParams.get("page") || "") || 1
+
   useEffect(() => {
     globalSetLoading(true)
     setLoading(true)
@@ -92,6 +95,8 @@ export const YourShowsList: FunctionComponent<Props> = (props: Props) => {
       params.statuses = statusesFilterValue
     }
 
+    params.page = page
+
     // TODO: debounce me
     fetch(`/api/your-shows.json?${queryString.stringify(params, { arrayFormat: "bracket" })}`, {
       headers: {
@@ -110,7 +115,7 @@ export const YourShowsList: FunctionComponent<Props> = (props: Props) => {
         setLoading(false)
         globalSetLoading(false)
       })
-  }, [titleQueryValue, statusesFilterValue.join("-")])
+  }, [titleQueryValue, statusesFilterValue.join("-"), page])
 
   return (
     <div>
@@ -149,6 +154,31 @@ export const YourShowsList: FunctionComponent<Props> = (props: Props) => {
           <option value="finished">Finished</option>
         </Select>
         {loading ? <div>Loading your shows...</div> : <ListShows shows={shows} />}
+        <div className="flex justify-between">
+          <div>
+            {page > 1 && (
+              <Button
+                onClick={() => {
+                  searchParams.set("page", (page - 1).toString())
+                  setSearchParams(searchParams)
+                }}
+              >
+                Previous
+              </Button>
+            )}
+          </div>
+          <div className="font-bold">Page {page} </div>
+          <div>
+            <Button
+              onClick={() => {
+                searchParams.set("page", (page + 1).toString())
+                setSearchParams(searchParams)
+              }}
+            >
+              Next
+            </Button>
+          </div>
+        </div>
       </>
     </div>
   )

app/javascript/pages/ChangelogPage.tsx

@@ -7,6 +7,7 @@ const changelog = `
 
   But here's some highlights of when things happened.
 
+  1. **May 22, 2023** — Basic pagination on the "Your shows" page to only show 10 shows at a time
   1. **May 22, 2023** — Humans can now remove a show from their "Your shows" list entirely. Seasoning will forget your "note to self" and the assigned status. It will still remember which episodes you've checked off that you've seen, and your season reviews.
   1. **April 17, 2023** — Humans can optionally set a limit on how many shows they are currently watching
   1. **March 31, 2023** — Show "last refreshed at" show data on season page and episode page