diff --git a/frontend/components/Course/Analytics/Analytics.tsx b/frontend/components/Course/Analytics/Analytics.tsx index 894336a1..0cba7371 100644 --- a/frontend/components/Course/Analytics/Analytics.tsx +++ b/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 ( {queueId ? ( @@ -36,8 +47,14 @@ const Analytics = ({ course, queues }: AnalyticsProps) => { setQueueId(value as number); }} /> - - + {isStaff && ( + + )} + ) : ( diff --git a/frontend/components/Course/Analytics/Heatmaps/Averages.tsx b/frontend/components/Course/Analytics/Heatmaps/Averages.tsx index 056dba9b..99ccb2c0 100644 --- a/frontend/components/Course/Analytics/Heatmaps/Averages.tsx +++ b/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 ( + + ); + } + if (questionsValidating) { + return
Loading...
; + } + return
Error loading data
; + }, + }; +}; + +const StudentWaitTimesPane = ( + waitTimesData: HeatmapSeries[], + waitValidating: boolean +) => { + return { + menuItem: "Student Wait Times", + render: () => { + if (waitTimesData) { + return ( + + ); + } + if (waitValidating) return
Loading...
; + return
Error loading data
; + }, + }; +}; + +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) { { - if (questionsData) { - return ( - - ); - } - if (questionsValidating) { - return
Loading...
; - } - return
Error loading data
; - }, - }, - { - menuItem: "Student Wait Times", - render: () => { - if (waitTimesData) { - return ( - - ); - } - if (waitValidating) return
Loading...
; - return
Error loading data
; - }, - }, + ...(isStaff + ? [ + QuestionsPerInstructorPane( + questionsData || [], + questionsValidating + ), + ] + : []), + StudentWaitTimesPane(waitTimesData || [], waitValidating), ]} />
diff --git a/frontend/components/Course/CourseSidebarNav.tsx b/frontend/components/Course/CourseSidebarNav.tsx index 158a25f5..58c73fe3 100644 --- a/frontend/components/Course/CourseSidebarNav.tsx +++ b/frontend/components/Course/CourseSidebarNav.tsx @@ -71,7 +71,7 @@ const CourseSidebarNav = (props: CourseSidebarProps) => { /> )} - {staff && ( + {!course.archived && ( { - return staffCheck(user, ctx); -}); +export default withAuth(AnalyticsPage);