Implemented the whole flow for when a user intends to input their own levels

src/components/Diagnostic.tsx

@@ -5,12 +5,14 @@ import useExamStore from "@/stores/examStore";
 import {getExamById} from "@/utils/exams";
 import axios from "axios";
 import clsx from "clsx";
+import {capitalize} from "lodash";
 import {useRouter} from "next/router";
 import {useEffect, useState} from "react";
 import {ToastContainer, toast} from "react-toastify";
 
 interface Props {
 	user: User;
+	onFinish: () => void;
 }
 
 const DIAGNOSTIC_EXAMS = [
@@ -20,9 +22,10 @@ const DIAGNOSTIC_EXAMS = [
 	["speaking", ""],
 ];
 
-export default function Diagnostic({user}: Props) {
+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 router = useRouter();
 
@@ -41,6 +44,15 @@ export default function Diagnostic({user}: Props) {
 		});
 	};
 
+	const updateUser = () => {
+		axios
+			.post("/api/users/update", {focus, levels, isFirstLogin: false})
+			.then(onFinish)
+			.catch(() => {
+				toast.error("Something went wrong, please try again later!", {toastId: "user-update-error"});
+			});
+	};
+
 	const onPerformDiagnosis = async () => {
 		axios
 			.post("/api/users/update", {focus, isFirstLogin: false})
@@ -50,10 +62,6 @@ export default function Diagnostic({user}: Props) {
 			});
 	};
 
-	useEffect(() => {
-		toast.error("Something went wrong, please try again later!", {toastId: "user-update-error"});
-	}, []);
-
 	if (!focus) {
 		return (
 			<div className="bg-white p-16 rounded-2xl flex flex-col items-center justify-center gap-8 h-96 relative shadow-md">
@@ -70,6 +78,38 @@ export default function Diagnostic({user}: Props) {
 		);
 	}
 
+	if (isInsert) {
+		return (
+			<div className="bg-white p-16 rounded-2xl flex flex-col items-center justify-center gap-8 shadow-md">
+				<h2 className="font-semibold text-xl">What is your level?</h2>
+				<div className="flex w-full flex-col gap-4 justify-self-stretch">
+					{Object.keys(levels).map((module) => (
+						<div key={module} className="flex items-center gap-4 justify-between">
+							<span className="font-medium text-lg">{capitalize(module)}</span>
+							<input
+								type="number"
+								className="input input-bordered bg-white w-24"
+								value={levels[module as keyof typeof levels]}
+								min={0}
+								max={9}
+								onChange={(e) =>
+									setLevels((prev) =>
+										parseInt(e.target.value) <= 9 && parseInt(e.target.value) >= 0
+											? {...prev, [module]: parseInt(e.target.value)}
+											: prev,
+									)
+								}
+							/>
+						</div>
+					))}
+				</div>
+				<button onClick={updateUser} className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}>
+					Next
+				</button>
+			</div>
+		);
+	}
+
 	return (
 		<div className="bg-white p-16 rounded-2xl flex flex-col items-center justify-center gap-8 h-96 relative shadow-md">
 			<h2 className="absolute top-8 font-semibold text-xl">What is your current IELTS level?</h2>

src/interfaces/user.ts

@@ -8,6 +8,7 @@ export interface User {
 	experience: number;
 	isFirstLogin: boolean;
 	focus: "academic" | "general";
+	levels: {[key in Module]: number};
 	type: Type;
 }
 

src/pages/api/users/update.ts

@@ -16,11 +16,8 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 		return;
 	}
 
-	const docUser = await getDoc(doc(db, "users", req.session.user.id));
+	const userRef = doc(db, "users", req.session.user.id);
-	const user = docUser.data() as User;
+	await setDoc(userRef, req.body, {merge: true});
-
-	const userRef = doc(db, "users", user.id);
-	setDoc(userRef, req.body, {merge: true});
 
 	res.status(200).json({ok: true});
 }

src/pages/index.tsx

@@ -36,14 +36,18 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 export default function Home() {
 	const [showEndExam, setShowEndExam] = useState(false);
 	const [windowWidth, setWindowWidth] = useState(0);
+	const [showDiagnostics, setShowDiagnostics] = useState(false);
 
 	const {stats, isLoading} = useStats();
 	const {user} = useUser({redirectTo: "/login"});
 
 	useEffect(() => setShowEndExam(window.innerWidth <= 960), []);
 	useEffect(() => setWindowWidth(window.innerWidth), []);
+	useEffect(() => {
+		if (user) setShowDiagnostics(user.isFirstLogin);
+	}, [user]);
 
-	if (user && user.isFirstLogin) {
+	if (user && showDiagnostics) {
 		return (
 			<>
 				<Head>
@@ -56,7 +60,7 @@ export default function Home() {
 					<link rel="icon" href="/favicon.ico" />
 				</Head>
 				<main className="w-full h-full min-h-[100vh] flex flex-col items-center justify-center bg-neutral-100 text-black">
-					<Diagnostic user={user} />
+					<Diagnostic user={user} onFinish={() => setShowDiagnostics(false)} />
 				</main>
 			</>
 		);