Finished up the Diagnostic page

src/components/Diagnostic.tsx

@@ -39,12 +39,7 @@ export default function Diagnostic({onFinish}: Props) {
 
 	const isNextDisabled = () => {
 		if (!focus) return true;
-		if (levels.reading === -1) return true;
+		return Object.values(levels).includes(-1);
-		if (levels.listening === -1) return true;
-		if (levels.writing === -1) return true;
-		if (levels.speaking === -1) return true;
-
-		return false;
 	};
 
 	const selectExam = () => {
@@ -61,7 +56,12 @@ export default function Diagnostic({onFinish}: Props) {
 
 	const updateUser = (callback: () => void) => {
 		axios
-			.patch("/api/users/update", {focus, levels, desiredLevels, isFirstLogin: false})
+			.patch("/api/users/update", {
+				focus,
+				levels: Object.values(levels).includes(-1) ? {reading: -1, listening: -1, writing: -1, speaking: -1} : levels,
+				desiredLevels,
+				isFirstLogin: false,
+			})
 			.then(callback)
 			.catch(() => {
 				toast.error("Something went wrong, please try again later!", {toastId: "user-update-error"});
@@ -108,13 +108,17 @@ export default function Diagnostic({onFinish}: Props) {
 							<Menu>
 								<Menu.Button className="w-full border border-mti-gray-platinum rounded-full px-6 py-4 flex justify-between items-center gap-12 bg-white">
 									<BsBook className="text-ielts-reading" size={34} />
-									<span className="text-mti-gray-cool text-sm">Select your reading level</span>
+									<span className="text-mti-gray-cool text-sm">
+										{levels.reading === -1 ? "Select your reading level" : `Level ${levels.reading}`}
+									</span>
 									<BsChevronDown className="text-mti-gray-cool" size={12} />
 								</Menu.Button>
 								<Menu.Items className="absolute origin-top top-full bg-white flex flex-col items-center w-full z-20 drop-shadow-lg rounded-2xl overflow-hidden">
 									{Object.values(writingMarking).map((x) => (
 										<Menu.Item key={x}>
-											<span className="w-full py-4 text-center cursor-pointer bg-white hover:bg-mti-gray-platinum transition ease-in-out duration-300">
+											<span
+												onClick={() => setLevels((prev) => ({...prev, reading: x}))}
+												className="w-full py-4 text-center cursor-pointer bg-white hover:bg-mti-gray-platinum transition ease-in-out duration-300">
 												Level {x}
 											</span>
 										</Menu.Item>
@@ -129,13 +133,17 @@ export default function Diagnostic({onFinish}: Props) {
 							<Menu>
 								<Menu.Button className="w-full border border-mti-gray-platinum rounded-full px-6 py-4 flex justify-between items-center gap-12 bg-white">
 									<BsHeadphones className="text-ielts-listening" size={34} />
-									<span className="text-mti-gray-cool text-sm">Select your listening level</span>
+									<span className="text-mti-gray-cool text-sm">
+										{levels.listening === -1 ? "Select your listening level" : `Level ${levels.listening}`}
+									</span>
 									<BsChevronDown className="text-mti-gray-cool" size={12} />
 								</Menu.Button>
 								<Menu.Items className="absolute origin-top top-full bg-white flex flex-col items-center w-full z-20 drop-shadow-lg rounded-2xl overflow-hidden">
 									{Object.values(writingMarking).map((x) => (
 										<Menu.Item key={x}>
-											<span className="w-full py-5 text-center cursor-pointer bg-white hover:bg-mti-gray-platinum transition ease-in-out duration-300">
+											<span
+												onClick={() => setLevels((prev) => ({...prev, listening: x}))}
+												className="w-full py-5 text-center cursor-pointer bg-white hover:bg-mti-gray-platinum transition ease-in-out duration-300">
 												Level {x}
 											</span>
 										</Menu.Item>
@@ -150,13 +158,17 @@ export default function Diagnostic({onFinish}: Props) {
 							<Menu>
 								<Menu.Button className="w-full border border-mti-gray-platinum rounded-full px-6 py-4 flex justify-between items-center gap-12 bg-white">
 									<BsPen className="text-ielts-writing" size={34} />
-									<span className="text-mti-gray-cool text-sm">Select your writing level</span>
+									<span className="text-mti-gray-cool text-sm">
+										{levels.writing === -1 ? "Select your writing level" : `Level ${levels.writing}`}
+									</span>
 									<BsChevronDown className="text-mti-gray-cool" size={12} />
 								</Menu.Button>
 								<Menu.Items className="absolute origin-top top-full bg-white flex flex-col items-center w-full z-20 drop-shadow-lg rounded-2xl overflow-hidden">
 									{Object.values(writingMarking).map((x) => (
 										<Menu.Item key={x}>
-											<span className="w-full py-5 text-center cursor-pointer bg-white hover:bg-mti-gray-platinum transition ease-in-out duration-300">
+											<span
+												onClick={() => setLevels((prev) => ({...prev, writing: x}))}
+												className="w-full py-5 text-center cursor-pointer bg-white hover:bg-mti-gray-platinum transition ease-in-out duration-300">
 												Level {x}
 											</span>
 										</Menu.Item>
@@ -171,13 +183,17 @@ export default function Diagnostic({onFinish}: Props) {
 							<Menu>
 								<Menu.Button className="w-full border border-mti-gray-platinum rounded-full px-6 py-4 flex justify-between items-center gap-12 bg-white">
 									<BsMegaphone className="text-ielts-speaking" size={34} />
-									<span className="text-mti-gray-cool text-sm">Select your speaking level</span>
+									<span className="text-mti-gray-cool text-sm">
+										{levels.speaking === -1 ? "Select your speaking level" : `Level ${levels.speaking}`}
+									</span>
 									<BsChevronDown className="text-mti-gray-cool" size={12} />
 								</Menu.Button>
 								<Menu.Items className="absolute origin-top top-full bg-white flex flex-col items-center w-full z-20 drop-shadow-lg rounded-2xl">
 									{Object.values(writingMarking).map((x) => (
 										<Menu.Item key={x}>
-											<span className="w-full py-5 text-center cursor-pointer bg-white hover:bg-mti-gray-platinum transition ease-in-out duration-300">
+											<span
+												onClick={() => setLevels((prev) => ({...prev, speaking: x}))}
+												className="w-full py-5 text-center cursor-pointer bg-white hover:bg-mti-gray-platinum transition ease-in-out duration-300">
 												Level {x}
 											</span>
 										</Menu.Item>