Pagination

Author: simonswiss

app/Http/Controllers/PuppyController.php

@@ -22,7 +22,8 @@ public function index(Request $request)
                             ->orWhere('trait', 'like', "%{$search}%");
                     })
                     ->with(['user', 'likedBy'])
-                    ->get()
+                    ->paginate(9)
+                    ->withQueryString()
             ),
             'filters' => [
                 'search' => $search,

resources/js/components/PuppiesList.tsx

@@ -1,13 +1,17 @@
-import { type Puppy } from '../types';
+import { PaginatedResponse, type Puppy } from '../types';
 import { LikeToggle } from './LikeToggle';
+import { Pagination } from './pagination';
 
-export function PuppiesList({ puppies }: { puppies: Puppy[] }) {
+export function PuppiesList({ puppies }: { puppies: PaginatedResponse<Puppy> }) {
     return (
-        <ul className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-            {puppies.map((puppy) => (
-                <PuppyCard key={puppy.id} puppy={puppy} />
-            ))}
-        </ul>
+        <>
+            <ul className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+                {puppies.data.map((puppy) => (
+                    <PuppyCard key={puppy.id} puppy={puppy} />
+                ))}
+            </ul>
+            <Pagination className="mt-6" meta={puppies.meta} links={puppies.links} />
+        </>
     );
 }
 

resources/js/components/pagination.tsx

@@ -0,0 +1,41 @@
+import { cn } from '@/lib/utils';
+import { PaginationLinks, PaginationMeta } from '@/types';
+import { Link } from '@inertiajs/react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { Button } from './ui/button';
+
+type PaginationProps = {
+    meta: PaginationMeta;
+    links: PaginationLinks;
+    className?: string;
+};
+
+export function Pagination({ meta, links, className }: PaginationProps) {
+    return (
+        <div className={cn('flex items-center justify-between', className)}>
+            <div>
+                {links.prev && (
+                    <Button variant="ghost" asChild>
+                        <Link preserveScroll href={links.prev}>
+                            <ChevronLeft className="size-4" />
+                            <span>Previous</span>
+                        </Link>
+                    </Button>
+                )}
+            </div>
+            <p className="text-sm font-medium">
+                page {meta.current_page} of {meta.last_page}
+            </p>
+            <div>
+                {links.next && (
+                    <Button variant="ghost" asChild>
+                        <Link preserveScroll href={links.next}>
+                            <span>Next</span>
+                            <ChevronRight className="size-4" />
+                        </Link>
+                    </Button>
+                )}
+            </div>
+        </div>
+    );
+}

resources/js/pages/puppies/index.tsx

@@ -6,33 +6,33 @@ import { PuppiesList } from '@/components/PuppiesList';
 import { Search } from '@/components/Search';
 import { Shortlist } from '@/components/Shortlist';
 
-import { Filters, Puppy, SharedData } from '@/types';
+import { Filters, PaginatedResponse, Puppy, SharedData } from '@/types';
 import { usePage } from '@inertiajs/react';
 import { useState } from 'react';
 
-export default function App({ puppies, filters }: { puppies: Puppy[]; filters: Filters }) {
+export default function App({ puppies, filters }: { puppies: PaginatedResponse<Puppy>; filters: Filters }) {
     return (
         <PageWrapper>
             <Container>
                 <Header />
-                <Main inertiaPuppies={puppies} filters={filters} />
+                <Main paginatedPuppies={puppies} filters={filters} />
             </Container>
         </PageWrapper>
     );
 }
 
-function Main({ inertiaPuppies, filters }: { inertiaPuppies: Puppy[]; filters: Filters }) {
-    const [puppies, setPuppies] = useState<Puppy[]>(inertiaPuppies);
+function Main({ paginatedPuppies, filters }: { paginatedPuppies: PaginatedResponse<Puppy>; filters: Filters }) {
+    const [puppies, setPuppies] = useState<Puppy[]>(paginatedPuppies.data);
     const { auth } = usePage<SharedData>().props;
 
     return (
         <main>
             <div className="mt-24 grid gap-8 sm:grid-cols-2">
                 <Search filters={filters} />
-                {auth.user && <Shortlist puppies={inertiaPuppies} />}
+                {auth.user && <Shortlist puppies={paginatedPuppies.data} />}
             </div>
-            <PuppiesList puppies={inertiaPuppies} />
-            <NewPuppyForm puppies={inertiaPuppies} setPuppies={setPuppies} />
+            <PuppiesList puppies={paginatedPuppies} />
+            <NewPuppyForm puppies={paginatedPuppies.data} setPuppies={setPuppies} />
         </main>
     );
 }

resources/js/types/index.d.ts

@@ -55,3 +55,33 @@ export interface Filters {
     search?: string;
     [key: string]: unknown;
 }
+
+export interface PaginationLink {
+    url: string | null;
+    label: string;
+    active: boolean;
+}
+
+export interface PaginationMeta {
+    current_page: number;
+    from: number | null;
+    last_page: number;
+    links: PaginationLink[];
+    path: string;
+    per_page: number;
+    to: number | null;
+    total: number;
+}
+
+export interface PaginationLinks {
+    first: string | null;
+    last: string | null;
+    prev: string | null;
+    next: string | null;
+}
+
+export interface PaginatedResponse<T> {
+    data: T[];
+    meta: PaginationMeta;
+    links: PaginationLinks;
+}