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>