Stats loading changes

Author: allengu01

src/components/activity/StatsView.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Flex, Grid, GridItem, Input, Spinner, Text } from '@chakra-ui/react';
 import { Select } from 'chakra-react-select';
 import StatsGraph from './StatsGraph';
@@ -93,19 +93,38 @@ const StatsView = () => {
   const [globalStartDate, setGlobalStartDate] = useState<Date>();
   const [personalStartDate, setPersonalStartDate] = useState<Date>();
 
-  const { isLoading: isStatsLoading } = trpc.stats.getTicketStats.useQuery(undefined, {
+  const { isFetching: isFetchingStats, fetchNextPage: fetchNextStatsPage, hasNextPage: statsHasNextPage } = 
+    trpc.stats.getInfiniteTicketStats.useInfiniteQuery({ limit: 10000 }, {
     refetchOnWindowFocus: false,
     onSuccess: data => {
-      setTicketStats(data);
+      setTicketStats(data.pages.map(p => p.items).reduce((a, b) => a.concat(b)));
     },
+    getNextPageParam: (lastPage) => lastPage.nextCursor
   });
-  const { isLoading: isPersonalStatsLoading } = trpc.stats.getTicketStatsHelpedByUser.useQuery(undefined, {
+
+  useEffect(() => {
+    if (statsHasNextPage) {
+      fetchNextStatsPage();
+    }
+  }, [ticketStats])
+
+  const { isFetching: isFetchingPersonalStats, fetchNextPage: fetchNextPersonalStatsPage, hasNextPage: personalStatsHasNextPage } = 
+    trpc.stats.getInfiniteTicketStats.useInfiniteQuery({ limit: 10000 }, {
     refetchOnWindowFocus: false,
     onSuccess: data => {
-      setPersonalTicketStats(data);
+      setPersonalTicketStats(data.pages.map(p => p.items).reduce((a, b) => a.concat(b)));
     },
+    getNextPageParam: (lastPage) => lastPage.nextCursor
   });
 
+  useEffect(() => {
+    if (personalStatsHasNextPage) {
+      fetchNextPersonalStatsPage();
+    }
+  }, [personalTicketStats])
+  
+  const isStatsLoading = isFetchingStats || statsHasNextPage || isFetchingPersonalStats || personalStatsHasNextPage;
+
   const getStartDateFromCurrent = (timeRangeOption: TimeRangeType) => {
     let start = new Date();
     switch (timeRangeOption.type) {
@@ -142,7 +161,6 @@ const StatsView = () => {
     switch (timeRangeOption.type) {
       case 'day':
         end.setDate(start.getDate() + 1);
-        console.log(startDate, start, end);
         return { type: timeRangeOption, startTime: start, endTime: end };
       case 'week':
         end.setDate(start.getDate() + 7);
@@ -194,7 +212,7 @@ const StatsView = () => {
         <StatsGraph timeRange={getTimeRange(globalTimeRangeOption?.value, globalStartDate)} stats={ticketStats} />
       </GridItem>
       <GridItem mt={4} rowSpan={1} colSpan={2}>
-        {isStatsLoading || isPersonalStatsLoading ? (
+        {isStatsLoading ? (
           <Spinner />
         ) : (
           <StatsPanel timeRange={getTimeRange(globalTimeRangeOption?.value, globalStartDate)} stats={ticketStats} />
@@ -234,7 +252,7 @@ const StatsView = () => {
         <StatsGraph timeRange={getTimeRange(personalTimeRangeOption?.value, personalStartDate)} stats={personalTicketStats} />
       </GridItem>
       <GridItem mt={4} rowSpan={1} colSpan={2}>
-        {isStatsLoading || isPersonalStatsLoading ? (
+        {isStatsLoading ? (
           <Spinner />
         ) : (
           <StatsPanel

src/server/trpc/router/stats.ts

@@ -18,6 +18,44 @@ export const statsRouter = router({
       },
     });
   }),
+  getInfiniteTicketStats: publicProcedure
+    .input(z.object({
+      limit: z.number().min(1).max(10000).nullish(),
+      cursor: z.number().nullish(),
+    }))
+    .query(async ({ input, ctx }) => {
+      const limit = input.limit ?? 1000;
+      const { cursor } = input;
+      const items = await ctx.prisma.ticket.findMany({
+        take: limit + 1,
+        select: {
+          id: true,
+          createdAt: true,
+          helpedAt: true,
+          resolvedAt: true,
+          status: true,
+          ticketType: true,
+          description: true,
+          isPublic: true,
+          locationId: true,
+          assignmentId: true,
+        },
+        cursor: cursor ? { id: cursor } : undefined,
+        orderBy: {
+          id: 'asc',
+        },
+      })
+      let nextCursor: typeof cursor | undefined = undefined;
+      if (items.length > limit) {
+        const nextItem = items.pop()
+        nextCursor = nextItem?.id;
+      }
+      return {
+        items,
+        nextCursor,
+      };
+    }
+  ),
   getTicketStatsHelpedByUser: protectedNotStudentProcedure
     .query(async ({ ctx }) => {
       return ctx.prisma.ticket.findMany({
@@ -36,7 +74,49 @@ export const statsRouter = router({
           helpedByUserId: ctx.session?.user?.id
         },
       });
-    }),
+    }
+  ),
+  getInfiniteTicketStatsHelpedByUser: publicProcedure
+    .input(z.object({
+      limit: z.number().min(1).max(10000).nullish(),
+      cursor: z.number().nullish(),
+    }))
+    .query(async ({ input, ctx }) => {
+      const limit = input.limit ?? 1000;
+      const { cursor } = input;
+      const items = await ctx.prisma.ticket.findMany({
+        take: limit + 1,
+        select: {
+          id: true,
+          createdAt: true,
+          helpedAt: true,
+          resolvedAt: true,
+          status: true,
+          ticketType: true,
+          description: true,
+          isPublic: true,
+          locationId: true,
+          assignmentId: true,
+        },
+        where: {
+          helpedByUserId: ctx.session?.user?.id
+        },
+        cursor: cursor ? { id: cursor } : undefined,
+        orderBy: {
+          id: 'asc',
+        },
+      })
+      let nextCursor: typeof cursor | undefined = undefined;
+      if (items.length > limit) {
+        const nextItem = items.pop()
+        nextCursor = nextItem?.id;
+      }
+      return {
+        items,
+        nextCursor,
+      };
+    }
+  ),
 });
 
 export interface TicketStats {