Added the ability to generate Level exams

src/pages/(generation)/LevelGeneration.tsx

@@ -0,0 +1,207 @@
+import {LevelExam, MultipleChoiceExercise} from "@/interfaces/exam";
+import useExamStore from "@/stores/examStore";
+import {getExamById} from "@/utils/exams";
+import {Tab} from "@headlessui/react";
+import axios from "axios";
+import clsx from "clsx";
+import {useRouter} from "next/router";
+import {useState} from "react";
+import {BsArrowRepeat} from "react-icons/bs";
+import {toast} from "react-toastify";
+import {v4} from "uuid";
+
+const TaskTab = ({exam, setExam}: {exam?: LevelExam; setExam: (exam: LevelExam) => void}) => {
+	const [isLoading, setIsLoading] = useState(false);
+
+	const generate = () => {
+		setIsLoading(true);
+		axios
+			.get(`/api/exam/level/generate/level`)
+			.then((result) => {
+				console.log(result.data);
+				setExam(result.data);
+			})
+			.catch((error) => {
+				console.log(error);
+				toast.error("Something went wrong!");
+			})
+			.finally(() => setIsLoading(false));
+	};
+
+	return (
+		<Tab.Panel className="w-full bg-ielts-level/20 min-h-[600px] h-full rounded-xl p-6 flex flex-col gap-4">
+			<div className="flex gap-4 items-end">
+				<button
+					onClick={generate}
+					disabled={isLoading}
+					className={clsx(
+						"bg-ielts-level/70 border border-ielts-level text-white w-full px-6 py-6 rounded-xl h-[70px]",
+						"hover:bg-ielts-level disabled:bg-ielts-level/40 disabled:cursor-not-allowed",
+						"transition ease-in-out duration-300",
+					)}>
+					{isLoading ? (
+						<div className="flex items-center justify-center">
+							<BsArrowRepeat className="text-white animate-spin" size={25} />
+						</div>
+					) : (
+						"Generate"
+					)}
+				</button>
+			</div>
+			{isLoading && (
+				<div className="w-fit h-fit mt-12 self-center animate-pulse flex flex-col gap-8 items-center">
+					<span className={clsx("loading loading-infinity w-32 text-ielts-level")} />
+					<span className={clsx("font-bold text-2xl text-ielts-level")}>Generating...</span>
+				</div>
+			)}
+			{exam && (
+				<div className="flex flex-col gap-2 w-full overflow-y-scroll scrollbar-hide h-full">
+					{exam.exercises
+						.filter((x) => x.type === "multipleChoice")
+						.map((ex) => {
+							const exercise = ex as MultipleChoiceExercise;
+
+							return (
+								<div key={ex.id} className="w-full h-full flex flex-col gap-2">
+									<div className="flex gap-2">
+										<span className="text-xl font-semibold">Multiple Choice</span>
+										<span className="rounded-xl bg-white border border-ielts-level p-1 px-4 w-fit">
+											{exercise.questions.length} questions
+										</span>
+									</div>
+									<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+										{exercise.questions.map((question) => (
+											<div key={question.id} className="flex flex-col gap-1">
+												<span className="font-semibold">
+													{question.id}. {question.prompt}
+												</span>
+												<span>
+													<span className="font-semibold text-ielts-level">({question.solution})</span>{" "}
+													{question.options.find((o) => o.id === question.solution)?.text}
+												</span>
+											</div>
+										))}
+									</div>
+								</div>
+							);
+						})}
+				</div>
+			)}
+		</Tab.Panel>
+	);
+};
+
+const LevelGeneration = () => {
+	const [generatedExam, setGeneratedExam] = useState<LevelExam>();
+	const [isLoading, setIsLoading] = useState(false);
+	const [resultingExam, setResultingExam] = useState<LevelExam>();
+
+	const router = useRouter();
+
+	const setExams = useExamStore((state) => state.setExams);
+	const setSelectedModules = useExamStore((state) => state.setSelectedModules);
+
+	const loadExam = async (examId: string) => {
+		const exam = await getExamById("level", examId.trim());
+		if (!exam) {
+			toast.error("Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID", {
+				toastId: "invalid-exam-id",
+			});
+
+			return;
+		}
+
+		setExams([exam]);
+		setSelectedModules(["level"]);
+
+		router.push("/exercises");
+	};
+
+	const submitExam = () => {
+		if (!generatedExam) {
+			toast.error("Please generate all tasks before submitting");
+			return;
+		}
+
+		setIsLoading(true);
+		const exam: LevelExam = {
+			...generatedExam,
+			isDiagnostic: false,
+			minTimer: 25,
+			module: "level",
+			id: v4(),
+		};
+
+		axios
+			.post(`/api/exam/level`, exam)
+			.then((result) => {
+				console.log(`Generated Exam ID: ${result.data.id}`);
+				toast.success("This new exam has been generated successfully! Check the ID in our browser's console.");
+				setResultingExam(result.data);
+
+				setGeneratedExam(undefined);
+			})
+			.catch((error) => {
+				console.log(error);
+				toast.error("Something went wrong while generating, please try again later.");
+			})
+			.finally(() => setIsLoading(false));
+	};
+
+	return (
+		<>
+			<Tab.Group>
+				<Tab.List className="flex space-x-1 rounded-xl bg-ielts-level/20 p-1">
+					<Tab
+						className={({selected}) =>
+							clsx(
+								"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-level/70",
+								"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-level focus:outline-none focus:ring-2",
+								"transition duration-300 ease-in-out",
+								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-level",
+							)
+						}>
+						Exam
+					</Tab>
+				</Tab.List>
+				<Tab.Panels>
+					<TaskTab exam={generatedExam} setExam={setGeneratedExam} />
+				</Tab.Panels>
+			</Tab.Group>
+			<div className="w-full flex justify-end gap-4">
+				{resultingExam && (
+					<button
+						disabled={isLoading}
+						onClick={() => loadExam(resultingExam.id)}
+						className={clsx(
+							"bg-white border border-ielts-level text-ielts-level w-full max-w-[200px] rounded-xl h-[70px] self-end",
+							"hover:bg-ielts-level hover:text-white disabled:bg-ielts-level/40 disabled:cursor-not-allowed",
+							"transition ease-in-out duration-300",
+						)}>
+						Perform Exam
+					</button>
+				)}
+				<button
+					disabled={!generatedExam || isLoading}
+					data-tip="Please generate all three passages"
+					onClick={submitExam}
+					className={clsx(
+						"bg-ielts-level/70 border border-ielts-level text-white w-full max-w-[200px] rounded-xl h-[70px] self-end",
+						"hover:bg-ielts-level disabled:bg-ielts-level/40 disabled:cursor-not-allowed",
+						"transition ease-in-out duration-300",
+						!generatedExam && "tooltip",
+					)}>
+					{isLoading ? (
+						<div className="flex items-center justify-center">
+							<BsArrowRepeat className="text-white animate-spin" size={25} />
+						</div>
+					) : (
+						"Submit"
+					)}
+				</button>
+			</div>
+		</>
+	);
+};
+
+export default LevelGeneration;

src/pages/generation.tsx

@@ -19,6 +19,7 @@ import axios from "axios";
 import ReadingGeneration from "./(generation)/ReadingGeneration";
 import ListeningGeneration from "./(generation)/ListeningGeneration";
 import WritingGeneration from "./(generation)/WritingGeneration";
+import LevelGeneration from "./(generation)/LevelGeneration";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -114,6 +115,7 @@ export default function Generation() {
 					{module === "reading" && <ReadingGeneration />}
 					{module === "listening" && <ListeningGeneration />}
 					{module === "writing" && <WritingGeneration />}
+					{module === "level" && <LevelGeneration />}
 				</Layout>
 			)}
 		</>