19 Coordinator View for Specific Reviewer

frontend/components/CourseEvaluation/Reviews/ReviewCard.tsx

@@ -13,6 +13,7 @@ import { userDisplayName } from '@/components/utils/generic';
 import ReviewProgress from '@/components/Reviewer/ReviewProgress';
 import AreYouSureModalButton from '@/components/utils/AreYouSureModalButton';
 import useAuthenticatedAPIClient from '@/components/hooks/useAuthenticatedAPIClient';
+import { useRouter } from 'next/router';
 
 type Props = {
   review: ReviewListEntry;
@@ -23,6 +24,7 @@ const ReviewCard = (props: Props) => {
 
   const axios = useAuthenticatedAPIClient();
   const { mutate } = useSWRConfig();
+  const router = useRouter();
 
   const handleDelete = async () => {
     try {
@@ -43,8 +45,16 @@ const ReviewCard = (props: Props) => {
               {userDisplayName(review.reviewer)}
             </Typography>
             <Box sx={{ display: 'flex', gap: 2 }}>
-              {/* TODO: #19 (part 1) */}
-              <Button startIcon={<VisibilityIcon />} variant="outlined" color="primary" disabled>
+              <Button
+                startIcon={<VisibilityIcon />}
+                variant="outlined"
+                color="primary"
+                onClick={() => {
+                  router.push(
+                    `/course-evaluation/${review.course_evaluation.id}/review/${review.id}`,
+                  );
+                }}
+              >
                 View
               </Button>
               <AreYouSureModalButton

frontend/pages/course-evaluation/[id]/review/[reviewId].tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { getReviewStepsWithState } from '@/components/utils/reviews';
+import BodyCard from '@/components/utils/BodyCard';
+import useCourseReview from '@/components/hooks/useCourseReview';
+import useCourseEvaluation from '@/components/hooks/useCourseEvaluation';
+import ReviewSummarySubmissionContent from '@/components/Reviewer/Submit/ReviewSummarySubmissionContent';
+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';
+
+const Summary = () => {
+  const { courseReview } = useCourseReview(false);
+  const { courseEvaluation } = useCourseEvaluation();
+  const router = useRouter();
+
+  const allSteps = getReviewStepsWithState(courseReview);
+
+  return (
+    <BodyCard>
+      <Container maxWidth="xl" sx={{ mt: 2, mb: 2 }}>
+        <Button
+          startIcon={<NavigateBeforeIcon />}
+          onClick={() => {
+            router.push(`/course-evaluation/${courseEvaluation.id}`);
+          }}
+        >
+          Back to Course Evaluation
+        </Button>
+        <Card>
+          <CardHeader title={`Review by: ${userDisplayName(courseReview.reviewer)}`} />
+          <CardContent> Below is the summary of what the reviewer has put in.</CardContent>
+          <CardActions />
+        </Card>
+      </Container>
+      <ReviewSummarySubmissionContent
+        allSteps={allSteps}
+        courseReview={courseReview}
+        courseEvaluation={courseEvaluation}
+        isReadOnly
+      />
+    </BodyCard>
+  );
+};
+
+export default Summary;