From b5dabe336abb5814dac15109a8b11f0a903b227a Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Sat, 27 May 2023 16:15:23 +0100
Subject: [PATCH] Implemented the whole flow for when a user intends to input
 their own levels

---
 src/components/Diagnostic.tsx | 50 +++++++++++++++++++++++++++++++----
 src/interfaces/user.ts        |  1 +
 src/pages/api/users/update.ts |  7 ++---
 src/pages/index.tsx           |  8 ++++--
 4 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/src/components/Diagnostic.tsx b/src/components/Diagnostic.tsx
index dde882ec..d51a8411 100644
--- a/src/components/Diagnostic.tsx
+++ b/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>
diff --git a/src/interfaces/user.ts b/src/interfaces/user.ts
index fc39e641..099166e2 100644
--- a/src/interfaces/user.ts
+++ b/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;
 }
 
diff --git a/src/pages/api/users/update.ts b/src/pages/api/users/update.ts
index 4c353f70..038a9eb7 100644
--- a/src/pages/api/users/update.ts
+++ b/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 user = docUser.data() as User;
-
-	const userRef = doc(db, "users", user.id);
-	setDoc(userRef, req.body, {merge: true});
+	const userRef = doc(db, "users", req.session.user.id);
+	await setDoc(userRef, req.body, {merge: true});
 
 	res.status(200).json({ok: true});
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index a388fff6..ff8d1d19 100644
--- a/src/pages/index.tsx
+++ b/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>
 			</>
 		);