From e864e16064ee139df4cc95329b104f0c4289d810 Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Mon, 12 Jun 2023 14:05:48 +0100
Subject: [PATCH] Updated the code to use the new desired levels

---
 src/components/Diagnostic.tsx |  3 ++-
 src/interfaces/user.ts        |  1 +
 src/pages/index.tsx           | 44 ++++++++++++++++++++++++++++-------
 3 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/src/components/Diagnostic.tsx b/src/components/Diagnostic.tsx
index a67159f5..d2ec222a 100644
--- a/src/components/Diagnostic.tsx
+++ b/src/components/Diagnostic.tsx
@@ -27,6 +27,7 @@ export default function Diagnostic({onFinish}: Props) {
 	const [focus, setFocus] = useState<"academic" | "general">();
 	const [isInsert, setIsInsert] = useState(false);
 	const [levels, setLevels] = useState({reading: 0, listening: 0, writing: 0, speaking: 0});
+	const [desiredLevels, setDesiredLevels] = useState({reading: 9, listening: 9, writing: 9, speaking: 9});
 
 	const router = useRouter();
 
@@ -47,7 +48,7 @@ export default function Diagnostic({onFinish}: Props) {
 
 	const updateUser = (callback: () => void) => {
 		axios
-			.patch("/api/users/update", {focus, levels, isFirstLogin: false})
+			.patch("/api/users/update", {focus, levels, desiredLevels, isFirstLogin: false})
 			.then(callback)
 			.catch(() => {
 				toast.error("Something went wrong, please try again later!", {toastId: "user-update-error"});
diff --git a/src/interfaces/user.ts b/src/interfaces/user.ts
index 099166e2..f8a9cc91 100644
--- a/src/interfaces/user.ts
+++ b/src/interfaces/user.ts
@@ -9,6 +9,7 @@ export interface User {
 	isFirstLogin: boolean;
 	focus: "academic" | "general";
 	levels: {[key in Module]: number};
+	desiredLevels: {[key in Module]: number};
 	type: Type;
 }
 
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index dc3208d2..742f28aa 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -156,11 +156,18 @@ export default function Home() {
 											</div>
 											<div className="flex justify-between w-full">
 												<span className="font-extrabold text-sm">Reading</span>
-												<span className="text-sm font-normal text-mti-gray-dim">86%</span>
+												<span className="text-sm font-normal text-mti-gray-dim">
+													Level {user.levels.reading} / Level {user.desiredLevels.reading}
+												</span>
 											</div>
 										</div>
 										<div className="pl-14">
-											<ProgressBar color="blue" label="" percentage={86} className="w-full h-2" />
+											<ProgressBar
+												color="blue"
+												label=""
+												percentage={Math.round((user.levels.reading * 100) / user.desiredLevels.reading)}
+												className="w-full h-2"
+											/>
 										</div>
 									</div>
 									<div className="border border-mti-gray-anti-flash rounded-xl flex flex-col gap-2 p-4">
@@ -170,11 +177,18 @@ export default function Home() {
 											</div>
 											<div className="flex justify-between w-full">
 												<span className="font-extrabold text-sm">Writing</span>
-												<span className="text-sm font-normal text-mti-gray-dim">91%</span>
+												<span className="text-sm font-normal text-mti-gray-dim">
+													Level {user.levels.writing} / Level {user.desiredLevels.writing}
+												</span>
 											</div>
 										</div>
 										<div className="pl-14">
-											<ProgressBar color="blue" label="" percentage={91} className="w-full h-2" />
+											<ProgressBar
+												color="blue"
+												label=""
+												percentage={Math.round((user.levels.writing * 100) / user.desiredLevels.writing)}
+												className="w-full h-2"
+											/>
 										</div>
 									</div>
 									<div className="border border-mti-gray-anti-flash rounded-xl flex flex-col gap-2 p-4">
@@ -184,11 +198,18 @@ export default function Home() {
 											</div>
 											<div className="flex justify-between w-full">
 												<span className="font-extrabold text-sm">Listening</span>
-												<span className="text-sm font-normal text-mti-gray-dim">56%</span>
+												<span className="text-sm font-normal text-mti-gray-dim">
+													Level {user.levels.listening} / Level {user.desiredLevels.listening}
+												</span>
 											</div>
 										</div>
 										<div className="pl-14">
-											<ProgressBar color="blue" label="" percentage={56} className="w-full h-2" />
+											<ProgressBar
+												color="blue"
+												label=""
+												percentage={Math.round((user.levels.listening * 100) / user.desiredLevels.listening)}
+												className="w-full h-2"
+											/>
 										</div>
 									</div>
 									<div className="border border-mti-gray-anti-flash rounded-xl flex flex-col gap-2 p-4">
@@ -198,11 +219,18 @@ export default function Home() {
 											</div>
 											<div className="flex justify-between w-full">
 												<span className="font-extrabold text-sm">Speaking</span>
-												<span className="text-sm font-normal text-mti-gray-dim">26%</span>
+												<span className="text-sm font-normal text-mti-gray-dim">
+													Level {user.levels.speaking} / Level {user.desiredLevels.speaking}
+												</span>
 											</div>
 										</div>
 										<div className="pl-14">
-											<ProgressBar color="blue" label="" percentage={26} className="w-full h-2" />
+											<ProgressBar
+												color="blue"
+												label=""
+												percentage={Math.round((user.levels.speaking * 100) / user.desiredLevels.speaking)}
+												className="w-full h-2"
+											/>
 										</div>
 									</div>
 								</div>