[Improvements] Make office hours wait time analytics available to students

frontend/components/Course/Analytics/Analytics.tsx

@@ -1,9 +1,11 @@
 import Link from "next/link";
-import { useState } from "react";
+import { useContext, useState } from "react";
 import { Segment, Grid, Dropdown } from "semantic-ui-react";
 import { Course, Queue } from "../../../types";
 import Averages from "./Heatmaps/Averages";
 import SummaryCards from "./Cards/SummaryCards";
+import { AuthUserContext } from "../../../context/auth";
+import { useStaff } from "../../../hooks/data-fetching/course";
 
 interface AnalyticsProps {
     course: Course;
@@ -23,6 +25,15 @@ const Analytics = ({ course, queues }: AnalyticsProps) => {
         };
     });
 
+    const { user: initialUser } = useContext(AuthUserContext);
+    if (!initialUser) {
+        throw new Error(
+            "Invariant broken, withAuth must be used with component"
+        );
+    }
+
+    const { staff: isStaff } = useStaff(course.id, initialUser);
+
     return (
         <Grid.Row>
             {queueId ? (
@@ -36,8 +47,14 @@ const Analytics = ({ course, queues }: AnalyticsProps) => {
                             setQueueId(value as number);
                         }}
                     />
-                    <SummaryCards courseId={course.id} queueId={queueId} />
-                    <Averages courseId={course.id} queueId={queueId} />
+                    {isStaff && (
+                        <SummaryCards courseId={course.id} queueId={queueId} />
+                    )}
+                    <Averages
+                        courseId={course.id}
+                        queueId={queueId}
+                        isStaff={isStaff}
+                    />
                 </>
             ) : (
                 <Segment basic>

frontend/components/Course/Analytics/Heatmaps/Averages.tsx

@@ -1,14 +1,63 @@
 import { Tab, Segment, Header } from "semantic-ui-react";
 import { useHeatmapData } from "../../../../hooks/data-fetching/analytics";
-import { Metric } from "../../../../types";
+import { HeatmapSeries, Metric } from "../../../../types";
 import Heatmap from "./Heatmap";
 
 interface AveragesProps {
     courseId: number;
     queueId: number;
+    isStaff: boolean;
 }
 
-export default function Averages({ courseId, queueId }: AveragesProps) {
+const QuestionsPerInstructorPane = (
+    questionsData: HeatmapSeries[],
+    questionsValidating: boolean
+) => {
+    return {
+        menuItem: "Questions per Instructor",
+        render: () => {
+            if (questionsData) {
+                return (
+                    <Heatmap
+                        series={questionsData}
+                        chartTitle="Average Questions per Instructor"
+                    />
+                );
+            }
+            if (questionsValidating) {
+                return <div>Loading...</div>;
+            }
+            return <div>Error loading data</div>;
+        },
+    };
+};
+
+const StudentWaitTimesPane = (
+    waitTimesData: HeatmapSeries[],
+    waitValidating: boolean
+) => {
+    return {
+        menuItem: "Student Wait Times",
+        render: () => {
+            if (waitTimesData) {
+                return (
+                    <Heatmap
+                        series={waitTimesData}
+                        chartTitle="Average Student Wait Times in Minutes"
+                    />
+                );
+            }
+            if (waitValidating) return <div>Loading...</div>;
+            return <div>Error loading data</div>;
+        },
+    };
+};
+
+export default function Averages({
+    courseId,
+    queueId,
+    isStaff,
+}: AveragesProps) {
     const { data: questionsData, isValidating: questionsValidating } =
         useHeatmapData(courseId, queueId, Metric.HEATMAP_QUESTIONS);
     const { data: waitTimesData, isValidating: waitValidating } =
@@ -20,38 +69,15 @@ export default function Averages({ courseId, queueId }: AveragesProps) {
             <Tab
                 menu={{ secondary: true, pointing: true }}
                 panes={[
-                    {
-                        menuItem: "Questions per Instructor",
-                        render: () => {
-                            if (questionsData) {
-                                return (
-                                    <Heatmap
-                                        series={questionsData}
-                                        chartTitle="Average Questions per Instructor"
-                                    />
-                                );
-                            }
-                            if (questionsValidating) {
-                                return <div>Loading...</div>;
-                            }
-                            return <div>Error loading data</div>;
-                        },
-                    },
-                    {
-                        menuItem: "Student Wait Times",
-                        render: () => {
-                            if (waitTimesData) {
-                                return (
-                                    <Heatmap
-                                        series={waitTimesData}
-                                        chartTitle="Average Student Wait Times in Minutes"
-                                    />
-                                );
-                            }
-                            if (waitValidating) return <div>Loading...</div>;
-                            return <div>Error loading data</div>;
-                        },
-                    },
+                    ...(isStaff
+                        ? [
+                              QuestionsPerInstructorPane(
+                                  questionsData || [],
+                                  questionsValidating
+                              ),
+                          ]
+                        : []),
+                    StudentWaitTimesPane(waitTimesData || [], waitValidating),
                 ]}
             />
         </Segment>

frontend/components/Course/CourseSidebarNav.tsx

@@ -71,7 +71,7 @@ const CourseSidebarNav = (props: CourseSidebarProps) => {
                         />
                     </Link>
                 )}
-                {staff && (
+                {!course.archived && (
                     <Link
                         href="/courses/[course]/analytics"
                         as={`/courses/${courseId}/analytics`}

frontend/pages/courses/[course]/analytics.tsx

@@ -3,8 +3,6 @@ import { Grid } from "semantic-ui-react";
 import { NextPageContext } from "next";
 import CourseWrapper from "../../../components/Course/CourseWrapper";
 import { withAuth } from "../../../context/auth";
-import staffCheck from "../../../utils/staffcheck";
-import { withProtectPage } from "../../../utils/protectpage";
 import { doMultipleSuccessRequests } from "../../../utils/fetch";
 import { isLeadershipRole } from "../../../utils/enums";
 import nextRedirect from "../../../utils/redirect";
@@ -69,6 +67,4 @@ AnalyticsPage.getInitialProps = async (
     };
 };
 
-export default withProtectPage(withAuth(AnalyticsPage), (user, ctx) => {
-    return staffCheck(user, ctx);
-});
+export default withAuth(AnalyticsPage);