Merge branch 'main' into task/design/dashboard-redesign

src/components/Diagnostic.tsx

@@ -0,0 +1,119 @@
+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";
+import {getExamById} from "@/utils/exams";
+import axios from "axios";
+import clsx from "clsx";
+import {capitalize} from "lodash";
+import {useRouter} from "next/router";
+import {useState} from "react";
+import {toast} from "react-toastify";
+
+interface Props {
+	user: User;
+	onFinish: () => void;
+}
+
+const DIAGNOSTIC_EXAMS = [
+	["reading", "CurQtQoxWmHaJHeN0JW2"],
+	["listening", "Y6cMao8kUcVnPQOo6teV"],
+	["writing", "hbueuDaEZXV37EW7I12A"],
+	["speaking", "QVFm4pdcziJQZN2iUTDo"],
+];
+
+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();
+
+	const setExams = useExamStore((state) => state.setExams);
+	const setSelectedModules = useExamStore((state) => state.setSelectedModules);
+
+	const selectExam = () => {
+		const examPromises = DIAGNOSTIC_EXAMS.map((exam) => getExamById(exam[0] as Module, exam[1]));
+
+		Promise.all(examPromises).then((exams) => {
+			if (exams.every((x) => !!x)) {
+				setExams(exams.map((x) => x!));
+				setSelectedModules(exams.map((x) => x!.module));
+				router.push("/exam");
+			}
+		});
+	};
+
+	const updateUser = (callback: () => void) => {
+		axios
+			.patch("/api/users/update", {focus, levels, isFirstLogin: false})
+			.then(callback)
+			.catch(() => {
+				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">
+				<h2 className="absolute top-8 font-semibold text-xl">What is your focus?</h2>
+				<div className="flex flex-col gap-4 justify-self-stretch">
+					<button onClick={() => setFocus("academic")} className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}>
+						Academic
+					</button>
+					<button onClick={() => setFocus("general")} className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}>
+						General
+					</button>
+				</div>
+			</div>
+		);
+	}
+
+	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={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}
+								step={0.5}
+								onChange={(e) => setLevels((prev) => ({...prev, [module]: parseFloat(e.target.value)}))}
+							/>
+						</div>
+					))}
+				</div>
+				<button
+					onClick={() => updateUser(onFinish)}
+					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>
+		);
+	}
+
+	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>
+			<div className="flex flex-col gap-4">
+				<button onClick={() => setIsInsert(true)} className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}>
+					Insert my IELTS level
+				</button>
+				<button onClick={() => updateUser(selectExam)} className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}>
+					Perform a Diagnosis Test
+				</button>
+			</div>
+		</div>
+	);
+}

src/components/Exercises/Writing.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
 import {WritingExercise} from "@/interfaces/exam";
 import {mdiArrowLeft, mdiArrowRight} from "@mdi/js";
@@ -7,7 +8,7 @@ import {CommonProps} from ".";
 import {Fragment, useEffect, useState} from "react";
 import {toast} from "react-toastify";
 
-export default function Writing({id, prompt, info, type, wordCounter, onNext, onBack}: WritingExercise & CommonProps) {
+export default function Writing({id, prompt, info, type, wordCounter, attachment, onNext, onBack}: WritingExercise & CommonProps) {
 	const [inputText, setInputText] = useState("");
 	const [isSubmitEnabled, setIsSubmitEnabled] = useState(false);
 
@@ -40,6 +41,7 @@ export default function Writing({id, prompt, info, type, wordCounter, onNext, on
 				<span>
 					You should write {wordCounter.type === "min" ? "at least" : "at most"} {wordCounter.limit} words.
 				</span>
+				{attachment && <img src={attachment} alt="Exercise attachment" />}
 			</div>
 
 			<textarea