From 52d309e7f488344a5749315901a358877d10c24e Mon Sep 17 00:00:00 2001
From: Joao Ramos <joaomframos.1@gmail.com>
Date: Sat, 17 Feb 2024 10:43:55 +0000
Subject: [PATCH] Fixed NaN display on level progress

---
 src/dashboards/Student.tsx | 56 ++++++++++++++++++++------------------
 1 file changed, 30 insertions(+), 26 deletions(-)

diff --git a/src/dashboards/Student.tsx b/src/dashboards/Student.tsx
index 28c0385c..c22915c0 100644
--- a/src/dashboards/Student.tsx
+++ b/src/dashboards/Student.tsx
@@ -227,35 +227,39 @@ export default function StudentDashboard({user}: Props) {
 			<section className="flex flex-col gap-3">
 				<span className="text-lg font-bold">Score History</span>
 				<div className="-md:grid-rows-4 grid gap-6 md:grid-cols-2">
-					{MODULE_ARRAY.map((module) => (
-						<div className="border-mti-gray-anti-flash flex flex-col gap-2 rounded-xl border p-4" key={module}>
-							<div className="flex items-center gap-2 md:gap-3">
-								<div className="bg-mti-gray-smoke flex h-8 w-8 items-center justify-center rounded-lg md:h-12 md:w-12 md:rounded-xl">
-									{module === "reading" && <BsBook className="text-ielts-reading h-4 w-4 md:h-5 md:w-5" />}
-									{module === "listening" && <BsHeadphones className="text-ielts-listening h-4 w-4 md:h-5 md:w-5" />}
-									{module === "writing" && <BsPen className="text-ielts-writing h-4 w-4 md:h-5 md:w-5" />}
-									{module === "speaking" && <BsMegaphone className="text-ielts-speaking h-4 w-4 md:h-5 md:w-5" />}
-									{module === "level" && <BsClipboard className="text-ielts-level h-4 w-4 md:h-5 md:w-5" />}
+					{MODULE_ARRAY.map((module) => {
+						const desiredLevel = user.desiredLevels[module] || 9;
+						const level = user.levels[module] || 0;
+						return (
+							<div className="border-mti-gray-anti-flash flex flex-col gap-2 rounded-xl border p-4" key={module}>
+								<div className="flex items-center gap-2 md:gap-3">
+									<div className="bg-mti-gray-smoke flex h-8 w-8 items-center justify-center rounded-lg md:h-12 md:w-12 md:rounded-xl">
+										{module === "reading" && <BsBook className="text-ielts-reading h-4 w-4 md:h-5 md:w-5" />}
+										{module === "listening" && <BsHeadphones className="text-ielts-listening h-4 w-4 md:h-5 md:w-5" />}
+										{module === "writing" && <BsPen className="text-ielts-writing h-4 w-4 md:h-5 md:w-5" />}
+										{module === "speaking" && <BsMegaphone className="text-ielts-speaking h-4 w-4 md:h-5 md:w-5" />}
+										{module === "level" && <BsClipboard className="text-ielts-level h-4 w-4 md:h-5 md:w-5" />}
+									</div>
+									<div className="flex w-full justify-between">
+										<span className="text-sm font-bold md:font-extrabold">{capitalize(module)}</span>
+										<span className="text-mti-gray-dim text-sm font-normal">
+											Level {level} / Level 9 (Desired Level: {desiredLevel})
+										</span>
+									</div>
 								</div>
-								<div className="flex w-full justify-between">
-									<span className="text-sm font-bold md:font-extrabold">{capitalize(module)}</span>
-									<span className="text-mti-gray-dim text-sm font-normal">
-										Level {user.levels[module] || 0} / Level 9 (Desired Level: {user.desiredLevels[module] || 9})
-									</span>
+								<div className="md:pl-14">
+									<ProgressBar
+										color={module}
+										label=""
+										mark={Math.round((desiredLevel * 100) / 9)}
+										markLabel={`Desired Level: ${desiredLevel}`}
+										percentage={Math.round((level * 100) / 9)}
+										className="h-2 w-full"
+									/>
 								</div>
 							</div>
-							<div className="md:pl-14">
-								<ProgressBar
-									color={module}
-									label=""
-									mark={Math.round((user.desiredLevels[module] * 100) / 9)}
-									markLabel={`Desired Level: ${user.desiredLevels[module]}`}
-									percentage={Math.round((user.levels[module] * 100) / 9)}
-									className="h-2 w-full"
-								/>
-							</div>
-						</div>
-					))}
+						);
+					})}
 				</div>
 			</section>
 		</>