feat: add infinite scroll on bookings tabs (#1059)

* feat: add infinite scroll on bookings tabs

* bookings page infinite scroll PR comments (#1060)

* check if `InteractionObserver` is supported

* revert query cell and use bespoke behaviour

* Update pages/bookings/[status].tsx

Co-authored-by: Mihai C <34626017+mihaic195@users.noreply.github.com>

* load more button

* make inview as a callback

Co-authored-by: Mihai C <34626017+mihaic195@users.noreply.github.com>

* mt-6

* fix: translation strings and remove unnecessary stuff

Co-authored-by: Alex Johansson <alexander@n1s.se>

server/routers/viewer.tsx

@@ -226,8 +226,14 @@ const loggedInViewerRouter = createProtectedRouter()
   .query("bookings", {
     input: z.object({
       status: z.enum(["upcoming", "past", "cancelled"]),
+      limit: z.number().min(1).max(100).nullish(),
+      cursor: z.number().nullish(), // <-- "cursor" needs to exist when using useInfiniteQuery, but can be any type
     }),
     async resolve({ ctx, input }) {
+      // using offset actually because cursor pagination requires a unique column
+      // for orderBy, but we don't use a unique column in our orderBy
+      const take = input.limit ?? 10;
+      const skip = input.cursor ?? 0;
       const { prisma, user } = ctx;
       const bookingListingByStatus = input.status;
       const bookingListingFilters: Record<typeof bookingListingByStatus, Prisma.BookingWhereInput[]> = {
@@ -237,8 +243,8 @@ const loggedInViewerRouter = createProtectedRouter()
       };
       const bookingListingOrderby: Record<typeof bookingListingByStatus, Prisma.BookingOrderByInput> = {
         upcoming: { startTime: "desc" },
-        past: { startTime: "asc" },
-        cancelled: { startTime: "asc" },
+        past: { startTime: "desc" },
+        cancelled: { startTime: "desc" },
       };
       const passedBookingsFilter = bookingListingFilters[bookingListingByStatus];
       const orderBy = bookingListingOrderby[bookingListingByStatus];
@@ -281,6 +287,8 @@ const loggedInViewerRouter = createProtectedRouter()
           status: true,
         },
         orderBy,
+        take: take + 1,
+        skip,
       });
 
       const bookings = bookingsQuery.reverse().map((booking) => {
@@ -291,7 +299,18 @@ const loggedInViewerRouter = createProtectedRouter()
         };
       });
 
-      return bookings;
+      let nextCursor: typeof skip | null = skip;
+      if (bookings.length > take) {
+        bookings.shift();
+        nextCursor += bookings.length;
+      } else {
+        nextCursor = null;
+      }
+
+      return {
+        bookings,
+        nextCursor,
+      };
     },
   })
   .query("integrations", {