Updated the use of the Desired Levels to be configurable

src/pages/profile.tsx

@@ -2,7 +2,7 @@
 import Head from "next/head";
 import {withIronSessionSsr} from "iron-session/next";
 import {sessionOptions} from "@/lib/session";
-import {ChangeEvent, ReactNode, useEffect, useRef, useState} from "react";
+import {ChangeEvent, Dispatch, ReactNode, SetStateAction, useEffect, useRef, useState} from "react";
 import useUser from "@/hooks/useUser";
 import {toast, ToastContainer} from "react-toastify";
 import Layout from "@/components/High/Layout";
@@ -25,6 +25,9 @@ import {Divider} from "primereact/divider";
 import GenderInput from "@/components/High/GenderInput";
 import EmploymentStatusInput from "@/components/High/EmploymentStatusInput";
 import TimezoneSelect from "@/components/Low/TImezoneSelect";
+import Modal from "@/components/Modal";
+import {Module} from "@/interfaces";
+import ModuleLevelSelector from "@/components/Medium/ModuleLevelSelector";
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
 
@@ -69,6 +72,10 @@ function UserProfile({user, mutateUser}: Props) {
 	const [isLoading, setIsLoading] = useState(false);
 	const [profilePicture, setProfilePicture] = useState(user.profilePicture);
 
+	const [desiredLevels, setDesiredLevels] = useState<{[key in Module]: number} | undefined>(
+		["developer", "student"].includes(user.type) ? user.desiredLevels : undefined,
+	);
+
 	const [country, setCountry] = useState<string>(user.demographicInformation?.country || "");
 	const [phone, setPhone] = useState<string>(user.demographicInformation?.phone || "");
 	const [gender, setGender] = useState<Gender | undefined>(user.demographicInformation?.gender || undefined);
@@ -138,6 +145,7 @@ function UserProfile({user, mutateUser}: Props) {
 			password,
 			newPassword,
 			profilePicture,
+			desiredLevels,
 			demographicInformation: {
 				phone,
 				country,
@@ -319,6 +327,18 @@ function UserProfile({user, mutateUser}: Props) {
 
 							<Divider />
 
+							{desiredLevels && ["developer", "student"].includes(user.type) && (
+								<div className="flex flex-col gap-3 w-full">
+									<label className="font-normal text-base text-mti-gray-dim">Desired Levels</label>
+									<ModuleLevelSelector
+										levels={desiredLevels}
+										setLevels={setDesiredLevels as Dispatch<SetStateAction<{[key in Module]: number}>>}
+									/>
+								</div>
+							)}
+
+							<Divider />
+
 							{user.type === "corporate" && (
 								<>
 									<DoubleColumnRow>