✨ Add pagination to events page (#1689)

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

apps/web/src/app/[locale]/(space)/events/page.tsx

@@ -16,6 +16,7 @@ import {
   EmptyStateIcon,
   EmptyStateTitle,
 } from "@/components/empty-state";
+import { Pagination } from "@/components/pagination";
 import { StackedList, StackedListItem } from "@/components/stacked-list";
 import { Trans } from "@/components/trans";
 import { getScheduledEvents } from "@/features/scheduled-event/api/get-scheduled-events";
@@ -30,17 +31,22 @@ import { EventsTabbedView } from "./events-tabbed-view";
 async function loadData({
   status,
   search,
+  page = 1,
+  pageSize = 10,
 }: {
   status: Status;
   search?: string;
+  page?: number;
+  pageSize?: number;
 }) {
   const { userId } = await requireUser();
-  const scheduledEvents = await getScheduledEvents({
+  return getScheduledEvents({
     userId,
     status,
     search,
+    page,
+    pageSize,
   });
-  return scheduledEvents;
 }
 
 async function ScheduledEventEmptyState({ status }: { status: Status }) {
@@ -98,11 +104,24 @@ export default async function Page({
   searchParams,
 }: {
   params: Params;
-  searchParams?: { status: string; q?: string };
+  searchParams?: { status: string; q?: string; page?: string };
 }) {
   const { t } = await getTranslation(params.locale);
   const status = statusSchema.catch("upcoming").parse(searchParams?.status);
-  const scheduledEvents = await loadData({ status, search: searchParams?.q });
+  const pageParam = searchParams?.page;
+  const page = pageParam ? Math.max(1, Number(pageParam) || 1) : 1;
+  const pageSize = 10;
+
+  const {
+    events: paginatedEvents,
+    totalCount,
+    totalPages,
+  } = await loadData({
+    status,
+    search: searchParams?.q,
+    page,
+    pageSize,
+  });
 
   return (
     <PageContainer>
@@ -127,12 +146,12 @@ export default async function Page({
               })}
             />
             <div className="space-y-6">
-              {scheduledEvents.length === 0 && (
+              {paginatedEvents.length === 0 && (
                 <ScheduledEventEmptyState status={status} />
               )}
-              {scheduledEvents.length > 0 && (
+              {paginatedEvents.length > 0 && (
                 <StackedList>
-                  {scheduledEvents.map((event) => (
+                  {paginatedEvents.map((event) => (
                     <StackedListItem key={event.id}>
                       <ScheduledEventListItem
                         eventId={event.id}
@@ -149,6 +168,14 @@ export default async function Page({
                   ))}
                 </StackedList>
               )}
+              {totalPages > 1 && (
+                <Pagination
+                  currentPage={page}
+                  totalPages={totalPages}
+                  totalItems={totalCount}
+                  pageSize={pageSize}
+                />
+              )}
             </div>
           </div>
         </EventsTabbedView>

apps/web/src/features/scheduled-event/api/get-scheduled-events.ts

@@ -1,3 +1,4 @@
+import type { Prisma } from "@rallly/database";
 import { prisma } from "@rallly/database";
 import dayjs from "dayjs";
 import timezone from "dayjs/plugin/timezone";
@@ -19,55 +20,65 @@ export async function getScheduledEvents({
   userId,
   status,
   search,
+  page = 1,
+  pageSize = 10,
 }: {
   userId: string;
   status: Status;
   search?: string;
+  page?: number;
+  pageSize?: number;
 }) {
   const now = new Date();
 
-  const rawEvents = await prisma.scheduledEvent.findMany({
-    where: {
-      userId,
-      deletedAt: null,
-      ...(status != "past" && { start: { gte: now } }),
-      ...(status === "past" && { start: { lt: now } }),
-      ...(search && { title: { contains: search, mode: "insensitive" } }),
-      status: mapStatus[status],
-    },
-    orderBy: {
-      start: status === "past" ? "desc" : "asc",
-    },
-    select: {
-      id: true,
-      title: true,
-      description: true,
-      location: true,
-      start: true,
-      end: true,
-      allDay: true,
-      timeZone: true,
-      status: true,
-      invites: {
-        select: {
-          id: true,
-          inviteeName: true,
-          user: {
-            select: {
-              image: true,
+  const where: Prisma.ScheduledEventWhereInput = {
+    userId,
+    deletedAt: null,
+    ...(status != "past" && { start: { gte: now } }),
+    ...(status === "past" && { start: { lt: now } }),
+    ...(search && { title: { contains: search, mode: "insensitive" } }),
+    status: mapStatus[status],
+  };
+
+  const [rawEvents, totalCount] = await Promise.all([
+    prisma.scheduledEvent.findMany({
+      where,
+      orderBy: {
+        start: status === "past" ? "desc" : "asc",
+      },
+      select: {
+        id: true,
+        title: true,
+        description: true,
+        location: true,
+        start: true,
+        end: true,
+        allDay: true,
+        timeZone: true,
+        status: true,
+        invites: {
+          select: {
+            id: true,
+            inviteeName: true,
+            user: {
+              select: {
+                image: true,
+              },
             },
           },
         },
       },
-    },
-  });
+      skip: (page - 1) * pageSize,
+      take: pageSize,
+    }),
+    prisma.scheduledEvent.count({ where }),
+  ]);
 
   const events = rawEvents.map((event) => ({
     ...event,
     status:
       event.status === "confirmed"
-        ? // If the event is confirmed, it's either past or upcoming
-          ((event.start < now ? "past" : "upcoming") as Status)
+        ? ((event.start < now ? "past" : "upcoming") as Status)
         : event.status,
     invites: event.invites.map((invite) => ({
       id: invite.id,
@@ -76,5 +87,8 @@ export async function getScheduledEvents({
     })),
   }));
 
-  return events;
+  const totalPages = Math.ceil(totalCount / pageSize);
+  const hasNextPage = page * pageSize < totalCount;
+
+  return { events, totalCount, totalPages, hasNextPage };
 }