Improved a bit of error handling

src/components/Diagnostic.tsx

@@ -1,4 +1,5 @@
 import {infoButtonStyle} from "@/constants/buttonStyles";
+import {BAND_SCORES} from "@/constants/ielts";
 import {Module} from "@/interfaces";
 import {User} from "@/interfaces/user";
 import useExamStore from "@/stores/examStore";
@@ -7,8 +8,8 @@ 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";
+import {useState} from "react";
+import {toast} from "react-toastify";
 
 interface Props {
 	user: User;
@@ -88,22 +89,23 @@ export default function Diagnostic({onFinish}: Props) {
 							<span className="font-medium text-lg">{capitalize(module)}</span>
 							<input
 								type="number"
-								className="input input-bordered bg-white w-24"
+								className={clsx(
+									"input input-bordered bg-white w-24",
+									!BAND_SCORES[module as Module].includes(levels[module as keyof typeof levels]) && "input-error",
+								)}
 								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,
-									)
-								}
+								step={0.5}
+								onChange={(e) => setLevels((prev) => ({...prev, [module]: parseFloat(e.target.value)}))}
 							/>
 						</div>
 					))}
 				</div>
-				<button onClick={updateUser} className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}>
+				<button
+					onClick={updateUser}
+					className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}
+					disabled={!Object.keys(levels).every((module) => BAND_SCORES[module as Module].includes(levels[module as keyof typeof levels]))}>
 					Next
 				</button>
 			</div>