Updated some troubles related to the Level Exam

src/components/Medium/ModuleTitle/MCQuestionGrid.tsx

@@ -3,39 +3,30 @@ import Modal from "@/components/Modal";
 import { Exam, LevelExam, MultipleChoiceExercise, ShuffleMap } from "@/interfaces/exam";
 import useExamStore from "@/stores/examStore";
 import clsx from "clsx";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { BsFillGrid3X3GapFill } from "react-icons/bs";
 
 interface Props {
+	exam: LevelExam
 	showSolutions: boolean;
 	runOnClick: ((index: number) => void) | undefined;
 }
 
-const MCQuestionGrid: React.FC<Props> = ({showSolutions, runOnClick}) => {
+const MCQuestionGrid: React.FC<Props> = ({ exam, showSolutions, runOnClick }) => {
 	const [isOpen, setIsOpen] = useState(false);
 
 	const {
 		userSolutions,
 		partIndex: sectionIndex,
 		exerciseIndex,
-		exam
 	} = useExamStore((state) => state);
 
-    const isMultipleChoiceLevelExercise = () => {
-        if (exam?.module === 'level' && typeof sectionIndex === "number" && sectionIndex > -1) {
-            const currentExercise = (exam as LevelExam).parts[sectionIndex].exercises[exerciseIndex];
-            return currentExercise && currentExercise.type === 'multipleChoice';
-        }
-        return false;
-    };
-
-    if (!isMultipleChoiceLevelExercise() && !userSolutions) return null;
-
-    const currentExercise = (exam as LevelExam).parts[sectionIndex!].exercises[exerciseIndex] as MultipleChoiceExercise;
-    const userSolution = userSolutions!.find((x) => x.exercise.toString() == currentExercise.id.toString())!;
-    const answeredQuestions = new Set(userSolution.solutions.map(sol => sol.question.toString()));
-    const exerciseOffset = Number(currentExercise.questions[0].id);
-    const lastExercise = exerciseOffset + (currentExercise.questions.length - 1);
+	const currentExercise = useMemo(() => (exam as LevelExam).parts[sectionIndex!].exercises[exerciseIndex] as MultipleChoiceExercise, [exam, exerciseIndex, sectionIndex])
+	const userSolution = useMemo(() => userSolutions!.find((x) => x.exercise.toString() == currentExercise.id.toString())!, [currentExercise.id, userSolutions])
+	const answeredQuestions = useMemo(() => new Set(userSolution.solutions.map(sol => sol.question.toString())), [userSolution.solutions])
+	const exerciseOffset = useMemo(() => Number(currentExercise.questions[0].id), [currentExercise.questions])
+	const lastExercise = useMemo(() => exerciseOffset + (currentExercise.questions.length - 1),
+		[currentExercise.questions.length, exerciseOffset]);
 
 	const getQuestionColor = (questionId: string, solution: string, userQuestionSolution: string | undefined) => {
 		const questionShuffleMap = userSolutions.reduce((foundMap, userSolution) => {

src/components/Medium/ModuleTitle/index.tsx

@@ -1,11 +1,11 @@
 import { Module } from "@/interfaces";
 import { moduleLabels } from "@/utils/moduleUtils";
 import clsx from "clsx";
-import { ReactNode, useState } from "react";
+import { ReactNode, useMemo, useState } from "react";
 import { BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen } from "react-icons/bs";
 import ProgressBar from "../../Low/ProgressBar";
 import Timer from "../Timer";
-import { Exercise } from "@/interfaces/exam";
+import { Exercise, LevelExam } from "@/interfaces/exam";
 import useExamStore from "@/stores/examStore";
 import React from "react";
 import MCQuestionGrid from "./MCQuestionGrid";
@@ -38,9 +38,7 @@ export default function ModuleTitle({
 	showSolutions = false,
 	runOnClick = undefined
 }: Props) {
-	const {
-		exam
-	} = useExamStore((state) => state);
+	const { exam, partIndex, exerciseIndex: examExerciseIndex, userSolutions } = useExamStore((state) => state);
 
 	const moduleIcon: { [key in Module]: ReactNode } = {
 		reading: <BsBook className="text-ielts-reading w-6 h-6" />,
@@ -50,6 +48,14 @@ export default function ModuleTitle({
 		level: <BsClipboard className="text-ielts-level w-6 h-6" />,
 	};
 
+	const showGrid = useMemo(() =>
+		exam?.module === "level"
+		&& partIndex > -1
+		&& exam.parts[partIndex].exercises[examExerciseIndex].type === "multipleChoice"
+		&& !!userSolutions,
+		[exam, examExerciseIndex, partIndex, userSolutions]
+	)
+
 	return (
 		<>
 			{showTimer && <Timer minTimer={minTimer} disableTimer={disableTimer} />}
@@ -67,7 +73,7 @@ export default function ModuleTitle({
 								return (
 									<div key={index} className="text-2xl font-semibold flex flex-col gap-2">
 										{partInstructions.split("\\n").map((line, lineIndex) => (
-											<span key={lineIndex} dangerouslySetInnerHTML={{__html: line.replace('that is not correct', 'that is <span class="font-bold"><u>not correct</u></span>')}}></span>
+											<span key={lineIndex} dangerouslySetInnerHTML={{ __html: line.replace('that is not correct', 'that is <span class="font-bold"><u>not correct</u></span>') }}></span>
 										))}
 									</div>
 								);
@@ -87,7 +93,7 @@ export default function ModuleTitle({
 						</div>
 						<ProgressBar color={module} label="" percentage={(exerciseIndex * 100) / totalExercises} className="h-2 w-full" />
 					</div>
-					{exam?.module === "level" && <MCQuestionGrid showSolutions={showSolutions} runOnClick={runOnClick}/>}
+					{showGrid && <MCQuestionGrid exam={exam as LevelExam} showSolutions={showSolutions} runOnClick={runOnClick} />}
 				</div>
 			</div>
 		</>

src/pages/official-exam.tsx

@@ -13,7 +13,7 @@ import { Assignment } from "@/interfaces/results";
 import { Stat, User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
 import useExamStore from "@/stores/examStore";
-import { findBy, mapBy, redirect, serialize } from "@/utils";
+import { filterBy, findBy, mapBy, redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import { activeAssignmentFilter } from "@/utils/assignments";
 import { getAssignmentsByAssignee } from "@/utils/assignments.be";
@@ -60,7 +60,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
 
 	const examIDs = uniqBy(
 		assignments.flatMap((a) =>
-			a.exams.filter((e) => e.assignee === user.id).map((e) => ({ module: e.module, id: e.id, key: `${e.module}_${e.id}` })),
+			filterBy(a.exams, 'assignee', user.id).map((e) => ({ module: e.module, id: e.id, key: `${e.module}_${e.id}` })),
 		),
 		"key",
 	);
@@ -93,7 +93,7 @@ export default function OfficialExam({ user, entities, assignments, sessions, ex
 			state.setSelectedModules(mapBy(assignmentExams.sort(sortByModule), 'module'));
 			state.setAssignment(assignment);
 
-			router.push("/exam");
+			router.push(`/exam?assignment=${assignment.id}`);
 		}
 	};
 
@@ -112,7 +112,7 @@ export default function OfficialExam({ user, entities, assignments, sessions, ex
 		state.setShowSolutions(false);
 		state.setQuestionIndex(session.questionIndex);
 
-		router.push("/exam");
+		router.push(`/exam?assignment=${session.assignment?.id}`);
 	};
 
 	const logout = async () => {