Updated more of the exam generation

src/pages/(generation)/ListeningGeneration.tsx

@@ -1,11 +1,78 @@
 import Input from "@/components/Low/Input";
 import {ListeningPart} from "@/interfaces/exam";
+import {convertCamelCaseToReadable} from "@/utils/string";
 import {Tab} from "@headlessui/react";
 import axios from "axios";
 import clsx from "clsx";
 import {useState} from "react";
+import {BsArrowRepeat} from "react-icons/bs";
 import {toast} from "react-toastify";
 
+const PartTab = ({part, types, index, setPart}: {part?: ListeningPart; types: string[]; index: number; setPart: (part?: ListeningPart) => void}) => {
+	const [topic, setTopic] = useState("");
+	const [isLoading, setIsLoading] = useState(false);
+
+	const generate = () => {
+		const url = new URLSearchParams();
+		if (topic) url.append("topic", topic);
+		if (types) types.forEach((t) => url.append("exercises", t));
+
+		setPart(undefined);
+		setIsLoading(true);
+		axios
+			.get(`/api/exam/listening/generate/listening_passage_${index}${topic || types ? `?${url.toString()}` : ""}`)
+			.then((result) => setPart(result.data))
+			.catch((error) => {
+				console.log(error);
+				toast.error("Something went wrong!");
+			})
+			.finally(() => setIsLoading(false));
+	};
+
+	return (
+		<Tab.Panel className="w-full bg-ielts-listening/20 min-h-[600px] h-full rounded-xl p-6 flex flex-col gap-4">
+			<div className="flex gap-4 items-end">
+				<Input type="text" placeholder="Grand Canyon..." name="topic" label="Topic" onChange={setTopic} roundness="xl" defaultValue={topic} />
+				<button
+					onClick={generate}
+					disabled={isLoading}
+					data-tip="The passage is currently being generated"
+					className={clsx(
+						"bg-ielts-listening/70 border border-ielts-listening text-white w-full max-w-[200px] rounded-xl h-[70px]",
+						"hover:bg-ielts-listening disabled:bg-ielts-listening/40 disabled:cursor-not-allowed",
+						"transition ease-in-out duration-300",
+						isLoading && "tooltip",
+					)}>
+					{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-listening")} />
+					<span className={clsx("font-bold text-2xl text-ielts-listening")}>Generating...</span>
+				</div>
+			)}
+			{part && (
+				<div className="flex flex-col gap-2 w-full overflow-y-scroll scrollbar-hide">
+					<div className="flex gap-4">
+						{part.exercises.map((x) => (
+							<span className="rounded-xl bg-white border border-ielts-listening p-1 px-4" key={x.id}>
+								{x.type && convertCamelCaseToReadable(x.type)}
+							</span>
+						))}
+					</div>
+				</div>
+			)}
+		</Tab.Panel>
+	);
+};
+
 const ListeningGeneration = () => {
 	const [part1, setPart1] = useState<ListeningPart>();
 	const [part2, setPart2] = useState<ListeningPart>();
@@ -21,47 +88,6 @@ const ListeningGeneration = () => {
 
 	const toggleType = (type: string) => setTypes((prev) => (prev.includes(type) ? [...prev.filter((x) => x !== type)] : [...prev, type]));
 
-	const PartTab = ({part, index, setPart}: {part?: ListeningPart; index: number; setPart: (part: ListeningPart) => void}) => {
-		const [topic, setTopic] = useState("");
-		const [isLoading, setIsLoading] = useState(false);
-
-		const generate = () => {
-			setIsLoading(true);
-			axios
-				.get(`/api/exam/listening/generate/listening_passage_${index}?topic=${topic}&exercises=${types.join("&exercises=")}`)
-				.then((result) => setPart(result.data))
-				.catch((error) => {
-					console.log(error);
-					toast.error("Something went wrong!");
-				})
-				.finally(() => setIsLoading(false));
-		};
-
-		return (
-			<Tab.Panel className="w-full bg-ielts-listening/20 min-h-[600px] h-full rounded-xl p-4 flex flex-col gap-4">
-				<div className="flex gap-4 items-end">
-					<Input type="text" placeholder="Grand Canyon..." name="topic" label="Topic" onChange={setTopic} roundness="xl" />
-					<button
-						onClick={generate}
-						disabled={types.length === 0 || topic.length === 0 || isLoading}
-						className={clsx(
-							"bg-ielts-listening/70 border border-ielts-listening text-white w-full max-w-[200px] px-6 py-6 rounded-xl h-[70px]",
-							"hover:bg-ielts-listening disabled:bg-ielts-listening/40 disabled:cursor-not-allowed",
-							"transition ease-in-out duration-300",
-						)}>
-						{!part ? "Generate" : "Regenerate"}
-					</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-listening")} />
-						<span className={clsx("font-bold text-2xl text-ielts-listening")}>Generating...</span>
-					</div>
-				)}
-			</Tab.Panel>
-		);
-	};
-
 	return (
 		<>
 			<div className="flex flex-col gap-3">
@@ -126,10 +152,21 @@ const ListeningGeneration = () => {
 						{part: part2, setPart: setPart2},
 						{part: part3, setPart: setPart3},
 					].map(({part, setPart}, index) => (
-						<PartTab part={part} index={index + 1} key={index} setPart={setPart} />
+						<PartTab part={part} types={types} index={index + 1} key={index} setPart={setPart} />
 					))}
 				</Tab.Panels>
 			</Tab.Group>
+			<button
+				disabled={!part1 || !part2 || !part3}
+				data-tip="Please generate all three passages"
+				className={clsx(
+					"bg-ielts-listening/70 border border-ielts-listening text-white w-full max-w-[200px] px-6 py-6 rounded-xl h-[70px] self-end",
+					"hover:bg-ielts-listening disabled:bg-ielts-listening/40 disabled:cursor-not-allowed",
+					"transition ease-in-out duration-300",
+					(!part1 || !part2 || !part3) && "tooltip",
+				)}>
+				Submit
+			</button>
 		</>
 	);
 };

src/pages/(generation)/ReadingGeneration.tsx

@@ -8,14 +8,19 @@ import {useState} from "react";
 import {BsArrowRepeat} from "react-icons/bs";
 import {toast} from "react-toastify";
 
-const PartTab = ({part, types, index, setPart}: {part?: ReadingPart; types: string[]; index: number; setPart: (part: ReadingPart) => void}) => {
+const PartTab = ({part, types, index, setPart}: {part?: ReadingPart; types: string[]; index: number; setPart: (part?: ReadingPart) => void}) => {
 	const [topic, setTopic] = useState("");
 	const [isLoading, setIsLoading] = useState(false);
 
 	const generate = () => {
+		const url = new URLSearchParams();
+		if (topic) url.append("topic", topic);
+		if (types) types.forEach((t) => url.append("exercises", t));
+
+		setPart(undefined);
 		setIsLoading(true);
 		axios
-			.get(`/api/exam/reading/generate/reading_passage_${index}?topic=${topic}&exercises=${types.join("&exercises=")}`)
+			.get(`/api/exam/reading/generate/reading_passage_${index}${topic || types ? `?${url.toString()}` : ""}`)
 			.then((result) => setPart(result.data))
 			.catch((error) => {
 				console.log(error);
@@ -30,17 +35,13 @@ const PartTab = ({part, types, index, setPart}: {part?: ReadingPart; types: stri
 				<Input type="text" placeholder="Grand Canyon..." name="topic" label="Topic" onChange={setTopic} roundness="xl" defaultValue={topic} />
 				<button
 					onClick={generate}
-					disabled={types.length === 0 || topic.length === 0 || isLoading}
+					disabled={isLoading}
-					data-tip={
+					data-tip="The passage is currently being generated"
-						types.length === 0 || topic.length === 0
-							? "Please select at least one exercise type and write a topic"
-							: "The passage is currently being generated"
-					}
 					className={clsx(
 						"bg-ielts-reading/70 border border-ielts-reading text-white w-full max-w-[200px] rounded-xl h-[70px]",
 						"hover:bg-ielts-reading disabled:bg-ielts-reading/40 disabled:cursor-not-allowed",
 						"transition ease-in-out duration-300",
-						(types.length === 0 || topic.length === 0 || isLoading) && "tooltip",
+						isLoading && "tooltip",
 					)}>
 					{isLoading ? (
 						<div className="flex items-center justify-center">

src/pages/(generation)/WritingGeneration.tsx

@@ -0,0 +1,114 @@
+import Input from "@/components/Low/Input";
+import {Tab} from "@headlessui/react";
+import axios from "axios";
+import clsx from "clsx";
+import {useState} from "react";
+import {BsArrowRepeat} from "react-icons/bs";
+import {toast} from "react-toastify";
+
+const WritingGeneration = () => {
+	const [task1, setTask1] = useState<string>();
+	const [task2, setTask2] = useState<string>();
+
+	const TaskTab = ({task, index, setTask}: {task?: string; index: number; setTask: (task: string) => void}) => {
+		const [isLoading, setIsLoading] = useState(false);
+
+		const generate = () => {
+			setIsLoading(true);
+			axios
+				.get(`/api/exam/writing/generate/writing_task${index}_general`)
+				.then((result) => setTask(result.data.question))
+				.catch((error) => {
+					console.log(error);
+					toast.error("Something went wrong!");
+				})
+				.finally(() => setIsLoading(false));
+		};
+
+		return (
+			<Tab.Panel className="w-full bg-ielts-writing/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-writing/70 border border-ielts-writing text-white w-full px-6 py-6 rounded-xl h-[70px]",
+							"hover:bg-ielts-writing disabled:bg-ielts-writing/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-writing")} />
+						<span className={clsx("font-bold text-2xl text-ielts-writing")}>Generating...</span>
+					</div>
+				)}
+				{task && (
+					<div className="flex flex-col gap-2 w-full overflow-y-scroll scrollbar-hide">
+						<span className="w-full h-96">{task}</span>
+					</div>
+				)}
+			</Tab.Panel>
+		);
+	};
+
+	return (
+		<>
+			<Tab.Group>
+				<Tab.List className="flex space-x-1 rounded-xl bg-ielts-writing/20 p-1">
+					<Tab
+						className={({selected}) =>
+							clsx(
+								"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-writing/70",
+								"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-writing 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-writing",
+							)
+						}>
+						Task 1
+					</Tab>
+					<Tab
+						className={({selected}) =>
+							clsx(
+								"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-writing/70",
+								"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-writing 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-writing",
+							)
+						}>
+						Task 2
+					</Tab>
+				</Tab.List>
+				<Tab.Panels>
+					{[
+						{task: task1, setTask: setTask1},
+						{task: task2, setTask: setTask2},
+					].map(({task, setTask}, index) => (
+						<TaskTab task={task} index={index + 1} key={index} setTask={setTask} />
+					))}
+				</Tab.Panels>
+			</Tab.Group>
+			<button
+				disabled={!task1 || !task2}
+				data-tip="Please generate all three passages"
+				className={clsx(
+					"bg-ielts-writing/70 border border-ielts-writing text-white w-full max-w-[200px] px-6 py-6 rounded-xl h-[70px] self-end",
+					"hover:bg-ielts-writing disabled:bg-ielts-writing/40 disabled:cursor-not-allowed",
+					"transition ease-in-out duration-300",
+					(!task1 || !task2) && "tooltip",
+				)}>
+				Submit
+			</button>
+		</>
+	);
+};
+
+export default WritingGeneration;

src/pages/admin.tsx

@@ -62,7 +62,7 @@ export default function Admin() {
 			{user && (
 				<Layout user={user} className="gap-6">
 					<section className="w-full flex -md:flex-col -xl:gap-2 gap-8 justify-between">
-						{user.email === "tiago.ribeiro@ecrop.dev" ? <ExamGenerator /> : <ExamLoader />}
+						<ExamLoader />
 						<CodeGenerator user={user} />
 						<BatchCodeGenerator user={user} />
 					</section>

src/pages/api/exam/[module]/generate/[endpoint].ts

@@ -25,9 +25,10 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 		return;
 	}
 
-	const {endpoint, topic, exercises} = req.query as {module: Module; endpoint: string; topic: string; exercises: string[]};
+	const {endpoint, topic, exercises} = req.query as {module: Module; endpoint: string; topic?: string; exercises?: string[]};
+	const url = `${process.env.BACKEND_URL}/${endpoint}`;
 
-	const result = await axios.get(`${process.env.BACKEND_URL}/${endpoint}?topic=${topic.toLowerCase()}&exercises=${exercises.join("&exercises=")}`, {
+	const result = await axios.get(`${url}${topic && exercises ? `?topic=${topic.toLowerCase()}&exercises=${exercises.join("&exercises=")}` : ""}`, {
 		headers: {Authorization: `Bearer ${process.env.BACKEND_JWT}`},
 	});
 

src/pages/generation.tsx

@@ -18,6 +18,7 @@ import Input from "@/components/Low/Input";
 import axios from "axios";
 import ReadingGeneration from "./(generation)/ReadingGeneration";
 import ListeningGeneration from "./(generation)/ListeningGeneration";
+import WritingGeneration from "./(generation)/WritingGeneration";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -112,6 +113,7 @@ export default function Generation() {
 					</div>
 					{module === "reading" && <ReadingGeneration />}
 					{module === "listening" && <ListeningGeneration />}
+					{module === "writing" && <WritingGeneration />}
 				</Layout>
 			)}
 		</>