ENCOA-222 & ENCOA-223

ENCOA-222: Added an option for non-assignment exams to view the
transcript of a Listening audio;

ENCOA-223: Updated the Listening exam to show all of the
exercises/questions of each part on a single page;

src/components/High/AssignmentCard.tsx

@@ -6,6 +6,7 @@ import { sortByModuleName } from "@/utils/moduleUtils";
 import clsx from "clsx";
 import moment from "moment";
 import { useRouter } from "next/router";
+import { useMemo } from "react";
 import Button from "../Low/Button";
 import ModuleBadge from "../ModuleBadge";
 
@@ -20,6 +21,8 @@ interface Props {
 export default function AssignmentCard({ user, assignment, session, startAssignment, resumeAssignment }: Props) {
 	const router = useRouter()
 
+	const hasBeenSubmitted = useMemo(() => assignment.results.map((r) => r.user).includes(user.id), [assignment.results, user.id])
+
 	return (
 		<div
 			className={clsx(
@@ -45,7 +48,7 @@ export default function AssignmentCard({ user, assignment, session, startAssignm
 							<ModuleBadge className="scale-110 w-full" key={module} module={module} />
 						))}
 				</div>
-				{futureAssignmentFilter(assignment) && (
+				{futureAssignmentFilter(assignment) && !hasBeenSubmitted && (
 					<Button
 						color="rose"
 						className="-md:hidden h-full w-full max-w-[50%] !rounded-xl"
@@ -54,7 +57,7 @@ export default function AssignmentCard({ user, assignment, session, startAssignm
 						Not yet started
 					</Button>
 				)}
-				{activeAssignmentFilter(assignment) && !assignment.results.map((r) => r.user).includes(user.id) && (
+				{activeAssignmentFilter(assignment) && !hasBeenSubmitted && (
 					<>
 						<div
 							className="tooltip flex h-full w-full items-center justify-end pl-8 md:hidden"
@@ -94,7 +97,7 @@ export default function AssignmentCard({ user, assignment, session, startAssignm
 						)}
 					</>
 				)}
-				{assignment.results.map((r) => r.user).includes(user.id) && (
+				{hasBeenSubmitted && (
 					<Button
 						color="green"
 						className="-md:hidden h-full w-full max-w-[50%] !rounded-xl"