Meshan's suggestions

Author: allengu01

src/components/activity/StatsGraph.tsx

@@ -145,7 +145,7 @@ const StatsGraph = (props: StatsGraphProps) => {
                     <Legend verticalAlign="top" height={36}/>
                     <XAxis dataKey="name" />
                     <YAxis />
-                    <Tooltip />
+                    <Tooltip labelStyle={{ color: "#454545" }}/>
                     { getGraphLines() }
                 </LineChart>
             </ResponsiveContainer>

src/components/activity/StatsView.tsx

@@ -84,9 +84,6 @@ const timeRangeOptions: { label: string, value: TimeRangeType }[] = [{
 }];
 
 const StatsView = () => {
-    const { data: session } = useSession();
-    const userRole = session?.user?.role!;
-    const userId = session?.user?.id!;
     const [ticketStats, setTicketStats] = useState<TicketStats[]>([]);
     const [personalTicketStats, setPersonalTicketStats] = useState<TicketStats[]>([]);
     const [globalTimeRangeOption, setGlobalTimeRangeOption] = useState(timeRangeOptions[0]);
@@ -98,7 +95,7 @@ const StatsView = () => {
             setTicketStats(data);
         }
     });
-    const { isLoading: isPersonalStatsLoading } = trpc.stats.getTicketStatsHelpedByUser.useQuery({ userId: userId }, {
+    const { isLoading: isPersonalStatsLoading } = trpc.stats.getTicketStatsHelpedByUser.useQuery(undefined, {
         refetchOnWindowFocus: false,
         onSuccess: data => {
             setPersonalTicketStats(data);

src/pages/activity/index.tsx

@@ -1,17 +1,22 @@
 import { NextPage } from 'next';
+import { useSession } from 'next-auth/react';
 import dynamic from 'next/dynamic';
 import Layout from '../../components/layout/Layout';
+import { UserRole } from '@prisma/client';
 
 /**
  * Activity page which displays the activity log
  */
 const ActivityPage: NextPage = () => {
   const ActivityView = dynamic(() => import('../../components/activity/ActivityView'));
-  const StatsView = dynamic(() => import('../../components/activity/StatsView'))
+  const StatsView = dynamic(() => import('../../components/activity/StatsView'));
+
+  const { data: session } = useSession();
+
   return (
     <Layout>
       <ActivityView />
-      <StatsView />
+      { session?.user?.role === UserRole.STAFF && <StatsView /> }
     </Layout>
   );
 };

src/server/trpc/router/stats.ts

@@ -1,4 +1,4 @@
-import { router, publicProcedure } from '../trpc';
+import { router, publicProcedure, protectedNotStudentProcedure } from '../trpc';
 import { TicketStatus, TicketType } from '@prisma/client';
 import { z } from 'zod';
 
@@ -18,28 +18,25 @@ export const statsRouter = router({
       },
     });
   }),
-  getTicketStatsHelpedByUser: publicProcedure
-    .input(z.object({ 
-      userId: z.string() 
-    }))
-    .query(async ({ input, ctx }) => {
-    return ctx.prisma.ticket.findMany({
-      select: {
-        createdAt: true,
-        helpedAt: true,
-        resolvedAt: true,
-        status: true,
-        ticketType: true,
-        description: true,
-        isPublic: true,
-        locationId: true,
-		    assignmentId: true,
-      },
-      where: {
-        helpedByUserId: input.userId
-      },
-    });
-  }),
+  getTicketStatsHelpedByUser: protectedNotStudentProcedure
+    .query(async ({ ctx }) => {
+      return ctx.prisma.ticket.findMany({
+        select: {
+          createdAt: true,
+          helpedAt: true,
+          resolvedAt: true,
+          status: true,
+          ticketType: true,
+          description: true,
+          isPublic: true,
+          locationId: true,
+          assignmentId: true,
+        },
+        where: {
+          helpedByUserId: ctx.session?.user?.id
+        },
+      });
+    }),
 });
 
 export interface TicketStats {