52 Adding course codes to review & evaluation page (#112)

* Reviewer document title now is course code * Always refresh document title whenever unit code changes * added unit code to title for coordinator page * revert to old dev 2x * import react only once * add review title to review finish page * usepagetitle hook added * added evaluation header to reviews * added course code to evaluation page * remove duplicate header * lint fixes * reverted reviewerbottomnavigation changes * lint fix Co-authored-by: Frinze Erin Lapuz <44391389+frinzekt@users.noreply.github.com>
uwasystemhealth · Sep 5, 2022 · dff7554 · dff7554
1 parent a599972
commit dff7554
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 7 deletions.
diff --git a/frontend/components/Custom/EvaluationHeader.tsx b/frontend/components/Custom/EvaluationHeader.tsx
@@ -0,0 +1,14 @@
+import Container from '@mui/material/Container';
+import CardHeader from '@mui/material/CardHeader';
+
+interface EvaluationHeaderProps {
+  title: string;
+}
+
+const EvaluationHeader = ({ title }: EvaluationHeaderProps) => (
+  <Container sx={{ textAlign: 'center' }}>
+    <CardHeader title={title} />
+  </Container>
+);
+
+export default EvaluationHeader;
diff --git a/frontend/components/hooks/usePageTitle.tsx b/frontend/components/hooks/usePageTitle.tsx
@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+
+const usePageTitle = (title: string) => {
+  useEffect(() => {
+    document.title = title;
+  }, [title]);
+};
+
+export default usePageTitle;
diff --git a/frontend/pages/course-evaluation/[id]/index.tsx b/frontend/pages/course-evaluation/[id]/index.tsx
@@ -1,10 +1,20 @@
 import SectionTabs from '@/components/CourseEvaluation/SectionTabs';
 import BodyCard from '@/components/utils/BodyCard';
+import useCourseEvaluation from '@/components/hooks/useCourseEvaluation';
+import usePageTitle from '@/components/hooks/usePageTitle';
+import EvaluationHeader from '@/components/Custom/EvaluationHeader';
 
-const Post = () => (
-  <BodyCard>
-    <SectionTabs />
-  </BodyCard>
-);
+const Post = () => {
+  const { courseEvaluation } = useCourseEvaluation();
+
+  usePageTitle(`${courseEvaluation.unit_code} Manage`);
+
+  return (
+    <BodyCard>
+      <EvaluationHeader title={courseEvaluation.unit_code} />
+      <SectionTabs />
+    </BodyCard>
+  );
+};
 
 export default Post;
diff --git a/frontend/pages/course-evaluation/[id]/review/[reviewId].tsx b/frontend/pages/course-evaluation/[id]/review/[reviewId].tsx
@@ -7,12 +7,12 @@ import ReviewSummarySubmissionContent from '@/components/Reviewer/Submit/ReviewS
 import { userDisplayName } from '@/components/utils/generic';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
-import CardHeader from '@mui/material/CardHeader';
 import Container from '@mui/material/Container';
 import CardActions from '@mui/material/CardActions';
 import Button from '@mui/material/Button';
 import { useRouter } from 'next/router';
 import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
+import CardHeader from '@mui/material/CardHeader';
 
 const Summary = () => {
   const { courseReview } = useCourseReview(false);

diff --git a/frontend/pages/review/[reviewId]/1-overview-and-eoc.tsx b/frontend/pages/review/[reviewId]/1-overview-and-eoc.tsx
@@ -18,14 +18,17 @@ import EOCAccordionForRefresher from '@/components/Reviewer/OverviewAndEOC/EOCAc
 import ReviewerBottomNavigation from '@/components/Reviewer/ReviewerBottomNavigation';
 import { getReviewStepsWithState } from '@/components/utils/reviews';
 import useAuthenticatedAPIClient from '@/components/hooks/useAuthenticatedAPIClient';
+import usePageTitle from '@/components/hooks/usePageTitle';
+import EvaluationHeader from '@/components/Custom/EvaluationHeader';
 
 const OverviewAndEOC = () => {
   const { courseReview } = useCourseReview();
   const { courseEvaluation } = useCourseEvaluation(courseReview.course_evaluation.id);
 
+  usePageTitle(`${courseEvaluation.unit_code} Review`);
+
   const STEP_INDEX = 0;
   const stepDetails = getReviewStepsWithState(courseReview)[STEP_INDEX];
-
   /**
    * When we finish on this page, there should be an API interaction to update that the user has started the review
    */
@@ -48,6 +51,7 @@ const OverviewAndEOC = () => {
   };
   return (
     <BodyCard>
+      <EvaluationHeader title={courseEvaluation.unit_code} />
       <ReviewProgress review={courseReview} />
       <AboutStepCard stepIndex={0} />
       <Container maxWidth="xl" sx={{ mt: 2, mb: 2 }}>

diff --git a/frontend/pages/review/[reviewId]/2-documents.tsx b/frontend/pages/review/[reviewId]/2-documents.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import Grid from '@mui/material/Grid';
 import Container from '@mui/material/Container';
 import useCourseReview from '@/components/hooks/useCourseReview';
@@ -8,16 +9,21 @@ import BodyCard from '@/components/utils/BodyCard';
 import { getReviewStepsWithState } from '@/components/utils/reviews';
 import DocumentCard from '@/components/CourseEvaluation/Documents/DocumentCard';
 import useCourseEvaluation from '@/components/hooks/useCourseEvaluation';
+import usePageTitle from '@/components/hooks/usePageTitle';
+import EvaluationHeader from '@/components/Custom/EvaluationHeader';
 
 const Documents = () => {
   const { courseReview } = useCourseReview();
   const { courseEvaluation } = useCourseEvaluation(courseReview.course_evaluation.id);
 
+  usePageTitle(`${courseEvaluation.unit_code} Review`);
+
   const STEP_INDEX = 1;
   const stepDetails = getReviewStepsWithState(courseReview)[STEP_INDEX];
 
   return (
     <BodyCard>
+      <EvaluationHeader title={courseEvaluation.unit_code} />
       <ReviewProgress review={courseReview} />
       <AboutStepCard stepIndex={STEP_INDEX} />
       <Container maxWidth="xl" sx={{ mt: 2, mb: 2 }}>

diff --git a/frontend/pages/review/[reviewId]/3-assessment.tsx b/frontend/pages/review/[reviewId]/3-assessment.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import useCourseEvaluation from '@/components/hooks/useCourseEvaluation';
 import useCourseReview from '@/components/hooks/useCourseReview';
 import AboutStepCard from '@/components/Reviewer/AboutStepCard';
@@ -6,6 +7,8 @@ import ReviewProgress from '@/components/Reviewer/ReviewProgress';
 import BodyCard from '@/components/utils/BodyCard';
 import { getReviewStepsWithState } from '@/components/utils/reviews';
 import EOCAccordionWithModal from '@/components/Reviewer/Assessment/EOCAccordionWithModal';
+import usePageTitle from '@/components/hooks/usePageTitle';
+import EvaluationHeader from '@/components/Custom/EvaluationHeader';
 
 const Assessment = () => {
   const { courseReview } = useCourseReview();
@@ -14,8 +17,11 @@ const Assessment = () => {
   const STEP_INDEX = 2;
   const stepDetails = getReviewStepsWithState(courseReview)[STEP_INDEX];
 
+  usePageTitle(`${courseEvaluation.unit_code} Review`);
+
   return (
     <BodyCard>
+      <EvaluationHeader title={courseEvaluation.unit_code} />
       <ReviewProgress review={courseReview} />
       <AboutStepCard stepIndex={STEP_INDEX} />
       <EOCAccordionWithModal courseEvaluation={courseEvaluation} courseReview={courseReview} />

diff --git a/frontend/pages/review/[reviewId]/4-submit.tsx b/frontend/pages/review/[reviewId]/4-submit.tsx
@@ -15,9 +15,14 @@ import useCourseReview from '@/components/hooks/useCourseReview';
 import useCourseEvaluation from '@/components/hooks/useCourseEvaluation';
 import StepWrapper from '@/components/Reviewer/Submit/StepWrapper';
 import ReviewSummarySubmissionContent from '@/components/Reviewer/Submit/ReviewSummarySubmissionContent';
+import usePageTitle from '@/components/hooks/usePageTitle';
+import EvaluationHeader from '@/components/Custom/EvaluationHeader';
 
 const Submit = () => {
   const { courseReview } = useCourseReview();
+
+  usePageTitle(`${courseReview.course_evaluation.unit_code} Review`);
+
   const { courseEvaluation } = useCourseEvaluation(courseReview.course_evaluation.id);
 
   const STEP_INDEX = 3;
@@ -75,6 +80,7 @@ const Submit = () => {
 
   return (
     <BodyCard>
+      <EvaluationHeader title={courseEvaluation.unit_code} />
       <ReviewProgress review={courseReview} />
       <AboutStepCard stepIndex={STEP_INDEX} />
       <ReviewSummarySubmissionContent

diff --git a/frontend/pages/review/[reviewId]/5-finish.tsx b/frontend/pages/review/[reviewId]/5-finish.tsx
@@ -5,15 +5,20 @@ import useCourseReview from '@/components/hooks/useCourseReview';
 import useCourseEvaluation from '@/components/hooks/useCourseEvaluation';
 import ReviewSummarySubmissionContent from '@/components/Reviewer/Submit/ReviewSummarySubmissionContent';
 import AboutStepCard from '@/components/Reviewer/AboutStepCard';
+import usePageTitle from '@/components/hooks/usePageTitle';
+import EvaluationHeader from '@/components/Custom/EvaluationHeader';
 
 const Finish = () => {
   const { courseReview } = useCourseReview(false);
   const { courseEvaluation } = useCourseEvaluation(courseReview.course_evaluation.id);
 
+  usePageTitle(`${courseEvaluation.unit_code} Review`);
+
   const allSteps = getReviewStepsWithState(courseReview);
 
   return (
     <BodyCard>
+      <EvaluationHeader title={courseEvaluation.unit_code} />
       <AboutStepCard
         title="5 - Finish"
         subheader="You have completed submission for this review. See below for your review. If there is something wrong here, please contact the coordinator of this course evaluation"