feat: add a pagination component

Author: arianrhodsandlot

pnpm-lock.yaml

@@ -1,4 +1,4 @@
-import { and, eq, inArray, type InferSelectModel } from 'drizzle-orm'
+import { and, count, eq, inArray, type InferSelectModel } from 'drizzle-orm'
 import { compact, keyBy } from 'es-toolkit'
 import { getContextData } from 'waku/middleware/context'
 import { romTable } from '../databases/library/schema.ts'
@@ -39,7 +39,16 @@ async function getMetadata(romResults: InferSelectModel<typeof romTable>[]) {
   return results
 }
 
-export async function getRoms({ id, platform }: { id?: string; platform?: string } = {}) {
+type GetRomsReturning = Awaited<ReturnType<typeof getRoms>>
+export type Roms = GetRomsReturning['roms']
+export type RomsPagination = GetRomsReturning['pagination']
+
+export async function getRoms({
+  id,
+  page = 1,
+  pageSize = 100,
+  platform,
+}: { id?: string; page?: number; pageSize?: number; platform?: string } = {}) {
   const { currentUser, db } = getContextData()
   const { library } = db
 
@@ -51,8 +60,19 @@ export async function getRoms({ id, platform }: { id?: string; platform?: string
     conditions.push(eq(romTable.platform, platform))
   }
   const where = and(...conditions)
-  const romResults = await library.select().from(romTable).orderBy(romTable.file_name).where(where).limit(100)
+
+  const offset = (page - 1) * pageSize
+  const romResults = await library
+    .select()
+    .from(romTable)
+    .orderBy(romTable.file_name)
+    .where(where)
+    .offset(offset)
+    .limit(pageSize)
+
+  const [{ total }] = await library.select({ total: count() }).from(romTable).orderBy(romTable.file_name).where(where)
 
   const results = await getMetadata(romResults)
-  return results
+
+  return { pagination: { current: page, pages: Math.ceil(total / pageSize), size: pageSize, total }, roms: results }
 }

src/controllers/get-roms.ts

@@ -1,9 +1,9 @@
 import { atom } from 'jotai'
 import { defaultPreference, type Preference } from '@/constants/preference.ts'
-import type { getRoms } from '@/controllers/get-roms'
+import type { Roms } from '@/controllers/get-roms'
 
 export const serverDataAtom = atom<{ [key: string]: any; preference: Preference }>({
   preference: defaultPreference,
 })
 
-export const romsAtom = atom<Awaited<ReturnType<typeof getRoms>>>()
+export const romsAtom = atom<Roms>()

src/pages/library/atoms.ts

@@ -40,7 +40,7 @@ export default function AppLayout({
 
         <div className='flex h-full flex-1'>
           <div className='relative my-4 mr-4 flex flex-1 overflow-hidden rounded bg-zinc-50 shadow-[0_0_12px] shadow-black/10'>
-            <MainScrollArea className='z-1 relative flex-1 p-4' key={req.url.pathname} size='2'>
+            <MainScrollArea className='z-1 relative flex-1 p-4' key={req.url.href} size='2'>
               <main className='min-h-full'>{children}</main>
             </MainScrollArea>
             {append}

src/pages/library/components/app-layout.tsx

@@ -0,0 +1,30 @@
+import { Button } from '@radix-ui/themes'
+import { range } from 'es-toolkit'
+import { Link } from 'waku'
+import type { RomsPagination } from '@/controllers/get-roms'
+
+export function GameListPagination({ pagination }: { pagination: RomsPagination }) {
+  const { current, pages } = pagination
+
+  if (pages <= 1) {
+    return
+  }
+
+  return (
+    <ul className='flex flex-wrap justify-center gap-2 px-10'>
+      {range(1, pages).map((page) => (
+        <li key={page}>
+          <Button asChild size='3' variant={current === page ? 'solid' : 'soft'}>
+            {current === page ? (
+              <span>{page}</span>
+            ) : (
+              <Link key={page} to={`?page=${page}`}>
+                {page}
+              </Link>
+            )}
+          </Button>
+        </li>
+      ))}
+    </ul>
+  )
+}

src/pages/library/components/game-list-pagination.tsx

@@ -1,10 +1,12 @@
 'use client'
 import { useAtom } from 'jotai'
 import { useEffect } from 'react'
+import type { Roms, RomsPagination } from '@/controllers/get-roms.ts'
 import { romsAtom } from '../atoms.ts'
 import { GameEntry } from './game-entry.tsx'
+import { GameListPagination } from './game-list-pagination.tsx' // Import the Pagination component
 
-export function GameList({ roms: initialRoms }: { roms: any[] }) {
+export function GameList({ pagination, roms: initialRoms }: { pagination: RomsPagination; roms: Roms }) {
   const [roms, setRoms] = useAtom(romsAtom)
 
   const renderedRoms = roms || initialRoms
@@ -14,10 +16,13 @@ export function GameList({ roms: initialRoms }: { roms: any[] }) {
   }, [setRoms, initialRoms])
 
   return (
-    <div className='grid gap-4 [grid-template-columns:repeat(auto-fill,minmax(calc(var(--spacing)*40),1fr))]'>
-      {renderedRoms.map((rom) => (
-        <GameEntry key={rom.id} rom={rom} />
-      ))}
+    <div>
+      <div className='grid gap-4 [grid-template-columns:repeat(auto-fill,minmax(calc(var(--spacing)*40),1fr))]'>
+        {renderedRoms.map((rom) => (
+          <GameEntry key={rom.id} rom={rom} />
+        ))}
+      </div>
+      <GameListPagination pagination={pagination} />
     </div>
   )
 }

src/pages/library/components/game-list.tsx

@@ -2,23 +2,28 @@ import { getRoms } from '@/controllers/get-roms.ts'
 import AppLayout from './components/app-layout.tsx'
 import { GameList } from './components/game-list.tsx'
 
-export async function LibraryPage() {
-  const roms = await getRoms()
+export async function LibraryPage({ query }: { query: string }) {
+  const page = Number.parseInt(new URLSearchParams(query).get('page') || '', 10) || 1
+  const { pagination, roms } = await getRoms({ page })
+
+  if (page > 1 && roms.length === 0) {
+    return '404'
+  }
 
   return (
     <AppLayout>
       <title>Library - RetroAssembly</title>
       <div className='flex flex-col gap-5'>
         <div className='relative flex justify-between px-4 pt-4'>
-          <h1 className='text-5xl font-[Oswald_Variable] font-semibold'>Library</h1>
+          <h1 className='text-5xl font-[Oswald_Variable] font-semibold'>Library {page}</h1>
           <div className='mt-4 flex items-center gap-2 text-zinc-400'>
             <span className='icon-[mdi--bar-chart] text-black' />
             <span className='font-[DSEG7_Modern] font-bold text-rose-700'>{roms.length}</span> games for{' '}
             <span className='font-[DSEG7_Modern] font-bold text-rose-700'>{8}</span> platforms in total
           </div>
         </div>
         <hr className='border-t-1 border-t-black/20' />
-        <GameList roms={roms} />
+        <GameList pagination={pagination} roms={roms} />
       </div>
     </AppLayout>
   )

src/pages/library/page.tsx

@@ -7,12 +7,22 @@ import { SidebarLinks } from '../components/sidebar-links.tsx'
 import { PlatformBackground } from './components/platform-background.tsx'
 import { UploadButton } from './components/upload-button.tsx'
 
-export async function PlatformPage({ platform }) {
+interface PlatformPageProps {
+  platform: string
+  query: string
+}
+
+export async function PlatformPage({ platform, query }: PlatformPageProps) {
   if (!platformMap[platform]) {
     return '404 not found'
   }
 
-  const roms = await getRoms({ platform })
+  const page = Number.parseInt(new URLSearchParams(query).get('page') || '', 10) || 1
+  const { pagination, roms } = await getRoms({ page, platform })
+
+  if (page > 1 && roms.length === 0) {
+    return '404'
+  }
 
   return (
     <AppLayout append={<PlatformBackground platform={platform} />} sidebar={<SidebarLinks platform={platform} />}>
@@ -21,7 +31,7 @@ export async function PlatformPage({ platform }) {
       <div className='flex flex-col gap-5'>
         <DeviceInfo platform={platform} />
         <hr className='border-t-1 border-t-black/20' />
-        <GameList roms={roms} />
+        <GameList pagination={pagination} roms={roms} />
         <UploadButton platform={platform} />
       </div>
     </AppLayout>