diff --git a/src/pages/(generation)/LevelGeneration.tsx b/src/pages/(generation)/LevelGeneration.tsx index 8b4d2207..80ca0a94 100644 --- a/src/pages/(generation)/LevelGeneration.tsx +++ b/src/pages/(generation)/LevelGeneration.tsx @@ -1,294 +1,375 @@ import Select from "@/components/Low/Select"; -import {Difficulty, LevelExam, MultipleChoiceExercise, MultipleChoiceQuestion} from "@/interfaces/exam"; +import { + Difficulty, + LevelExam, + MultipleChoiceExercise, + MultipleChoiceQuestion, + LevelPart, +} from "@/interfaces/exam"; import useExamStore from "@/stores/examStore"; -import {getExamById} from "@/utils/exams"; -import {playSound} from "@/utils/sound"; -import {Tab} from "@headlessui/react"; +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 {useState} from "react"; -import {BsArrowRepeat, BsCheck, BsPencilSquare, BsX} from "react-icons/bs"; -import {toast} from "react-toastify"; -import {v4} from "uuid"; +import { capitalize, sample } from "lodash"; +import { useRouter } from "next/router"; +import { useState } from "react"; +import { BsArrowRepeat, BsCheck, BsPencilSquare, BsX } from "react-icons/bs"; +import { toast } from "react-toastify"; +import { v4 } from "uuid"; const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"]; -const QuestionDisplay = ({question, onUpdate}: {question: MultipleChoiceQuestion; onUpdate: (question: MultipleChoiceQuestion) => void}) => { - const [isEditing, setIsEditing] = useState(false); - const [options, setOptions] = useState(question.options); +const QuestionDisplay = ({ + question, + onUpdate, +}: { + question: MultipleChoiceQuestion; + onUpdate: (question: MultipleChoiceQuestion) => void; +}) => { + const [isEditing, setIsEditing] = useState(false); + const [options, setOptions] = useState(question.options); + const [answer, setAnswer] = useState(question.solution); - return ( -
- - {question.id}. {question.prompt}{" "} - -
- {question.options.map((option, index) => ( - - - ({option.id}) - {" "} - {isEditing ? ( - setOptions((prev) => prev.map((x, idx) => (idx === index ? {...x, text: e.target.value} : x)))} - /> - ) : ( - {option.text} - )} - - ))} -
-
- {!isEditing && ( - - )} - {isEditing && ( - <> - - - - )} -
-
- ); + return ( +
+ + {question.id}. {question.prompt}{" "} + +
+ {question.options.map((option, index) => ( + + setAnswer(option.id)} + > + ({option.id}) + {" "} + {isEditing ? ( + + setOptions((prev) => + prev.map((x, idx) => + idx === index ? { ...x, text: e.target.value } : x + ) + ) + } + /> + ) : ( + {option.text} + )} + + ))} +
+
+ {!isEditing && ( + + )} + {isEditing && ( + <> + + + + )} +
+
+ ); }; -const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelExam; difficulty: Difficulty; setExam: (exam: LevelExam) => void}) => { - const [isLoading, setIsLoading] = useState(false); +const TaskTab = ({ + exam, + difficulty, + setExam, +}: { + exam?: LevelPart; + difficulty: Difficulty; + setExam: (exam: LevelPart) => void; +}) => { + const [isLoading, setIsLoading] = useState(false); - const generate = () => { - const url = new URLSearchParams(); - url.append("difficulty", difficulty); + const generate = () => { + const url = new URLSearchParams(); + url.append("difficulty", difficulty); - setIsLoading(true); - axios - .get(`/api/exam/level/generate/level?${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."); - setExam(result.data); - }) - .catch((error) => { - console.log(error); - toast.error("Something went wrong!"); - }) - .finally(() => setIsLoading(false)); - }; + setIsLoading(true); + axios + .get(`/api/exam/level/generate/level?${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." + ); + setExam(result.data); + }) + .catch((error) => { + console.log(error); + toast.error("Something went wrong!"); + }) + .finally(() => setIsLoading(false)); + }; - const onUpdate = (question: MultipleChoiceQuestion) => { - if (!exam) return; + const onUpdate = (question: MultipleChoiceQuestion) => { + if (!exam) return; - const updatedExam = { - ...exam, - parts: exam.parts.map((p) => - p.exercises.map((x) => ({ - ...x, - questions: (x as MultipleChoiceExercise).questions.map((q) => (q.id === question.id ? question : q)), - })), - ), - }; - console.log(updatedExam); - setExam(updatedExam as any); - }; + const updatedExam = { + ...exam, + exercises: exam.exercises.map((x) => ({ + ...x, + questions: (x as MultipleChoiceExercise).questions.map((q) => + q.id === question.id ? question : q + ), + }), + ), + }; + console.log(updatedExam); + setExam(updatedExam as any); + }; - return ( - -
- -
- {isLoading && ( -
- - Generating... -
- )} - {exam && ( -
- {exam.parts - .flatMap((x) => x.exercises) - .filter((x) => x.type === "multipleChoice") - .map((ex) => { - const exercise = ex as MultipleChoiceExercise; + return ( + +
+ +
+ {isLoading && ( +
+ + + Generating... + +
+ )} + {exam && ( +
+ {exam.exercises + .filter((x) => x.type === "multipleChoice") + .map((ex) => { + const exercise = ex as MultipleChoiceExercise; - return ( -
-
- Multiple Choice - - {exercise.questions.length} questions - -
-
- {exercise.questions.map((question) => ( - - ))} -
-
- ); - })} -
- )} - - ); + return ( +
+
+ + Multiple Choice + + + {exercise.questions.length} questions + +
+
+ {exercise.questions.map((question) => ( + + ))} +
+
+ ); + })} +
+ )} + + ); }; const LevelGeneration = () => { - const [generatedExam, setGeneratedExam] = useState(); - const [isLoading, setIsLoading] = useState(false); - const [resultingExam, setResultingExam] = useState(); - const [difficulty, setDifficulty] = useState(sample(DIFFICULTIES)!); + const [generatedExam, setGeneratedExam] = useState(); + const [isLoading, setIsLoading] = useState(false); + const [resultingExam, setResultingExam] = useState(); + const [difficulty, setDifficulty] = useState( + sample(DIFFICULTIES)! + ); - const router = useRouter(); + const router = useRouter(); - const setExams = useExamStore((state) => state.setExams); - const setSelectedModules = useExamStore((state) => state.setSelectedModules); + 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", - }); + 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; - } + return; + } - setExams([exam]); - setSelectedModules(["level"]); + setExams([exam]); + setSelectedModules(["level"]); - router.push("/exercises"); - }; + router.push("/exercises"); + }; - const submitExam = () => { - if (!generatedExam) { - toast.error("Please generate all tasks before submitting"); - return; - } + 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(), - }; + setIsLoading(true); - axios - .post(`/api/exam/level`, exam) - .then((result) => { - playSound("sent"); - 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); + const exam: LevelExam = { + isDiagnostic: false, + minTimer: 25, + module: "level", + id: v4(), + parts: [generatedExam], + }; - setGeneratedExam(undefined); - }) - .catch((error) => { - console.log(error); - toast.error("Something went wrong while generating, please try again later."); - }) - .finally(() => setIsLoading(false)); - }; + axios + .post(`/api/exam/level`, exam) + .then((result) => { + playSound("sent"); + 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); - return ( - <> -
-
- - ({ + value: x, + label: capitalize(x), + }))} + onChange={(value) => + value ? setDifficulty(value.value as Difficulty) : null + } + value={{ value: difficulty, label: capitalize(difficulty) }} + /> +
+
+ + + + 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 + + + + + + +
+ {resultingExam && ( + + )} + +
+ + ); }; export default LevelGeneration;