Log fix (#122)

Add pagination to global log

Author: MeshanKhosla

src/components/activity/ActivityTable.tsx

@@ -10,15 +10,19 @@ interface ActivityTableProps {
   tickets: TicketWithNames[];
   title: string;
   shouldShowCreatedBy: boolean;
+  shouldShowHelpedBy: boolean;
 }
 
 /**
  * Table that displays a list of tickets. This will either be tickets that the user has
  * helped or tickets that the user has created.
  */
 const ActivityTable = (props: ActivityTableProps) => {
-  const { tickets, title, shouldShowCreatedBy } = props;
-  const columns = useMemo(() => getActivityTableColumns(title, shouldShowCreatedBy), [shouldShowCreatedBy, title]);
+  const { tickets, title, shouldShowCreatedBy, shouldShowHelpedBy } = props;
+  const columns = useMemo(
+    () => getActivityTableColumns(title, shouldShowCreatedBy, shouldShowHelpedBy),
+    [shouldShowCreatedBy, shouldShowHelpedBy, title],
+  );
   const data = useMemo(() => addDurationToTickets(tickets), [tickets]);
 
   const {

src/components/activity/ActivityView.tsx

@@ -35,6 +35,7 @@ const ActivityView = (props: ActivityViewProps) => {
             tickets={helpedTickets}
             title={`${helpedTickets.length} helped tickets`}
             shouldShowCreatedBy={true}
+            shouldShowHelpedBy={false}
           />
         </Collapse>
       </Box>
@@ -45,6 +46,7 @@ const ActivityView = (props: ActivityViewProps) => {
             tickets={createdTickets}
             title={`${createdTickets.length} created tickets`}
             shouldShowCreatedBy={false}
+            shouldShowHelpedBy={true}
           />
         </Collapse>
       </Box>

src/components/activity/GlobalLog.tsx

@@ -57,6 +57,12 @@ const GlobalLog = () => {
       <Text fontSize='3xl' fontWeight='semibold' mb={3}>
         Global Log
       </Text>
+      <Text mb={3} display='inherit'>
+        <Link href='/activity/global'>
+          <Text _hover={{ cursor: 'pointer' }} fontStyle='italic'>Click here to view all tickets&nbsp;</Text>
+        </Link>
+        or search for a user&lsquo;s log below
+      </Text>
       <Input id='email' placeholder='Email' onChange={e => setEmail(e.target.value)} />
       <Button mb={2} mt={2} colorScheme='yellow' disabled={!email.match(EMAIL_REGEX)} onClick={handleLookup}>
         Search

src/pages/activity/global.tsx

@@ -1,29 +1,54 @@
-import { Flex, Spinner, Text } from '@chakra-ui/react';
+import { Button, Flex, Spinner, Text } from '@chakra-ui/react';
 import { UserRole } from '@prisma/client';
 import { NextPage } from 'next';
+import { useState } from 'react';
 import ActivityTable from '../../components/activity/ActivityTable';
 import Layout from '../../components/layout/Layout';
+import { TicketWithNames } from '../../server/trpc/router/ticket';
 import { trpc } from '../../utils/trpc';
 
 /** All tickets made */
 const GlobalActivityPage: NextPage = () => {
-  const { data, isLoading } = trpc.ticket.getAllTickets.useQuery(undefined, { refetchOnWindowFocus: false });
+  const [tickets, setTickets] = useState<TicketWithNames[]>([]);
+  const [page, setPage] = useState(1);
+  const { isLoading, refetch } = trpc.ticket.getAllTickets.useQuery(
+    { page },
+    {
+      refetchOnWindowFocus: false,
+      onSuccess: data => {
+        setTickets(old => [...old, ...data]);
+      },
+    },
+  );
+
+  const handleLoadMore = async () => {
+    setPage(old => old + 1);
+    await refetch();
+  };
 
   return (
     <Layout restrictedTo={[UserRole.STAFF]}>
-      <Flex ml={4} mt={4} flexDirection='column'>
+      <Flex ml={4} mr={4} mt={4} flexDirection='column'>
         <Text fontSize='3xl' fontWeight='semibold'>
           Global Activity
         </Text>
-        {isLoading && (
-          <Flex flexDirection='column'>
-            <Text>This will take a second...</Text>
-            <Spinner />
-          </Flex>
-        )}
+        <Text fontSize='lg'>
+          This page shows all tickets made by students and staff. By default, 5 pages are shown. If you&lsquo;d like to
+          load 5 more pages, click the button under the table. Note that a duration of -1 means that the ticket was
+          never taken.
+        </Text>
+        {isLoading && <Spinner />}
         {!isLoading && (
-          <ActivityTable tickets={data ?? []} title={`${data?.length ?? 0} tickets`} shouldShowCreatedBy={true} />
+          <ActivityTable
+            tickets={tickets}
+            title={`${tickets.length} tickets`}
+            shouldShowCreatedBy={true}
+            shouldShowHelpedBy={true}
+          />
         )}
+        <Button mt={2} colorScheme='yellow' onClick={handleLoadMore} disabled={isLoading}>
+          Load more
+        </Button>
       </Flex>
     </Layout>
   );

src/pages/activity/index.tsx

@@ -3,13 +3,12 @@ import { useSession } from 'next-auth/react';
 import dynamic from 'next/dynamic';
 import Layout from '../../components/layout/Layout';
 import { UserRole } from '@prisma/client';
-import { Divider, Text } from '@chakra-ui/react';
+import { Divider } from '@chakra-ui/react';
 
 /**
  * Activity page which displays the activity log
  */
 const ActivityPage: NextPage = () => {
-  //   const ActivityView = dynamic(() => import('../../components/activity/ActivityView'));
   const PersonalLog = dynamic(() => import('../../components/activity/PersonalLog'));
   const StatsView = dynamic(() => import('../../components/activity/StatsView'));
   const GlobalLog = dynamic(() => import('../../components/activity/GlobalLog'));

src/pages/api/trpc/[trpc].ts

@@ -9,7 +9,7 @@ export default createNextApiHandler({
   router: appRouter,
   createContext,
   onError:
-    env.NODE_ENV === 'development'
+    env.NODE_ENV === "development"
       ? ({ path, error }) => {
           console.error(`❌ tRPC failed on ${path}: ${error}`);
         }

src/server/trpc/router/ticket.ts

@@ -695,13 +695,22 @@ export const ticketRouter = router({
     }),
 
   /* For global log */
-  getAllTickets: protectedStaffProcedure.query(async ({ ctx }) => {
-    const tickets = await ctx.prisma.ticket.findMany({
-      orderBy: { createdAt: 'desc' },
-    });
+  getAllTickets: protectedStaffProcedure
+    .input(
+      z.object({
+        page: z.number(),
+      }),
+    )
+    .query(async ({ input, ctx }) => {
+      // With page size = 50
+      const tickets = await ctx.prisma.ticket.findMany({
+        skip: 50 * (input.page - 1),
+        take: 50,
+        orderBy: { createdAt: 'desc' },
+      });
 
-    return convertTicketToTicketWithNames(tickets, ctx);
-  }),
+      return convertTicketToTicketWithNames(tickets, ctx);
+    }),
 
   getTicketsWithUserId: protectedProcedure
     .input(

src/utils/utils.ts

@@ -21,8 +21,8 @@ export const timeDifferenceInMinutes = (first: Date | null, second: Date | null)
   return Math.round(difference / 60000);
 };
 
-export const getActivityTableColumns = (title: string, shouldShowCreatedBy: boolean) => {
-  return [
+export const getActivityTableColumns = (title: string, shouldShowCreatedBy: boolean, shouldShowHelpedBy: boolean) => {
+  const baseTable = [
     {
       Header: title,
       columns: [
@@ -42,15 +42,6 @@ export const getActivityTableColumns = (title: string, shouldShowCreatedBy: bool
           Header: 'Location',
           accessor: 'locationName',
         },
-        shouldShowCreatedBy
-          ? {
-              Header: 'Created by',
-              accessor: 'createdByName',
-            }
-          : {
-              Header: 'Helped by',
-              accessor: 'helpedByName',
-            },
         {
           Header: 'Duration (m)',
           accessor: 'duration',
@@ -62,6 +53,28 @@ export const getActivityTableColumns = (title: string, shouldShowCreatedBy: bool
       ],
     },
   ];
+
+  // This isn't necessary, but it keeps typescript happy
+  if (baseTable[0] === undefined) {
+    throw new Error('baseTable[0] is undefined');
+  }
+
+  // Add createdBy and/or helpedBy columns
+  if (shouldShowCreatedBy) {
+    baseTable[0].columns.splice(4, 0, {
+      Header: 'Created By',
+      accessor: 'createdByName',
+    });
+  }
+
+  if (shouldShowHelpedBy) {
+    baseTable[0].columns.splice(4, 0, {
+      Header: 'Helped By',
+      accessor: 'helpedByName',
+    });
+  }
+
+  return baseTable;
 };
 
 export const addDurationToTickets = (tickets: TicketWithNames[]) => {
@@ -103,20 +116,20 @@ export type ImportUsersMethodPossiblitiesType = 'IMPORT_STAFF' | 'IMPORT_STAFF_A
 
 export const resolveTime = (t: TicketStats) => {
   if (!t.resolvedAt || !t.createdAt) {
-      return 0;
+    return 0;
   }
   return Math.round(((t.resolvedAt.getTime() - t.createdAt.getTime()) / 60000) * 1000) / 1000; // in minutes, 3 decimals
 };
 
 export const helpTime = (t: TicketStats) => {
   if (!t.resolvedAt || !t.helpedAt) {
-      return 0;
+    return 0;
   }
   return Math.round(((t.resolvedAt.getTime() - t.helpedAt.getTime()) / 60000) * 1000) / 1000; // in minutes, 3 decimals
 };
 
 export const computeMean = (data: number[]) => {
-  return data.length > 0 ? Math.round(data.reduce((a, b) => a + b) / data.length * 1000) / 1000 : 0;
+  return data.length > 0 ? Math.round((data.reduce((a, b) => a + b) / data.length) * 1000) / 1000 : 0;
 };
 
 export const computeMedian = (data: number[]) => {