It is now possible to generate and save both Reading and Writing exams

src/pages/(generation)/ReadingGeneration.tsx

@@ -1,12 +1,16 @@
 import Input from "@/components/Low/Input";
-import {ReadingPart} from "@/interfaces/exam";
+import {ReadingExam, ReadingPart} from "@/interfaces/exam";
+import useExamStore from "@/stores/examStore";
+import {getExamById} from "@/utils/exams";
 import {convertCamelCaseToReadable} from "@/utils/string";
 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 PartTab = ({part, types, index, setPart}: {part?: ReadingPart; types: string[]; index: number; setPart: (part?: ReadingPart) => void}) => {
 	const [topic, setTopic] = useState("");
@@ -80,6 +84,13 @@ const ReadingGeneration = () => {
 	const [part2, setPart2] = useState<ReadingPart>();
 	const [part3, setPart3] = useState<ReadingPart>();
 	const [types, setTypes] = useState<string[]>([]);
+	const [isLoading, setIsLoading] = useState(false);
+	const [resultingExam, setResultingExam] = useState<ReadingExam>();
+
+	const router = useRouter();
+
+	const setExams = useExamStore((state) => state.setExams);
+	const setSelectedModules = useExamStore((state) => state.setSelectedModules);
 
 	const availableTypes = [
 		{type: "fillBlanks", label: "Fill the Blanks"},
@@ -90,6 +101,57 @@ const ReadingGeneration = () => {
 
 	const toggleType = (type: string) => setTypes((prev) => (prev.includes(type) ? [...prev.filter((x) => x !== type)] : [...prev, type]));
 
+	const loadExam = async (examId: string) => {
+		const exam = await getExamById("reading", 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(["reading"]);
+
+		router.push("/exercises");
+	};
+
+	const submitExam = () => {
+		if (!part1 || !part2 || !part3) {
+			toast.error("Please generate all three passages before submitting");
+			return;
+		}
+
+		setIsLoading(true);
+		const exam: ReadingExam = {
+			parts: [part1, part2, part3],
+			isDiagnostic: false,
+			minTimer: 60,
+			module: "reading",
+			id: v4(),
+			type: "academic",
+		};
+
+		axios
+			.post(`/api/exam/reading`, 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);
+
+				setPart1(undefined);
+				setPart2(undefined);
+				setPart3(undefined);
+				setTypes([]);
+			})
+			.catch((error) => {
+				console.log(error);
+				toast.error("Something went wrong while generating, please try again later.");
+			})
+			.finally(() => setIsLoading(false));
+	};
+
 	return (
 		<>
 			<div className="flex flex-col gap-3">
@@ -156,17 +218,38 @@ const ReadingGeneration = () => {
 					))}
 				</Tab.Panels>
 			</Tab.Group>
-			<button
-				disabled={!part1 || !part2 || !part3}
-				data-tip="Please generate all three passages"
-				className={clsx(
-					"bg-ielts-reading/70 border border-ielts-reading text-white w-full max-w-[200px] px-6 py-6 rounded-xl h-[70px] self-end",
-					"hover:bg-ielts-reading disabled:bg-ielts-reading/40 disabled:cursor-not-allowed",
-					"transition ease-in-out duration-300",
-					(!part1 || !part2 || !part3) && "tooltip",
-				)}>
-				Submit
-			</button>
+			<div className="w-full flex justify-end gap-4">
+				{resultingExam && (
+					<button
+						disabled={isLoading}
+						onClick={() => loadExam(resultingExam.id)}
+						className={clsx(
+							"bg-white border border-ielts-reading text-ielts-reading w-full max-w-[200px] rounded-xl h-[70px] self-end",
+							"hover:bg-ielts-reading hover:text-white disabled:bg-ielts-reading/40 disabled:cursor-not-allowed",
+							"transition ease-in-out duration-300",
+						)}>
+						Perform Exam
+					</button>
+				)}
+				<button
+					disabled={!part1 || !part2 || !part3 || isLoading}
+					data-tip="Please generate all three passages"
+					onClick={submitExam}
+					className={clsx(
+						"bg-ielts-reading/70 border border-ielts-reading text-white w-full max-w-[200px] rounded-xl h-[70px] self-end",
+						"hover:bg-ielts-reading disabled:bg-ielts-reading/40 disabled:cursor-not-allowed",
+						"transition ease-in-out duration-300",
+						(!part1 || !part2 || !part3) && "tooltip",
+					)}>
+					{isLoading ? (
+						<div className="flex items-center justify-center">
+							<BsArrowRepeat className="text-white animate-spin" size={25} />
+						</div>
+					) : (
+						"Submit"
+					)}
+				</button>
+			</div>
 		</>
 	);
 };