Added the ability to choose a difficulty when generating an exam

src/pages/(generation)/WritingGeneration.tsx

@@ -1,24 +1,32 @@
 import Input from "@/components/Low/Input";
-import {WritingExam, WritingExercise} from "@/interfaces/exam";
+import Select from "@/components/Low/Select";
+import {Difficulty, WritingExam, WritingExercise} from "@/interfaces/exam";
 import useExamStore from "@/stores/examStore";
 import {getExamById} from "@/utils/exams";
 import {playSound} from "@/utils/sound";
 import {Tab} from "@headlessui/react";
 import axios from "axios";
 import clsx from "clsx";
+import {capitalize, sample} from "lodash";
 import {useRouter} from "next/router";
 import {useEffect, useState} from "react";
 import {BsArrowRepeat, BsCheck} from "react-icons/bs";
 import {toast} from "react-toastify";
 import {v4} from "uuid";
 
-const TaskTab = ({task, index, setTask}: {task?: string; index: number; setTask: (task: string) => void}) => {
+const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];
+
+const TaskTab = ({task, index, difficulty, setTask}: {task?: string; difficulty: Difficulty; index: number; setTask: (task: string) => void}) => {
 	const [isLoading, setIsLoading] = useState(false);
 
 	const generate = () => {
 		setIsLoading(true);
+
+		const url = new URLSearchParams();
+		url.append("difficulty", difficulty);
+
 		axios
-			.get(`/api/exam/writing/generate/writing_task${index}_general`)
+			.get(`/api/exam/writing/generate/writing_task${index}_general?${url.toString()}`)
 			.then((result) => {
 				playSound(typeof result.data === "string" ? "error" : "check");
 				if (typeof result.data === "string") return toast.error("Something went wrong, please try to generate again.");
@@ -72,6 +80,7 @@ const WritingGeneration = () => {
 	const [minTimer, setMinTimer] = useState(60);
 	const [isLoading, setIsLoading] = useState(false);
 	const [resultingExam, setResultingExam] = useState<WritingExam>();
+	const [difficulty, setDifficulty] = useState<Difficulty>(sample(DIFFICULTIES)!);
 
 	useEffect(() => {
 		const task1Timer = task1 ? 20 : 0;
@@ -144,6 +153,7 @@ const WritingGeneration = () => {
 			exercises: [...(exercise1 ? [exercise1] : []), ...(exercise2 ? [exercise2] : [])],
 			id: v4(),
 			variant: exercise1 && exercise2 ? "full" : "partial",
+			difficulty,
 		};
 
 		axios
@@ -156,6 +166,7 @@ const WritingGeneration = () => {
 
 				setTask1(undefined);
 				setTask2(undefined);
+				setDifficulty(sample(DIFFICULTIES)!);
 			})
 			.catch((error) => {
 				console.log(error);
@@ -166,15 +177,26 @@ const WritingGeneration = () => {
 
 	return (
 		<>
-			<div className="flex flex-col gap-3">
-				<label className="font-normal text-base text-mti-gray-dim">Timer</label>
-				<Input
-					type="number"
-					name="minTimer"
-					onChange={(e) => setMinTimer(parseInt(e) < 15 ? 15 : parseInt(e))}
-					value={minTimer}
-					className="max-w-[300px]"
-				/>
+			<div className="flex gap-4 w-1/2">
+				<div className="flex flex-col gap-3">
+					<label className="font-normal text-base text-mti-gray-dim">Timer</label>
+					<Input
+						type="number"
+						name="minTimer"
+						onChange={(e) => setMinTimer(parseInt(e) < 15 ? 15 : parseInt(e))}
+						value={minTimer}
+						className="max-w-[300px]"
+					/>
+				</div>
+				<div className="flex flex-col gap-3 w-full">
+					<label className="font-normal text-base text-mti-gray-dim">Difficulty</label>
+					<Select
+						options={DIFFICULTIES.map((x) => ({value: x, label: capitalize(x)}))}
+						onChange={(value) => (value ? setDifficulty(value.value as Difficulty) : null)}
+						value={{value: difficulty, label: capitalize(difficulty)}}
+						disabled={!!task1 || !!task2}
+					/>
+				</div>
 			</div>
 
 			<Tab.Group>
@@ -207,7 +229,7 @@ const WritingGeneration = () => {
 						{task: task1, setTask: setTask1},
 						{task: task2, setTask: setTask2},
 					].map(({task, setTask}, index) => (
-						<TaskTab task={task} index={index + 1} key={index} setTask={setTask} />
+						<TaskTab difficulty={difficulty} task={task} index={index + 1} key={index} setTask={setTask} />
 					))}
 				</Tab.Panels>
 			</Tab.Group>