feat: Add pagination to events page

src/app/[locale]/(default)/events/[eventId]/page.tsx

@@ -9,7 +9,7 @@ import { Badge } from '@/components/ui/Badge';
 import { Separator } from '@/components/ui/Separator';
 import { api } from '@/lib/api/server';
 import { db } from '@/server/db';
-import { eventLocalizations, events } from '@/server/db/tables';
+import { eventLocalizations } from '@/server/db/tables';
 
 export async function generateMetadata({
   params,
@@ -44,14 +44,7 @@ export default async function EventDetailsPage({
   const tLayout = await getTranslations('layout');
   if (Number.isNaN(Number(eventId))) return notFound();
 
-  const event = await db.query.events.findFirst({
-    where: eq(events.id, Number(eventId)),
-    with: {
-      localizations: {
-        where: eq(eventLocalizations.locale, locale),
-      },
-    },
-  });
+  const event = await api.events.fetchEvent(Number(eventId));
 
   const localization = event?.localizations[0];
 

src/app/[locale]/(default)/events/page.tsx

@@ -5,6 +5,7 @@ import {
   parseAsInteger,
   type SearchParams,
 } from 'nuqs/server';
+import { PaginationCarousel } from '@/components/composites/PaginationCarousel';
 import { EventCard } from '@/components/events/EventCard';
 import { ExternalLink } from '@/components/ui/Link';
 import { api } from '@/lib/api/server';
@@ -45,6 +46,7 @@ export default async function EventsPage({
     offset: ((page as number) - 1) * ITEMS_PER_PAGE,
     excludeIds: activeEvents.map((event) => event.id),
   });
+  const totalResults = await api.events.nonActiveEventsTotal();
 
   const upcomingEvents = events.filter((event) => event.startTime > new Date());
   const pastEvents = events.filter((event) => event.endTime < new Date());
@@ -148,6 +150,10 @@ export default async function EventsPage({
           );
         })}
       </div>
+      <PaginationCarousel
+        className='my-6'
+        totalPages={Math.ceil(totalResults / ITEMS_PER_PAGE)}
+      />
     </>
   );
 }

src/server/api/routers/events.ts

@@ -1,5 +1,15 @@
 import { TRPCError } from '@trpc/server';
-import { and, asc, desc, eq, gte, lte, notInArray } from 'drizzle-orm';
+import {
+  and,
+  asc,
+  count,
+  desc,
+  eq,
+  gte,
+  lte,
+  notInArray,
+  or,
+} from 'drizzle-orm';
 import { useTranslationsFromContext } from '@/server/api/locale';
 import { protectedProcedure, publicProcedure } from '@/server/api/procedures';
 import { createRouter } from '@/server/api/trpc';
@@ -93,6 +103,26 @@ const eventsRouter = createRouter({
       },
     });
   }),
+  nonActiveEventsTotal: publicProcedure.query(async ({ ctx }) => {
+    const { user } = await ctx.auth();
+    const where = or(
+      gte(events.startTime, new Date()),
+      lte(events.endTime, new Date()),
+    );
+
+    const counts = await ctx.db
+      .select({ count: count() })
+      .from(events)
+      .where(
+        user && user.groups.length > 0
+          ? where
+          : and(where, eq(events.internal, false)),
+      );
+
+    if (!counts[0]) return Number.NaN;
+
+    return counts[0].count;
+  }),
   fetchEventParticipants: protectedProcedure
     .input((input) =>
       fetchEventSchema(useTranslationsFromContext()).parse(input),