From 2a86efc97ef26cabe29c91910ef7bce576aba376 Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Sat, 27 May 2023 16:29:12 +0100
Subject: [PATCH] Improved a bit of error handling

---
 src/components/Diagnostic.tsx | 24 +++++++++++++-----------
 src/constants/ielts.ts        |  8 ++++++++
 2 files changed, 21 insertions(+), 11 deletions(-)
 create mode 100644 src/constants/ielts.ts

diff --git a/src/components/Diagnostic.tsx b/src/components/Diagnostic.tsx
index d51a8411..77783cc9 100644
--- a/src/components/Diagnostic.tsx
+++ b/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>
diff --git a/src/constants/ielts.ts b/src/constants/ielts.ts
new file mode 100644
index 00000000..2facb6ea
--- /dev/null
+++ b/src/constants/ielts.ts
@@ -0,0 +1,8 @@
+import {Module} from "@/interfaces";
+
+export const BAND_SCORES: {[key in Module]: number[]} = {
+	reading: [0, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9],
+	listening: [0, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9],
+	writing: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+	speaking: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+};