Solved a bug where if two evaluations where too fast, they would overwrite each other

src/exams/Finish.tsx

@@ -9,7 +9,16 @@ import clsx from "clsx";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { Fragment, useEffect, useState } from "react";
-import {BsArrowCounterclockwise, BsBook, BsClipboard, BsEyeFill, BsHeadphones, BsMegaphone, BsPen, BsShareFill} from "react-icons/bs";
+import {
+  BsArrowCounterclockwise,
+  BsBook,
+  BsClipboard,
+  BsEyeFill,
+  BsHeadphones,
+  BsMegaphone,
+  BsPen,
+  BsShareFill,
+} from "react-icons/bs";
 import { LevelScore } from "@/constants/ielts";
 import { getLevelScore } from "@/utils/score";
 
@@ -28,15 +37,28 @@ interface Props {
   onViewResults: () => void;
 }
 
-export default function Finish({user, scores, modules, isLoading, onViewResults}: Props) {
+export default function Finish({
+  user,
+  scores,
+  modules,
+  isLoading,
+  onViewResults,
+}: Props) {
   const [selectedModule, setSelectedModule] = useState(modules[0]);
-	const [selectedScore, setSelectedScore] = useState<Score>(scores.find((x) => x.module === modules[0])!);
+  const [selectedScore, setSelectedScore] = useState<Score>(
+    scores.find((x) => x.module === modules[0])!,
+  );
 
   const exams = useExamStore((state) => state.exams);
 
-	useEffect(() => setSelectedScore(scores.find((x) => x.module === selectedModule)!), [scores, selectedModule]);
+  useEffect(
+    () => setSelectedScore(scores.find((x) => x.module === selectedModule)!),
+    [scores, selectedModule],
+  );
+  useEffect(() => console.log(scores), [scores]);
 
-	const moduleColors: {[key in Module]: {progress: string; inner: string}} = {
+  const moduleColors: { [key in Module]: { progress: string; inner: string } } =
+    {
       reading: {
         progress: "text-ielts-reading",
         inner: "bg-ielts-reading-light",
@@ -68,7 +90,12 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
     return exam.exercises.length;
   };
 
-	const bandScore: number = calculateBandScore(selectedScore.correct, selectedScore.total, selectedModule, user.focus);
+  const bandScore: number = calculateBandScore(
+    selectedScore.correct,
+    selectedScore.total,
+    selectedModule,
+    user.focus,
+  );
 
   const showLevel = (level: number) => {
     if (selectedModule === "level") {
@@ -86,7 +113,7 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
 
   return (
     <>
-			<div className="w-full min-h-full h-fit flex flex-col items-center justify-between gap-8">
+      <div className="flex h-fit min-h-full w-full flex-col items-center justify-between gap-8">
         <ModuleTitle
           module={selectedModule}
           totalExercises={getTotalExercises()}
@@ -99,10 +126,13 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
             <div
               onClick={() => setSelectedModule("reading")}
               className={clsx(
-								"flex gap-2 items-center rounded-xl p-4 cursor-pointer hover:shadow-lg transition duration-300 ease-in-out hover:bg-ielts-reading hover:text-white",
+                "hover:bg-ielts-reading flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
-								selectedModule === "reading" ? "bg-ielts-reading text-white" : "bg-mti-gray-smoke text-ielts-reading",
+                selectedModule === "reading"
-							)}>
+                  ? "bg-ielts-reading text-white"
-							<BsBook className="w-6 h-6" />
+                  : "bg-mti-gray-smoke text-ielts-reading",
+              )}
+            >
+              <BsBook className="h-6 w-6" />
               <span className="font-semibold">Reading</span>
             </div>
           )}
@@ -110,10 +140,13 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
             <div
               onClick={() => setSelectedModule("listening")}
               className={clsx(
-								"flex gap-2 items-center rounded-xl p-4 cursor-pointer hover:shadow-lg transition duration-300 ease-in-out hover:bg-ielts-listening hover:text-white",
+                "hover:bg-ielts-listening flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
-								selectedModule === "listening" ? "bg-ielts-listening text-white" : "bg-mti-gray-smoke text-ielts-listening",
+                selectedModule === "listening"
-							)}>
+                  ? "bg-ielts-listening text-white"
-							<BsHeadphones className="w-6 h-6" />
+                  : "bg-mti-gray-smoke text-ielts-listening",
+              )}
+            >
+              <BsHeadphones className="h-6 w-6" />
               <span className="font-semibold">Listening</span>
             </div>
           )}
@@ -121,10 +154,13 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
             <div
               onClick={() => setSelectedModule("writing")}
               className={clsx(
-								"flex gap-2 items-center rounded-xl p-4 cursor-pointer hover:shadow-lg transition duration-300 ease-in-out hover:bg-ielts-writing hover:text-white",
+                "hover:bg-ielts-writing flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
-								selectedModule === "writing" ? "bg-ielts-writing text-white" : "bg-mti-gray-smoke text-ielts-writing",
+                selectedModule === "writing"
-							)}>
+                  ? "bg-ielts-writing text-white"
-							<BsPen className="w-6 h-6" />
+                  : "bg-mti-gray-smoke text-ielts-writing",
+              )}
+            >
+              <BsPen className="h-6 w-6" />
               <span className="font-semibold">Writing</span>
             </div>
           )}
@@ -132,10 +168,13 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
             <div
               onClick={() => setSelectedModule("speaking")}
               className={clsx(
-								"flex gap-2 items-center rounded-xl p-4 cursor-pointer hover:shadow-lg transition duration-300 ease-in-out hover:bg-ielts-speaking hover:text-white",
+                "hover:bg-ielts-speaking flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
-								selectedModule === "speaking" ? "bg-ielts-speaking text-white" : "bg-mti-gray-smoke text-ielts-speaking",
+                selectedModule === "speaking"
-							)}>
+                  ? "bg-ielts-speaking text-white"
-							<BsMegaphone className="w-6 h-6" />
+                  : "bg-mti-gray-smoke text-ielts-speaking",
+              )}
+            >
+              <BsMegaphone className="h-6 w-6" />
               <span className="font-semibold">Speaking</span>
             </div>
           )}
@@ -143,18 +182,31 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
             <div
               onClick={() => setSelectedModule("level")}
               className={clsx(
-								"flex gap-2 items-center rounded-xl p-4 cursor-pointer hover:shadow-lg transition duration-300 ease-in-out hover:bg-ielts-level hover:text-white",
+                "hover:bg-ielts-level flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
-								selectedModule === "level" ? "bg-ielts-level text-white" : "bg-mti-gray-smoke text-ielts-level",
+                selectedModule === "level"
-							)}>
+                  ? "bg-ielts-level text-white"
-							<BsClipboard className="w-6 h-6" />
+                  : "bg-mti-gray-smoke text-ielts-level",
+              )}
+            >
+              <BsClipboard className="h-6 w-6" />
               <span className="font-semibold">Level</span>
             </div>
           )}
         </div>
         {isLoading && (
-					<div className="w-fit h-fit absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 animate-pulse flex flex-col gap-12 items-center">
+          <div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-12">
-						<span className={clsx("loading loading-infinity w-32", moduleColors[selectedModule].progress)} />
+            <span
-						<span className={clsx("font-bold text-2xl text-center", moduleColors[selectedModule].progress)}>
+              className={clsx(
+                "loading loading-infinity w-32",
+                moduleColors[selectedModule].progress,
+              )}
+            />
+            <span
+              className={clsx(
+                "text-center text-2xl font-bold",
+                moduleColors[selectedModule].progress,
+              )}
+            >
               Evaluating your answers, please be patient...
               <br />
               You can also check it later on your records page!
@@ -162,45 +214,66 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
           </div>
         )}
         {!isLoading && (
-					<div className="w-full flex gap-9 mt-32 items-center justify-between mb-20">
+          <div className="mb-20 mt-32 flex w-full items-center justify-between gap-9">
-						<span className="max-w-3xl">{moduleResultText(selectedModule, bandScore)}</span>
+            <span className="max-w-3xl">
+              {moduleResultText(selectedModule, bandScore)}
+            </span>
             <div className="flex gap-9 px-16">
               <div
-								className={clsx("radial-progress overflow-hidden", moduleColors[selectedModule].progress)}
+                className={clsx(
+                  "radial-progress overflow-hidden",
+                  moduleColors[selectedModule].progress,
+                )}
                 style={
-									{"--value": (selectedScore.correct / selectedScore.total) * 100, "--thickness": "12px", "--size": "13rem"} as any
+                  {
-								}>
+                    "--value":
+                      (selectedScore.correct / selectedScore.total) * 100,
+                    "--thickness": "12px",
+                    "--size": "13rem",
+                  } as any
+                }
+              >
                 <div
                   className={clsx(
-										"w-48 h-48 rounded-full flex flex-col items-center justify-center",
+                    "flex h-48 w-48 flex-col items-center justify-center rounded-full",
                     moduleColors[selectedModule].inner,
-									)}>
+                  )}
+                >
                   <span className="text-xl">Level</span>
                   {showLevel(bandScore)}
                 </div>
               </div>
               <div className="flex flex-col gap-5">
                 <div className="flex gap-2">
-									<div className="w-3 h-3 bg-mti-red-light rounded-full mt-1" />
+                  <div className="bg-mti-red-light mt-1 h-3 w-3 rounded-full" />
                   <div className="flex flex-col">
                     <span className="text-mti-red-light">
-											{(((selectedScore.total - selectedScore.missing) / selectedScore.total) * 100).toFixed(0)}%
+                      {(
+                        ((selectedScore.total - selectedScore.missing) /
+                          selectedScore.total) *
+                        100
+                      ).toFixed(0)}
+                      %
                     </span>
                     <span className="text-lg">Completion</span>
                   </div>
                 </div>
                 <div className="flex gap-2">
-									<div className="w-3 h-3 bg-mti-purple-light rounded-full mt-1" />
+                  <div className="bg-mti-purple-light mt-1 h-3 w-3 rounded-full" />
                   <div className="flex flex-col">
-										<span className="text-mti-purple-light">{selectedScore.correct.toString().padStart(2, "0")}</span>
+                    <span className="text-mti-purple-light">
+                      {selectedScore.correct.toString().padStart(2, "0")}
+                    </span>
                     <span className="text-lg">Correct</span>
                   </div>
                 </div>
                 <div className="flex gap-2">
-									<div className="w-3 h-3 bg-mti-rose-light rounded-full mt-1" />
+                  <div className="bg-mti-rose-light mt-1 h-3 w-3 rounded-full" />
                   <div className="flex flex-col">
                     <span className="text-mti-rose-light">
-											{(selectedScore.total - selectedScore.correct).toString().padStart(2, "0")}
+                      {(selectedScore.total - selectedScore.correct)
+                        .toString()
+                        .padStart(2, "0")}
                     </span>
                     <span className="text-lg">Wrong</span>
                   </div>
@@ -212,28 +285,30 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
       </div>
 
       {!isLoading && (
-				<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
+        <div className="absolute bottom-8 left-0 flex w-full justify-between gap-8 self-end px-8">
           <div className="flex gap-8">
-						<div className="w-fit flex flex-col items-center gap-1 cursor-pointer">
+            <div className="flex w-fit cursor-pointer flex-col items-center gap-1">
               <button
                 onClick={() => window.location.reload()}
-								className="w-11 h-11 rounded-full bg-mti-purple-light hover:bg-mti-purple flex items-center justify-center transition duration-300 ease-in-out">
+                className="bg-mti-purple-light hover:bg-mti-purple flex h-11 w-11 items-center justify-center rounded-full transition duration-300 ease-in-out"
-								<BsArrowCounterclockwise className="text-white w-7 h-7" />
+              >
+                <BsArrowCounterclockwise className="h-7 w-7 text-white" />
               </button>
               <span>Play Again</span>
             </div>
-						<div className="w-fit flex flex-col items-center gap-1 cursor-pointer">
+            <div className="flex w-fit cursor-pointer flex-col items-center gap-1">
               <button
                 onClick={onViewResults}
-								className="w-11 h-11 rounded-full bg-mti-purple-light hover:bg-mti-purple flex items-center justify-center transition duration-300 ease-in-out">
+                className="bg-mti-purple-light hover:bg-mti-purple flex h-11 w-11 items-center justify-center rounded-full transition duration-300 ease-in-out"
-								<BsEyeFill className="text-white w-7 h-7" />
+              >
+                <BsEyeFill className="h-7 w-7 text-white" />
               </button>
               <span>Review Answers</span>
             </div>
           </div>
 
-					<Link href="/" className="max-w-[200px] w-full self-end">
+          <Link href="/" className="w-full max-w-[200px] self-end">
-						<Button color="purple" className="max-w-[200px] self-end w-full">
+            <Button color="purple" className="w-full max-w-[200px] self-end">
               Dashboard
             </Button>
           </Link>

src/pages/(exam)/ExamPage.tsx

@@ -1,28 +1,29 @@
 /* eslint-disable @next/next/no-img-element */
-import Head from "next/head";
-import {useEffect, useState} from "react";
 import { Module } from "@/interfaces";
+import { useEffect, useState } from "react";
 
-import Selection from "@/exams/Selection";
-import Reading from "@/exams/Reading";
-import {Exam, InteractiveSpeakingExercise, SpeakingExercise, UserSolution, Variant, WritingExercise} from "@/interfaces/exam";
-import Listening from "@/exams/Listening";
-import Writing from "@/exams/Writing";
-import {ToastContainer, toast} from "react-toastify";
-import Finish from "@/exams/Finish";
-import axios from "axios";
-import {Stat} from "@/interfaces/user";
-import Speaking from "@/exams/Speaking";
-import {v4 as uuidv4} from "uuid";
-import useUser from "@/hooks/useUser";
-import useExamStore from "@/stores/examStore";
-import Layout from "@/components/High/Layout";
 import AbandonPopup from "@/components/AbandonPopup";
-import {evaluateSpeakingAnswer, evaluateWritingAnswer} from "@/utils/evaluation";
+import Layout from "@/components/High/Layout";
-import {useRouter} from "next/router";
+import Finish from "@/exams/Finish";
-import {getExam} from "@/utils/exams";
-import {capitalize} from "lodash";
 import Level from "@/exams/Level";
+import Listening from "@/exams/Listening";
+import Reading from "@/exams/Reading";
+import Selection from "@/exams/Selection";
+import Speaking from "@/exams/Speaking";
+import Writing from "@/exams/Writing";
+import useUser from "@/hooks/useUser";
+import { Exam, UserSolution, Variant } from "@/interfaces/exam";
+import { Stat } from "@/interfaces/user";
+import useExamStore from "@/stores/examStore";
+import {
+  evaluateSpeakingAnswer,
+  evaluateWritingAnswer,
+} from "@/utils/evaluation";
+import { getExam } from "@/utils/exams";
+import axios from "axios";
+import { useRouter } from "next/router";
+import { toast, ToastContainer } from "react-toastify";
+import { v4 as uuidv4 } from "uuid";
 
 interface Props {
   page: "exams" | "exercises";
@@ -37,13 +38,27 @@ export default function ExamPage({page}: Props) {
   const [showAbandonPopup, setShowAbandonPopup] = useState(false);
   const [avoidRepeated, setAvoidRepeated] = useState(false);
   const [timeSpent, setTimeSpent] = useState(0);
-	const [statsAwaitingEvaluation, setStatsAwaitingEvaluation] = useState<string[]>([]);
+  const [statsAwaitingEvaluation, setStatsAwaitingEvaluation] = useState<
+    string[]
+  >([]);
   const [variant, setVariant] = useState<Variant>("full");
 
-	const [exams, setExams] = useExamStore((state) => [state.exams, state.setExams]);
+  const [exams, setExams] = useExamStore((state) => [
-	const [userSolutions, setUserSolutions] = useExamStore((state) => [state.userSolutions, state.setUserSolutions]);
+    state.exams,
-	const [showSolutions, setShowSolutions] = useExamStore((state) => [state.showSolutions, state.setShowSolutions]);
+    state.setExams,
-	const [selectedModules, setSelectedModules] = useExamStore((state) => [state.selectedModules, state.setSelectedModules]);
+  ]);
+  const [userSolutions, setUserSolutions] = useExamStore((state) => [
+    state.userSolutions,
+    state.setUserSolutions,
+  ]);
+  const [showSolutions, setShowSolutions] = useExamStore((state) => [
+    state.showSolutions,
+    state.setShowSolutions,
+  ]);
+  const [selectedModules, setSelectedModules] = useExamStore((state) => [
+    state.selectedModules,
+    state.setSelectedModules,
+  ]);
   const assignment = useExamStore((state) => state.assignment);
 
   const { user } = useUser({ redirectTo: "/login" });
@@ -74,7 +89,11 @@ export default function ExamPage({page}: Props) {
 
   useEffect(() => {
     (async () => {
-			if (selectedModules.length > 0 && exams.length > 0 && moduleIndex < selectedModules.length) {
+      if (
+        selectedModules.length > 0 &&
+        exams.length > 0 &&
+        moduleIndex < selectedModules.length
+      ) {
         const nextExam = exams[moduleIndex];
         setExam(nextExam ? updateExamWithUserSolutions(nextExam) : undefined);
       }
@@ -85,7 +104,9 @@ export default function ExamPage({page}: Props) {
   useEffect(() => {
     (async () => {
       if (selectedModules.length > 0 && exams.length === 0) {
-				const examPromises = selectedModules.map((module) => getExam(module, avoidRepeated, variant));
+        const examPromises = selectedModules.map((module) =>
+          getExam(module, avoidRepeated, variant),
+        );
         Promise.all(examPromises).then((values) => {
           if (values.every((x) => !!x)) {
             setExams(values.map((x) => x!));
@@ -100,7 +121,13 @@ export default function ExamPage({page}: Props) {
   }, [selectedModules, setExams, exams]);
 
   useEffect(() => {
-		if (selectedModules.length > 0 && exams.length !== 0 && moduleIndex >= selectedModules.length && !hasBeenUploaded && !showSolutions) {
+    if (
+      selectedModules.length > 0 &&
+      exams.length !== 0 &&
+      moduleIndex >= selectedModules.length &&
+      !hasBeenUploaded &&
+      !showSolutions
+    ) {
       const newStats: Stat[] = userSolutions.map((solution) => ({
         ...solution,
         id: solution.id || uuidv4(),
@@ -122,37 +149,49 @@ export default function ExamPage({page}: Props) {
   }, [selectedModules, moduleIndex, hasBeenUploaded]);
 
   useEffect(() => {
-		if (statsAwaitingEvaluation.length === 0) return setIsEvaluationLoading(false);
+    setIsEvaluationLoading(statsAwaitingEvaluation.length !== 0);
-		return setIsEvaluationLoading(true);
   }, [statsAwaitingEvaluation]);
 
   useEffect(() => {
     if (statsAwaitingEvaluation.length > 0) {
-			statsAwaitingEvaluation.forEach(checkIfStatHasBeenEvaluated);
+      checkIfStatsHaveBeenEvaluated(statsAwaitingEvaluation);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [statsAwaitingEvaluation]);
 
-	const checkIfStatHasBeenEvaluated = (id: string) => {
+  const checkIfStatsHaveBeenEvaluated = (ids: string[]) => {
     setTimeout(async () => {
-			const statRequest = await axios.get<Stat>(`/api/stats/${id}`);
+      const awaitedStats = await Promise.all(
-			const stat = statRequest.data;
+        ids.map(async (id) => (await axios.get<Stat>(`/api/stats/${id}`)).data),
-			if (stat.solutions.every((x) => x.evaluation !== null)) {
+      );
-				const userSolution: UserSolution = {
+      const solutionsEvaluated = awaitedStats.every((stat) =>
-					id,
+        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,
-				};
+        }));
 
-				setUserSolutions(userSolutions.map((x) => (x.exercise === userSolution.exercise ? userSolution : x)));
+        const updatedUserSolutions = userSolutions.map((x) => {
-				return setStatsAwaitingEvaluation((prev) => prev.filter((x) => x !== id));
+          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 checkIfStatHasBeenEvaluated(id);
+      return checkIfStatsHaveBeenEvaluated(ids);
     }, 5 * 1000);
   };
 
@@ -160,13 +199,23 @@ export default function ExamPage({page}: Props) {
     if (exam.module === "reading" || exam.module === "listening") {
       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})),
+          exercises: p.exercises.map((x) =>
+            Object.assign(x, {
+              userSolutions: userSolutions.find((y) => x.id === y.exercise)
+                ?.solutions,
+            }),
+          ),
         }),
       );
       return Object.assign(exam, { parts });
     }
 
-		const exercises = exam.exercises.map((x) => Object.assign(x, {userSolutions: userSolutions.find((y) => x.id === y.exercise)?.solutions}));
+    const exercises = exam.exercises.map((x) =>
+      Object.assign(x, {
+        userSolutions: userSolutions.find((y) => x.id === y.exercise)
+          ?.solutions,
+      }),
+    );
     return Object.assign(exam, { exercises });
   };
 
@@ -176,7 +225,12 @@ export default function ExamPage({page}: Props) {
 
     if (exam && !solutionExams.includes(exam.id)) return;
 
-		if (exam && (exam.module === "writing" || exam.module === "speaking") && solutions.length > 0 && !showSolutions) {
+    if (
+      exam &&
+      (exam.module === "writing" || exam.module === "speaking") &&
+      solutions.length > 0 &&
+      !showSolutions
+    ) {
       setHasBeenUploaded(true);
       setIsEvaluationLoading(true);
 
@@ -184,15 +238,32 @@ export default function ExamPage({page}: Props) {
         exam.exercises.map(async (exercise) => {
           const evaluationID = uuidv4();
           if (exercise.type === "writing")
-						return await evaluateWritingAnswer(exercise, solutions.find((x) => x.exercise === exercise.id)!, evaluationID);
+            return await evaluateWritingAnswer(
+              exercise,
+              solutions.find((x) => x.exercise === exercise.id)!,
+              evaluationID,
+            );
 
-					if (exercise.type === "interactiveSpeaking" || exercise.type === "speaking")
+          if (
-						return await evaluateSpeakingAnswer(exercise, solutions.find((x) => x.exercise === exercise.id)!, evaluationID);
+            exercise.type === "interactiveSpeaking" ||
+            exercise.type === "speaking"
+          )
+            return await evaluateSpeakingAnswer(
+              exercise,
+              solutions.find((x) => x.exercise === exercise.id)!,
+              evaluationID,
+            );
         }),
       )
         .then((responses) => {
-					setStatsAwaitingEvaluation((prev) => [...prev, ...responses.filter((x) => !!x).map((r) => (r as any).id)]);
+          setStatsAwaitingEvaluation((prev) => [
-					setUserSolutions([...userSolutions, ...responses.filter((x) => !!x)] as any);
+            ...prev,
+            ...responses.filter((x) => !!x).map((r) => (r as any).id),
+          ]);
+          setUserSolutions([
+            ...userSolutions,
+            ...responses.filter((x) => !!x),
+          ] as any);
         })
         .finally(() => {
           setHasBeenUploaded(false);
@@ -201,12 +272,19 @@ export default function ExamPage({page}: Props) {
 
     axios.get("/api/stats/update");
 
-		setUserSolutions([...userSolutions.filter((x) => !solutionIds.includes(x.exercise)), ...solutions]);
+    setUserSolutions([
+      ...userSolutions.filter((x) => !solutionIds.includes(x.exercise)),
+      ...solutions,
+    ]);
     setModuleIndex((prev) => prev + 1);
   };
 
-	const aggregateScoresByModule = (answers: UserSolution[]): {module: Module; total: number; missing: number; correct: number}[] => {
+  const aggregateScoresByModule = (
-		const scores: {[key in Module]: {total: number; missing: number; correct: number}} = {
+    answers: UserSolution[],
+  ): { module: Module; total: number; missing: number; correct: number }[] => {
+    const scores: {
+      [key in Module]: { total: number; missing: number; correct: number };
+    } = {
       reading: {
         total: 0,
         correct: 0,
@@ -281,23 +359,49 @@ export default function ExamPage({page}: Props) {
     }
 
     if (exam && exam.module === "reading") {
-			return <Reading exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
+      return (
+        <Reading
+          exam={exam}
+          onFinish={onFinish}
+          showSolutions={showSolutions}
+        />
+      );
     }
 
     if (exam && exam.module === "listening") {
-			return <Listening exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
+      return (
+        <Listening
+          exam={exam}
+          onFinish={onFinish}
+          showSolutions={showSolutions}
+        />
+      );
     }
 
     if (exam && exam.module === "writing") {
-			return <Writing exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
+      return (
+        <Writing
+          exam={exam}
+          onFinish={onFinish}
+          showSolutions={showSolutions}
+        />
+      );
     }
 
     if (exam && exam.module === "speaking") {
-			return <Speaking exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
+      return (
+        <Speaking
+          exam={exam}
+          onFinish={onFinish}
+          showSolutions={showSolutions}
+        />
+      );
     }
 
     if (exam && exam.module === "level") {
-			return <Level exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
+      return (
+        <Level exam={exam} onFinish={onFinish} showSolutions={showSolutions} />
+      );
     }
 
     return <>Loading...</>;
@@ -310,8 +414,13 @@ export default function ExamPage({page}: Props) {
         <Layout
           user={user}
           className="justify-between"
-					focusMode={selectedModules.length !== 0 && !showSolutions && moduleIndex < selectedModules.length}
+          focusMode={
-					onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}>
+            selectedModules.length !== 0 &&
+            !showSolutions &&
+            moduleIndex < selectedModules.length
+          }
+          onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}
+        >
           <>
             {renderScreen()}
             {!showSolutions && moduleIndex < selectedModules.length && (