Updated Level Generation

src/pages/(generation)/LevelGeneration.tsx

@@ -1,23 +1,36 @@
 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 { getExamById } from "@/utils/exams";
-import {playSound} from "@/utils/sound";
+import { playSound } from "@/utils/sound";
-import {Tab} from "@headlessui/react";
+import { Tab } from "@headlessui/react";
 import axios from "axios";
 import clsx from "clsx";
-import {capitalize, sample} from "lodash";
+import { capitalize, sample } from "lodash";
-import {useRouter} from "next/router";
+import { useRouter } from "next/router";
-import {useState} from "react";
+import { useState } from "react";
-import {BsArrowRepeat, BsCheck, BsPencilSquare, BsX} from "react-icons/bs";
+import { BsArrowRepeat, BsCheck, BsPencilSquare, BsX } from "react-icons/bs";
-import {toast} from "react-toastify";
+import { toast } from "react-toastify";
-import {v4} from "uuid";
+import { v4 } from "uuid";
 
 const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];
 
-const QuestionDisplay = ({question, onUpdate}: {question: MultipleChoiceQuestion; onUpdate: (question: MultipleChoiceQuestion) => void}) => {
+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 (
     <div key={question.id} className="flex flex-col gap-1">
@@ -26,15 +39,32 @@ const QuestionDisplay = ({question, onUpdate}: {question: MultipleChoiceQuestion
       </span>
       <div className="flex flex-col gap-1">
         {question.options.map((option, index) => (
-					<span key={option.id} className={clsx(question.solution === option.id && "font-bold")}>
+          <span
-						<span className={clsx("font-semibold", question.solution === option.id ? "text-mti-green-light" : "text-ielts-level")}>
+            key={option.id}
+            className={clsx(answer === option.id && "font-bold")}
+          >
+            <span
+              className={clsx(
+                "font-semibold",
+                answer === option.id
+                  ? "text-mti-green-light"
+                  : "text-ielts-level"
+              )}
+			  onClick={() => setAnswer(option.id)}
+            >
               ({option.id})
             </span>{" "}
             {isEditing ? (
               <input
                 defaultValue={option.text}
                 className="w-60"
-								onChange={(e) => setOptions((prev) => prev.map((x, idx) => (idx === index ? {...x, text: e.target.value} : x)))}
+                onChange={(e) =>
+                  setOptions((prev) =>
+                    prev.map((x, idx) =>
+                      idx === index ? { ...x, text: e.target.value } : x
+                    )
+                  )
+                }
               />
             ) : (
               <span>{option.text}</span>
@@ -46,7 +76,8 @@ const QuestionDisplay = ({question, onUpdate}: {question: MultipleChoiceQuestion
         {!isEditing && (
           <button
             onClick={() => setIsEditing(true)}
-						className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300">
+            className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300"
+          >
             <BsPencilSquare />
           </button>
         )}
@@ -54,15 +85,17 @@ const QuestionDisplay = ({question, onUpdate}: {question: MultipleChoiceQuestion
           <>
             <button
               onClick={() => {
-								onUpdate({...question, options});
+                onUpdate({ ...question, options, solution: answer });
                 setIsEditing(false);
               }}
-							className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300">
+              className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300"
+            >
               <BsCheck />
             </button>
             <button
               onClick={() => setIsEditing(false)}
-							className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300">
+              className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300"
+            >
               <BsX />
             </button>
           </>
@@ -72,7 +105,15 @@ const QuestionDisplay = ({question, onUpdate}: {question: MultipleChoiceQuestion
   );
 };
 
-const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelExam; difficulty: Difficulty; setExam: (exam: LevelExam) => void}) => {
+const TaskTab = ({
+  exam,
+  difficulty,
+  setExam,
+}: {
+  exam?: LevelPart;
+  difficulty: Difficulty;
+  setExam: (exam: LevelPart) => void;
+}) => {
   const [isLoading, setIsLoading] = useState(false);
 
   const generate = () => {
@@ -84,7 +125,10 @@ const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelExam; difficulty: Dif
       .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.");
+        if (typeof result.data === "string")
+          return toast.error(
+            "Something went wrong, please try to generate again."
+          );
         setExam(result.data);
       })
       .catch((error) => {
@@ -99,11 +143,12 @@ const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelExam; difficulty: Dif
 
     const updatedExam = {
       ...exam,
-			parts: exam.parts.map((p) =>
+	  exercises: exam.exercises.map((x) => ({
-				p.exercises.map((x) => ({
 		...x,
-					questions: (x as MultipleChoiceExercise).questions.map((q) => (q.id === question.id ? question : q)),
+		questions: (x as MultipleChoiceExercise).questions.map((q) =>
-				})),
+            q.id === question.id ? question : q
+          ),
+	  }),
       ),
     };
     console.log(updatedExam);
@@ -119,8 +164,9 @@ const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelExam; difficulty: Dif
           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",
+            "transition ease-in-out duration-300"
-					)}>
+          )}
+        >
           {isLoading ? (
             <div className="flex items-center justify-center">
               <BsArrowRepeat className="text-white animate-spin" size={25} />
@@ -132,14 +178,17 @@ const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelExam; difficulty: Dif
       </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
-					<span className={clsx("font-bold text-2xl text-ielts-level")}>Generating...</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.parts
+          {exam.exercises
-						.flatMap((x) => x.exercises)
             .filter((x) => x.type === "multipleChoice")
             .map((ex) => {
               const exercise = ex as MultipleChoiceExercise;
@@ -147,14 +196,20 @@ const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelExam; difficulty: Dif
               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="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) => (
-											<QuestionDisplay question={question} onUpdate={onUpdate} key={question.id} />
+                      <QuestionDisplay
+                        question={question}
+                        onUpdate={onUpdate}
+                        key={question.id}
+                      />
                     ))}
                   </div>
                 </div>
@@ -167,10 +222,12 @@ const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelExam; difficulty: Dif
 };
 
 const LevelGeneration = () => {
-	const [generatedExam, setGeneratedExam] = useState<LevelExam>();
+  const [generatedExam, setGeneratedExam] = useState<LevelPart>();
   const [isLoading, setIsLoading] = useState(false);
   const [resultingExam, setResultingExam] = useState<LevelExam>();
-	const [difficulty, setDifficulty] = useState<Difficulty>(sample(DIFFICULTIES)!);
+  const [difficulty, setDifficulty] = useState<Difficulty>(
+    sample(DIFFICULTIES)!
+  );
 
   const router = useRouter();
 
@@ -180,9 +237,12 @@ const LevelGeneration = () => {
   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", {
+      toast.error(
+        "Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID",
+        {
           toastId: "invalid-exam-id",
-			});
+        }
+      );
 
       return;
     }
@@ -200,12 +260,13 @@ const LevelGeneration = () => {
     }
 
     setIsLoading(true);
+
     const exam: LevelExam = {
-			...generatedExam,
       isDiagnostic: false,
       minTimer: 25,
       module: "level",
       id: v4(),
+	  parts: [generatedExam],
     };
 
     axios
@@ -213,14 +274,18 @@ const LevelGeneration = () => {
       .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.");
+        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.");
+        toast.error(
+          "Something went wrong while generating, please try again later."
+        );
       })
       .finally(() => setIsLoading(false));
   };
@@ -229,30 +294,44 @@ const LevelGeneration = () => {
     <>
       <div className="flex gap-4 w-1/2">
         <div className="flex flex-col gap-3 w-full">
-					<label className="font-normal text-base text-mti-gray-dim">Difficulty</label>
+          <label className="font-normal text-base text-mti-gray-dim">
+            Difficulty
+          </label>
           <Select
-						options={DIFFICULTIES.map((x) => ({value: x, label: capitalize(x)}))}
+            options={DIFFICULTIES.map((x) => ({
-						onChange={(value) => (value ? setDifficulty(value.value as Difficulty) : null)}
+              value: x,
-						value={{value: difficulty, label: capitalize(difficulty)}}
+              label: capitalize(x),
+            }))}
+            onChange={(value) =>
+              value ? setDifficulty(value.value as Difficulty) : null
+            }
+            value={{ value: difficulty, label: capitalize(difficulty) }}
           />
         </div>
       </div>
       <Tab.Group>
         <Tab.List className="flex space-x-1 rounded-xl bg-ielts-level/20 p-1">
           <Tab
-						className={({selected}) =>
+            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",
+                selected
+                  ? "bg-white shadow"
+                  : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-level"
               )
-						}>
+            }
+          >
             Exam
           </Tab>
         </Tab.List>
         <Tab.Panels>
-					<TaskTab difficulty={difficulty} exam={generatedExam} setExam={setGeneratedExam} />
+          <TaskTab
+            difficulty={difficulty}
+            exam={generatedExam}
+            setExam={setGeneratedExam}
+          />
         </Tab.Panels>
       </Tab.Group>
       <div className="w-full flex justify-end gap-4">
@@ -263,8 +342,9 @@ const LevelGeneration = () => {
             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",
+              "transition ease-in-out duration-300"
-						)}>
+            )}
+          >
             Perform Exam
           </button>
         )}
@@ -276,8 +356,9 @@ const LevelGeneration = () => {
             "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",
+            !generatedExam && "tooltip"
-					)}>
+          )}
+        >
           {isLoading ? (
             <div className="flex items-center justify-center">
               <BsArrowRepeat className="text-white animate-spin" size={25} />