Navigation rework, added prompt edit to components that were missing

src/pages/(exam)/ExamPage.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
 import { Module } from "@/interfaces";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import AbandonPopup from "@/components/AbandonPopup";
 import Layout from "@/components/High/Layout";
@@ -11,9 +11,8 @@ import Reading from "@/exams/Reading";
 import Selection from "@/exams/Selection";
 import Speaking from "@/exams/Speaking";
 import Writing from "@/exams/Writing";
-import { Exam, LevelExam, UserSolution, Variant } from "@/interfaces/exam";
+import { Exam, ExerciseOnlyExam, LevelExam, PartExam, UserSolution, Variant } from "@/interfaces/exam";
 import { Stat, User } from "@/interfaces/user";
-import useExamStore from "@/stores/examStore";
 import { evaluateSpeakingAnswer, evaluateWritingAnswer } from "@/utils/evaluation";
 import { defaultExamUserSolutions, getExam } from "@/utils/exams";
 import axios from "axios";
@@ -21,6 +20,8 @@ import { useRouter } from "next/router";
 import { toast, ToastContainer } from "react-toastify";
 import { v4 as uuidv4 } from "uuid";
 import ShortUniqueId from "short-unique-id";
+import { ExamProps } from "@/exams/types";
+import useExamStore from "@/stores/exam";
 
 interface Props {
 	page: "exams" | "exercises";
@@ -29,198 +30,64 @@ interface Props {
 	hideSidebar?: boolean
 }
 
-export default function ExamPage({ page, user, destination = "/exam", hideSidebar = false }: Props) {
+const ExamPage: React.FC<Props> = ({ page, user, destination = "/exam", hideSidebar = false }) => {
+	const router = useRouter();
+
 	const [variant, setVariant] = useState<Variant>("full");
 	const [avoidRepeated, setAvoidRepeated] = useState(false);
 	const [hasBeenUploaded, setHasBeenUploaded] = useState(false);
 	const [showAbandonPopup, setShowAbandonPopup] = useState(false);
 	const [isEvaluationLoading, setIsEvaluationLoading] = useState(false);
 	const [statsAwaitingEvaluation, setStatsAwaitingEvaluation] = useState<string[]>([]);
-	const [inactivityTimer, setInactivityTimer] = useState(0);
-	const [totalInactivity, setTotalInactivity] = useState(0);
-	const [timeSpent, setTimeSpent] = useState(0);
 
-	const resetStore = useExamStore((state) => state.reset);
-	const assignment = useExamStore((state) => state.assignment);
-	const initialTimeSpent = useExamStore((state) => state.timeSpent);
+	const {
+		exam, setExam,
+		exams,
+		sessionId, setSessionId, setPartIndex,
+		moduleIndex, setModuleIndex,
+		setQuestionIndex, setExerciseIndex,
+		userSolutions, setUserSolutions,
+		showSolutions, setShowSolutions,
+		selectedModules, setSelectedModules,
+		setUser,
+		inactivity,
+		timeSpent,
+		assignment,
+		bgColor,
+		flags,
+		dispatch,
+		reset: resetStore,
+		saveStats,
+		saveSession,
+		setFlags,
+		setShuffles
+	} = useExamStore();
 
-	const { exam, setExam } = useExamStore((state) => state);
-	const { exams, setExams } = useExamStore((state) => state);
-	const { sessionId, setSessionId } = useExamStore((state) => state);
-	const { partIndex, setPartIndex } = useExamStore((state) => state);
-	const { moduleIndex, setModuleIndex } = useExamStore((state) => state);
-	const { questionIndex, setQuestionIndex } = useExamStore((state) => state);
-	const { exerciseIndex, setExerciseIndex } = useExamStore((state) => state);
-	const { userSolutions, setUserSolutions } = useExamStore((state) => state);
-	const { showSolutions, setShowSolutions } = useExamStore((state) => state);
-	const { selectedModules, setSelectedModules } = useExamStore((state) => state);
-	const { inactivity, setInactivity } = useExamStore((state) => state);
-	const { bgColor, setBgColor } = useExamStore((state) => state);
-	const setShuffleMaps = useExamStore((state) => state.setShuffles);
+	const { finalizeModule, finalizeExam } = flags;
 
-	const router = useRouter();
-
-	// eslint-disable-next-line react-hooks/exhaustive-deps
-	const resetInactivityTimer = () => {
-		setInactivityTimer((prev) => {
-			if (moduleIndex >= selectedModules.length || moduleIndex === -1) return 0;
-			if (prev >= 120) setTotalInactivity((totalPrev) => totalPrev + prev);
-			return 0;
-		});
-	};
-
-	const reset = () => {
-		resetStore();
-		setVariant("full");
-		setAvoidRepeated(false);
-		setHasBeenUploaded(false);
-		setShowAbandonPopup(false);
-		setIsEvaluationLoading(false);
-		setStatsAwaitingEvaluation([]);
-		setTimeSpent(0);
-		setInactivity(0);
-
-		document.removeEventListener("keydown", resetInactivityTimer);
-		document.removeEventListener("mousemove", resetInactivityTimer);
-		document.removeEventListener("mousedown", resetInactivityTimer);
-	};
+	const [isFetchingExams, setIsFetchingExams] = useState(false);
+	const [isExamLoaded, setIsExamLoaded] = useState(moduleIndex < selectedModules.length);
 
 	useEffect(() => {
-		if (moduleIndex >= selectedModules.length || moduleIndex === -1 || showSolutions) {
-			document.removeEventListener("keydown", resetInactivityTimer);
-			document.removeEventListener("mousemove", resetInactivityTimer);
-			document.removeEventListener("mousedown", resetInactivityTimer);
-		}
-	}, [moduleIndex, resetInactivityTimer, selectedModules.length, showSolutions]);
-
-	// eslint-disable-next-line react-hooks/exhaustive-deps
-	const saveSession = async () => {
-		console.log("Saving your session...");
-
-		await axios.post("/api/sessions", {
-			id: sessionId,
-			sessionId,
-			date: new Date().toISOString(),
-			userSolutions,
-			moduleIndex,
-			selectedModules,
-			assignment,
-			timeSpent,
-			inactivity: totalInactivity,
-			exams,
-			exam,
-			partIndex,
-			exerciseIndex,
-			questionIndex,
-			user: user?.id,
-		});
-	};
-
-	useEffect(() => setTimeSpent(initialTimeSpent), [initialTimeSpent]);
-	useEffect(() => setTotalInactivity(inactivity), [inactivity]);
+		setIsExamLoaded(moduleIndex < selectedModules.length);
+	}, [showSolutions, moduleIndex, selectedModules]);
 
 	useEffect(() => {
-		if (userSolutions.length === 0 && exams.length > 0) {
-			const defaultSolutions = exams.map(defaultExamUserSolutions).flat();
-			setUserSolutions(defaultSolutions);
-		}
-	}, [exams, setUserSolutions, userSolutions]);
-
-	useEffect(() => {
-		if (
-			sessionId.length > 0 &&
-			userSolutions.length > 0 &&
-			selectedModules.length > 0 &&
-			exams.length > 0 &&
-			!!exam &&
-			timeSpent > 0 &&
-			!showSolutions &&
-			moduleIndex < selectedModules.length &&
-			selectedModules[moduleIndex] !== "speaking"
-		)
-			saveSession();
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [assignment, exam, exams, moduleIndex, selectedModules, sessionId, userSolutions, user, exerciseIndex, partIndex, questionIndex]);
-
-	useEffect(() => {
-		if (
-			timeSpent % 20 === 0 &&
-			timeSpent > 0 &&
-			moduleIndex < selectedModules.length &&
-			selectedModules[moduleIndex] !== "speaking" &&
-			!showSolutions
-		)
-			saveSession();
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [timeSpent]);
-
-	useEffect(() => {
-		if (selectedModules.length > 0 && sessionId.length === 0) {
+		if (!showSolutions && sessionId.length === 0 && user?.id) {
 			const shortUID = new ShortUniqueId();
+			setUser(user.id);
 			setSessionId(shortUID.randomUUID(8));
 		}
-	}, [setSessionId, selectedModules, sessionId]);
+	}, [setSessionId, isExamLoaded, sessionId, showSolutions, setUser, user?.id]);
 
 	useEffect(() => {
 		if (user?.type === "developer") console.log(exam);
 	}, [exam, user]);
 
-	useEffect(() => {
-		if (selectedModules.length > 0 && timeSpent === 0 && !showSolutions) {
-			const timerInterval = setInterval(() => {
-				setTimeSpent((prev) => prev + 1);
-			}, 1000);
-
-			return () => {
-				clearInterval(timerInterval);
-			};
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [selectedModules.length]);
-
-	useEffect(() => {
-		if (selectedModules.length > 0 && !showSolutions && inactivityTimer === 0) {
-			const inactivityInterval = setInterval(() => {
-				setInactivityTimer((prev) => prev + 1);
-			}, 1000);
-
-			return () => {
-				clearInterval(inactivityInterval);
-			};
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [selectedModules.length]);
-
-	useEffect(() => {
-		document.addEventListener("keydown", resetInactivityTimer);
-		document.addEventListener("mousemove", resetInactivityTimer);
-		document.addEventListener("mousedown", resetInactivityTimer);
-
-		return () => {
-			document.removeEventListener("keydown", resetInactivityTimer);
-			document.removeEventListener("mousemove", resetInactivityTimer);
-			document.removeEventListener("mousedown", resetInactivityTimer);
-		};
-	});
-
-	useEffect(() => {
-		if (showSolutions) setModuleIndex(-1);
-	}, [setModuleIndex, showSolutions]);
-
-	useEffect(() => {
-		if (selectedModules.length > 0 && exams.length > 0 && moduleIndex < selectedModules.length) {
-			const nextExam = exams[moduleIndex];
-
-			if (partIndex === -1 && nextExam?.module !== "listening") setPartIndex(0);
-			if (exerciseIndex === -1 && !["reading", "listening"].includes(nextExam?.module)) setExerciseIndex(0);
-			setExam(nextExam ? updateExamWithUserSolutions(nextExam) : undefined);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [selectedModules, moduleIndex, exams]);
-
 	useEffect(() => {
 		(async () => {
 			if (selectedModules.length > 0 && exams.length === 0) {
+				setIsFetchingExams(true);
 				const examPromises = selectedModules.map((module) =>
 					getExam(
 						module,
@@ -230,8 +97,9 @@ export default function ExamPage({ page, user, destination = "/exam", hideSideba
 					),
 				);
 				Promise.all(examPromises).then((values) => {
+					setIsFetchingExams(false);
 					if (values.every((x) => !!x)) {
-						setExams(values.map((x) => x!));
+						dispatch({ type: 'INIT_EXAM', payload: { exams: values.map((x) => x!), modules: selectedModules } })
 					} else {
 						toast.error("Something went wrong, please try again");
 						setTimeout(router.reload, 500);
@@ -240,100 +108,61 @@ export default function ExamPage({ page, user, destination = "/exam", hideSideba
 			}
 		})();
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [selectedModules, setExams, exams]);
+	}, [selectedModules, exams]);
 
-	useEffect(() => {
-		if (selectedModules.length > 0 && exams.length !== 0 && moduleIndex >= selectedModules.length && !hasBeenUploaded && !showSolutions) {
-			const newStats: Stat[] = userSolutions.map((solution) => ({
-				...solution,
-				id: solution.id || uuidv4(),
-				timeSpent,
-				inactivity: totalInactivity,
-				session: sessionId,
-				exam: solution.exam!,
-				module: solution.module!,
-				user: user?.id || "",
-				date: new Date().getTime(),
-				isDisabled: solution.isDisabled,
-				shuffleMaps: solution.shuffleMaps,
-				...(assignment ? { assignment: assignment.id } : {}),
-				isPractice: solution.isPractice
-			}));
 
-			axios
-				.post<{ ok: boolean }>("/api/stats", newStats)
-				.then((response) => setHasBeenUploaded(response.data.ok))
-				.catch(() => setHasBeenUploaded(false));
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [selectedModules, moduleIndex, hasBeenUploaded]);
-
-	useEffect(() => {
-		setIsEvaluationLoading(statsAwaitingEvaluation.length !== 0);
-	}, [statsAwaitingEvaluation]);
-
-	useEffect(() => {
-		if (statsAwaitingEvaluation.length > 0) checkIfStatsHaveBeenEvaluated(statsAwaitingEvaluation);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [statsAwaitingEvaluation]);
-
-	useEffect(() => {
-		if (exam && exam.module === "level" && !showSolutions) setBgColor("bg-ielts-level-light");
-	}, [exam, showSolutions, setBgColor]);
-
-	const checkIfStatsHaveBeenEvaluated = (ids: string[]) => {
-		setTimeout(async () => {
-			try {
-				const awaitedStats = await Promise.all(ids.map(async (id) => (await axios.get<Stat>(`/api/stats/${id}`)).data));
-				const solutionsEvaluated = awaitedStats.every((stat) => stat.solutions.every((x) => x.evaluation !== null));
-				if (solutionsEvaluated) {
-					const statsUserSolutions: UserSolution[] = awaitedStats.map((stat) => ({
-						id: stat.id,
-						exercise: stat.exercise,
-						score: stat.score,
-						solutions: stat.solutions,
-						type: stat.type,
-						exam: stat.exam,
-						module: stat.module,
-					}));
-
-					const updatedUserSolutions = userSolutions.map((x) => {
-						const respectiveSolution = statsUserSolutions.find((y) => y.exercise === x.exercise);
-						return respectiveSolution ? respectiveSolution : x;
-					});
-
-					setUserSolutions(updatedUserSolutions);
-					return setStatsAwaitingEvaluation((prev) => prev.filter((x) => !ids.includes(x)));
-				}
-
-				return checkIfStatsHaveBeenEvaluated(ids);
-			} catch {
-				return checkIfStatsHaveBeenEvaluated(ids);
-			}
-		}, 5 * 1000);
+	const reset = () => {
+		resetStore();
+		setVariant("full");
+		setAvoidRepeated(false);
+		setHasBeenUploaded(false);
+		setShowAbandonPopup(false);
+		setIsEvaluationLoading(false);
+		setStatsAwaitingEvaluation([]);
 	};
 
-	const updateExamWithUserSolutions = (exam: Exam): Exam => {
-		if (exam.module === "reading" || exam.module === "listening" || exam.module === "level") {
-			const parts = exam.parts.map((p) =>
-				Object.assign(p, {
-					exercises: p.exercises.map((x) =>
-						Object.assign(x, {
-							userSolutions: userSolutions.find((y) => x.id === y.exercise)?.solutions,
-						}),
-					),
-				}),
-			);
-			return Object.assign(exam, { parts });
-		}
+	useEffect(() => {
+		if (finalizeModule && !showSolutions) {
+			/*if (exam && (exam.module === "writing" || exam.module === "speaking") && userSolutions.length > 0 && !showSolutions) {
+				setIsEvaluationLoading(true);
+				(async () => {
+					const responses: UserSolution[] = (
+						await Promise.all(
+							exam.exercises.map(async (exercise, index) => {
+								const evaluationID = uuidv4();
+								if (exercise.type === "writing")
+									return await evaluateWritingAnswer(exercise, index + 1, userSolutions.find((x) => x.exercise === exercise.id)!, evaluationID);
 
-		const exercises = exam.exercises.map((x) =>
-			Object.assign(x, {
-				userSolutions: userSolutions.find((y) => x.id === y.exercise)?.solutions,
-			}),
-		);
-		return Object.assign(exam, { exercises });
-	};
+								if (exercise.type === "interactiveSpeaking" || exercise.type === "speaking")
+									return await evaluateSpeakingAnswer(
+										exercise,
+										userSolutions.find((x) => x.exercise === exercise.id)!,
+										evaluationID,
+										index + 1,
+									);
+							}),
+						)
+					).filter((x) => !!x) as UserSolution[];
+				})();
+			}*/
+		}
+	}, [exam, finalizeModule, showSolutions, userSolutions]);
+
+	/*useEffect(() => {
+		// poll backend and setIsEvaluationLoading to false
+
+	}, []);*/
+
+	useEffect(() => {
+		if (finalizeExam && !isEvaluationLoading) {
+			(async () => {
+				axios.get("/api/stats/update");
+				await saveStats();
+				setModuleIndex(-1);
+				setFlags({ finalizeExam: false });
+			})();
+		}
+	}, [finalizeExam, saveStats, setFlags, setModuleIndex, isEvaluationLoading]);
 
 	const onFinish = async (solutions: UserSolution[]) => {
 		const solutionIds = solutions.map((x) => x.exercise);
@@ -375,8 +204,8 @@ export default function ExamPage({ page, user, destination = "/exam", hideSideba
 		setUserSolutions([...userSolutions.filter((x) => !solutionIds.includes(x.exercise)), ...newSolutions]);
 		setModuleIndex(moduleIndex + 1);
 
-		setPartIndex(-1);
-		setExerciseIndex(-1);
+		setPartIndex(0);
+		setExerciseIndex(0);
 		setQuestionIndex(0);
 	};
 
@@ -432,82 +261,19 @@ export default function ExamPage({ page, user, destination = "/exam", hideSideba
 			.map((x) => ({ module: x as Module, ...scores[x as Module] }));
 	};
 
-	const renderScreen = () => {
-		if (selectedModules.length === 0) {
-			return (
-				<Selection
-					page={page}
-					user={user!}
-					onStart={(modules: Module[], avoid: boolean, variant: Variant) => {
-						setModuleIndex(0);
-						setAvoidRepeated(avoid);
-						setSelectedModules(modules);
-						setVariant(variant);
-					}}
-				/>
-			);
-		}
+	const ModuleExamMap: Record<Module, React.ComponentType<ExamProps<Exam>>> = {
+		"reading": Reading as React.ComponentType<ExamProps<Exam>>,
+		"listening": Listening as React.ComponentType<ExamProps<Exam>>,
+		"writing": Writing as React.ComponentType<ExamProps<Exam>>,
+		"speaking": Speaking as React.ComponentType<ExamProps<Exam>>,
+		"level": Level as React.ComponentType<ExamProps<Exam>>,
+	}
 
-		if (moduleIndex >= selectedModules.length || moduleIndex === -1) {
-			return (
-				<Finish
-					isLoading={isEvaluationLoading}
-					user={user!}
-					modules={selectedModules}
-					solutions={userSolutions}
-					assignment={assignment}
-					information={{
-						timeSpent,
-						inactivity: totalInactivity,
-					}}
-					destination={destination}
-					onViewResults={(index?: number) => {
-						if (exams[0].module === "level") {
-							const levelExam = exams[0] as LevelExam;
-							const allExercises = levelExam.parts.flatMap((part) => part.exercises);
-							const exerciseOrderMap = new Map(allExercises.map((ex, index) => [ex.id, index]));
-							const orderedSolutions = userSolutions.slice().sort((a, b) => {
-								const indexA = exerciseOrderMap.get(a.exercise) ?? Infinity;
-								const indexB = exerciseOrderMap.get(b.exercise) ?? Infinity;
-								return indexA - indexB;
-							});
-							setUserSolutions(orderedSolutions);
-						} else {
-							setUserSolutions(userSolutions);
-						}
-						setShuffleMaps([]);
-						setShowSolutions(true);
-						setModuleIndex(index || 0);
-						setExerciseIndex(["reading", "listening"].includes(exams[0].module) ? -1 : 0);
-						setPartIndex(exams[0].module === "listening" ? -1 : 0);
-						setExam(exams[0]);
-					}}
-					scores={aggregateScoresByModule()}
-				/>
-			);
-		}
+	const CurrentExam = exam?.module ? ModuleExamMap[exam.module] : undefined;
 
-		if (exam && exam.module === "reading") {
-			return <Reading exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
-		}
-
-		if (exam && exam.module === "listening") {
-			return <Listening exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
-		}
-
-		if (exam && exam.module === "writing") {
-			return <Writing exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
-		}
-
-		if (exam && exam.module === "speaking") {
-			return <Speaking exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
-		}
-
-		if (exam && exam.module === "level") {
-			return <Level exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
-		}
-
-		return <>Loading...</>;
+	const onAbandon = async () => {
+		await saveSession();
+		reset();
 	};
 
 	return (
@@ -522,18 +288,79 @@ export default function ExamPage({ page, user, destination = "/exam", hideSideba
 					focusMode={selectedModules.length !== 0 && !showSolutions && moduleIndex < selectedModules.length}
 					onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}>
 					<>
-						{renderScreen()}
-						{!showSolutions && moduleIndex < selectedModules.length && (
-							<AbandonPopup
-								isOpen={showAbandonPopup}
-								abandonPopupTitle="Leave Exercise"
-								abandonPopupDescription="Are you sure you want to leave the exercise? Your progress will be saved and this exam can be resumed on the Dashboard."
-								abandonConfirmButtonText="Confirm"
-								onAbandon={() => {
-									reset();
+						{/* Modules weren't yet set by an INIT_EXAM or INIT_SOLUTIONS dispatch, show Selection component*/}
+						{selectedModules.length === 0 && <Selection
+							page={page}
+							user={user!}
+							onStart={(modules: Module[], avoid: boolean, variant: Variant) => {
+								setModuleIndex(0);
+								setAvoidRepeated(avoid);
+								setSelectedModules(modules);
+								setVariant(variant);
+							}}
+						/>}
+						{isFetchingExams && (
+							<div className="flex flex-grow flex-col items-center justify-center animate-pulse">
+								<span className={`loading loading-infinity w-32 bg-ielts-${selectedModules[0]}`} />
+								<span className={`font-bold text-2xl text-ielts-${selectedModules[0]}`}>Loading Exam ...</span>
+							</div>
+						)}
+						{(moduleIndex === -1 && selectedModules.length !== 0) &&
+							<Finish
+								isLoading={isEvaluationLoading}
+								user={user!}
+								modules={selectedModules}
+								solutions={userSolutions}
+								assignment={assignment}
+								information={{
+									timeSpent,
+									inactivity,
 								}}
-								onCancel={() => setShowAbandonPopup(false)}
-							/>
+								destination={destination}
+								onViewResults={(index?: number) => {
+									if (exams[0].module === "level") {
+										const levelExam = exams[0] as LevelExam;
+										const allExercises = levelExam.parts.flatMap((part) => part.exercises);
+										const exerciseOrderMap = new Map(allExercises.map((ex, index) => [ex.id, index]));
+										const orderedSolutions = userSolutions.slice().sort((a, b) => {
+											const indexA = exerciseOrderMap.get(a.exercise) ?? Infinity;
+											const indexB = exerciseOrderMap.get(b.exercise) ?? Infinity;
+											return indexA - indexB;
+										});
+										setUserSolutions(orderedSolutions);
+									} else {
+										setUserSolutions(userSolutions);
+									}
+									setShuffles([]);
+									if (index === undefined) {
+										setFlags({ reviewAll: true });
+										setModuleIndex(0);
+										setExam(exams[0]);
+									} else {
+										setModuleIndex(index);
+										setExam(exams[index]);
+									}
+									setShowSolutions(true);
+									setQuestionIndex(0);
+									setExerciseIndex(0);
+									setPartIndex(0);
+								}}
+								scores={aggregateScoresByModule()}
+							/>}
+						{/* Exam is on going, display it and the abandon modal */}
+						{isExamLoaded && moduleIndex !== -1 && (
+							<>
+								{exam && CurrentExam && <CurrentExam exam={exam} showSolutions={showSolutions} />}
+								{!showSolutions && <AbandonPopup
+									isOpen={showAbandonPopup}
+									abandonPopupTitle="Leave Exercise"
+									abandonPopupDescription="Are you sure you want to leave the exercise? Your progress will be saved and this exam can be resumed on the Dashboard."
+									abandonConfirmButtonText="Confirm"
+									onAbandon={onAbandon}
+									onCancel={() => setShowAbandonPopup(false)}
+								/>
+								}
+							</>
 						)}
 					</>
 				</Layout>
@@ -541,3 +368,5 @@ export default function ExamPage({ page, user, destination = "/exam", hideSideba
 		</>
 	);
 }
+
+export default ExamPage;