Finalized the Level Generation

2024-07-26 14:09:08 +01:00
parent 6a803fe137
commit 8f6639b7fc
4 changed files with 318 additions and 434 deletions
--- a/src/components/Exercises/MultipleChoice.tsx
+++ b/src/components/Exercises/MultipleChoice.tsx
@@ -18,8 +18,6 @@ function Question({
 	const renderPrompt = (prompt: string) => {
 		return reactStringReplace(prompt, /((<u>)\w+(<\/u>))/g, (match) => {
 			const word = match.replaceAll("<u>", "").replaceAll("</u>", "");
-			console.log(word);
-
 			return word.length > 0 ? <u>{word}</u> : null;
 		});
 	};
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,6 +1,6 @@
 import clsx from "clsx";
-import { IconType } from "react-icons";
-import { MdSpaceDashboard } from "react-icons/md";
+import {IconType} from "react-icons";
+import {MdSpaceDashboard} from "react-icons/md";
 import {
 	BsFileEarmarkText,
 	BsClockHistory,
@@ -14,19 +14,19 @@ import {
 	BsClipboardData,
 	BsFileLock,
 } from "react-icons/bs";
-import { RiLogoutBoxFill } from "react-icons/ri";
-import { SlPencil } from "react-icons/sl";
-import { FaAward } from "react-icons/fa";
+import {RiLogoutBoxFill} from "react-icons/ri";
+import {SlPencil} from "react-icons/sl";
+import {FaAward} from "react-icons/fa";
 import Link from "next/link";
-import { useRouter } from "next/router";
+import {useRouter} from "next/router";
 import axios from "axios";
 import FocusLayer from "@/components/FocusLayer";
-import { preventNavigation } from "@/utils/navigation.disabled";
-import { useEffect, useState } from "react";
+import {preventNavigation} from "@/utils/navigation.disabled";
+import {useEffect, useState} from "react";
 import usePreferencesStore from "@/stores/preferencesStore";
-import { User } from "@/interfaces/user";
+import {User} from "@/interfaces/user";
 import useTicketsListener from "@/hooks/useTicketsListener";
-import { checkAccess, getTypesOfUser } from "@/utils/permissions";
+import {checkAccess, getTypesOfUser} from "@/utils/permissions";
 interface Props {
 	path: string;
 	navDisabled?: boolean;
@@ -46,28 +46,17 @@ interface NavProps {
 	badge?: number;
 }

-const Nav = ({
-  Icon,
-  label,
-  path,
-  keyPath,
-  disabled = false,
-  isMinimized = false,
-  badge,
-}: NavProps) => {
+const Nav = ({Icon, label, path, keyPath, disabled = false, isMinimized = false, badge}: NavProps) => {
 	return (
 		<Link
 			href={!disabled ? keyPath : ""}
 			className={clsx(
 				"flex items-center gap-4 rounded-full p-4 text-gray-500 hover:text-white",
 				"transition-all duration-300 ease-in-out relative",
-        disabled
-          ? "hover:bg-mti-gray-dim cursor-not-allowed"
-          : "hover:bg-mti-purple-light cursor-pointer",
+				disabled ? "hover:bg-mti-gray-dim cursor-not-allowed" : "hover:bg-mti-purple-light cursor-pointer",
 				path === keyPath && "bg-mti-purple-light text-white",
-        isMinimized ? "w-fit" : "w-full min-w-[200px] px-8 2xl:min-w-[220px]"
-      )}
-    >
+				isMinimized ? "w-fit" : "w-full min-w-[200px] px-8 2xl:min-w-[220px]",
+			)}>
 			<Icon size={24} />
 			{!isMinimized && <span className="text-lg font-semibold">{label}</span>}
 			{!!badge && badge > 0 && (
@@ -75,9 +64,8 @@ const Nav = ({
 					className={clsx(
 						"bg-mti-purple-light h-5 w-5 text-xs rounded-full flex items-center justify-center text-white",
 						"transition ease-in-out duration-300",
-            isMinimized && "absolute right-0 top-0"
-          )}
-        >
+						isMinimized && "absolute right-0 top-0",
+					)}>
 					{badge}
 				</div>
 			)}
@@ -85,22 +73,12 @@ const Nav = ({
 	);
 };

-export default function Sidebar({
-  path,
-  navDisabled = false,
-  focusMode = false,
-  user,
-  onFocusLayerMouseEnter,
-  className,
-}: Props) {
+export default function Sidebar({path, navDisabled = false, focusMode = false, user, onFocusLayerMouseEnter, className}: Props) {
 	const router = useRouter();

-  const [isMinimized, toggleMinimize] = usePreferencesStore((state) => [
-    state.isSidebarMinimized,
-    state.toggleSidebarMinimized,
-  ]);
+	const [isMinimized, toggleMinimize] = usePreferencesStore((state) => [state.isSidebarMinimized, state.toggleSidebarMinimized]);

-  const { totalAssignedTickets } = useTicketsListener(user.id);
+	const {totalAssignedTickets} = useTicketsListener(user.id);

 	const logout = async () => {
 		axios.post("/api/logout").finally(() => {
@@ -115,71 +93,23 @@ export default function Sidebar({
 			className={clsx(
 				"relative flex h-full flex-col justify-between bg-transparent px-4 py-4 pb-8",
 				isMinimized ? "w-fit" : "-xl:w-fit w-1/6",
-        className
-      )}
-    >
+				className,
+			)}>
 			<div className="-xl:hidden flex-col gap-3 xl:flex">
-        <Nav
-          disabled={disableNavigation}
-          Icon={MdSpaceDashboard}
-          label="Dashboard"
-          path={path}
-          keyPath="/"
-          isMinimized={isMinimized}
-        />
-        {checkAccess(
-          user,
-          ["student", "teacher", "developer"],
-          "viewExams"
-        ) && (
-          <Nav
-            disabled={disableNavigation}
-            Icon={BsFileEarmarkText}
-            label="Exams"
-            path={path}
-            keyPath="/exam"
-            isMinimized={isMinimized}
-          />
+				<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" isMinimized={isMinimized} />
+				{checkAccess(user, ["student", "teacher", "developer"], "viewExams") && (
+					<Nav disabled={disableNavigation} Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" isMinimized={isMinimized} />
 				)}
-        {checkAccess(
-          user,
-          ["student", "teacher", "developer"],
-          "viewExercises"
-        ) && (
-          <Nav
-            disabled={disableNavigation}
-            Icon={BsPencil}
-            label="Exercises"
-            path={path}
-            keyPath="/exercises"
-            isMinimized={isMinimized}
-          />
+				{checkAccess(user, ["student", "teacher", "developer"], "viewExercises") && (
+					<Nav disabled={disableNavigation} Icon={BsPencil} label="Exercises" path={path} keyPath="/exercises" isMinimized={isMinimized} />
 				)}
 				{checkAccess(user, getTypesOfUser(["agent"]), "viewStats") && (
-          <Nav
-            disabled={disableNavigation}
-            Icon={BsGraphUp}
-            label="Stats"
-            path={path}
-            keyPath="/stats"
-            isMinimized={isMinimized}
-          />
+					<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={isMinimized} />
 				)}
 				{checkAccess(user, getTypesOfUser(["agent"]), "viewRecords") && (
-          <Nav
-            disabled={disableNavigation}
-            Icon={BsClockHistory}
-            label="Record"
-            path={path}
-            keyPath="/record"
-            isMinimized={isMinimized}
-          />
+					<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={isMinimized} />
 				)}
-        {checkAccess(
-          user,
-          ["admin", "developer", "agent", "corporate", "mastercorporate"],
-          "viewPaymentRecords"
-        ) && (
+				{checkAccess(user, ["admin", "developer", "agent", "corporate", "mastercorporate"], "viewPaymentRecords") && (
 					<Nav
 						disabled={disableNavigation}
 						Icon={BsCurrencyDollar}
@@ -189,13 +119,7 @@ export default function Sidebar({
 						isMinimized={isMinimized}
 					/>
 				)}
-        {checkAccess(user, [
-          "admin",
-          "developer",
-          "corporate",
-          "teacher",
-          "mastercorporate",
-        ]) && (
+				{checkAccess(user, ["admin", "developer", "corporate", "teacher", "mastercorporate"]) && (
 					<Nav
 						disabled={disableNavigation}
 						Icon={BsShieldFill}
@@ -205,22 +129,6 @@ export default function Sidebar({
 						isMinimized={isMinimized}
 					/>
 				)}
-        {checkAccess(user, [
-          "admin",
-          "developer",
-          "corporate",
-          "teacher",
-          "mastercorporate",
-        ]) && (
-          <Nav
-            disabled={disableNavigation}
-            Icon={BsShieldFill}
-            label="Permissions"
-            path={path}
-            keyPath="/permissions"
-            isMinimized={isMinimized}
-          />
-        )}
 				{checkAccess(user, ["admin", "developer", "agent"], "viewTickets") && (
 					<Nav
 						disabled={disableNavigation}
@@ -232,7 +140,7 @@ export default function Sidebar({
 						badge={totalAssignedTickets}
 					/>
 				)}
-        {checkAccess(user, ["developer"]) && (
+				{checkAccess(user, ["developer", "admin"]) && (
 					<>
 						<Nav
 							disabled={disableNavigation}
@@ -254,69 +162,20 @@ export default function Sidebar({
 				)}
 			</div>
 			<div className="-xl:flex flex-col gap-3 xl:hidden">
-        <Nav
-          disabled={disableNavigation}
-          Icon={MdSpaceDashboard}
-          label="Dashboard"
-          path={path}
-          keyPath="/"
-          isMinimized={true}
-        />
-        <Nav
-          disabled={disableNavigation}
-          Icon={BsFileEarmarkText}
-          label="Exams"
-          path={path}
-          keyPath="/exam"
-          isMinimized={true}
-        />
-        <Nav
-          disabled={disableNavigation}
-          Icon={BsPencil}
-          label="Exercises"
-          path={path}
-          keyPath="/exercises"
-          isMinimized={true}
-        />
+				<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" isMinimized={true} />
+				<Nav disabled={disableNavigation} Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" isMinimized={true} />
+				<Nav disabled={disableNavigation} Icon={BsPencil} label="Exercises" path={path} keyPath="/exercises" isMinimized={true} />
 				{checkAccess(user, getTypesOfUser(["agent"]), "viewStats") && (
-          <Nav
-            disabled={disableNavigation}
-            Icon={BsGraphUp}
-            label="Stats"
-            path={path}
-            keyPath="/stats"
-            isMinimized={true}
-          />
+					<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={true} />
 				)}
 				{checkAccess(user, getTypesOfUser(["agent"]), "viewRecords") && (
-          <Nav
-            disabled={disableNavigation}
-            Icon={BsClockHistory}
-            label="Record"
-            path={path}
-            keyPath="/record"
-            isMinimized={true}
-          />
+					<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={true} />
 				)}
 				{checkAccess(user, getTypesOfUser(["student"])) && (
-          <Nav
-            disabled={disableNavigation}
-            Icon={BsShieldFill}
-            label="Settings"
-            path={path}
-            keyPath="/settings"
-            isMinimized={true}
-          />
+					<Nav disabled={disableNavigation} Icon={BsShieldFill} label="Settings" path={path} keyPath="/settings" isMinimized={true} />
 				)}
 				{checkAccess(user, getTypesOfUser(["student"])) && (
-          <Nav
-            disabled={disableNavigation}
-            Icon={BsShieldFill}
-            label="Permissions"
-            path={path}
-            keyPath="/permissions"
-            isMinimized={true}
-          />
+					<Nav disabled={disableNavigation} Icon={BsShieldFill} label="Permissions" path={path} keyPath="/permissions" isMinimized={true} />
 				)}
 				{checkAccess(user, ["developer"]) && (
 					<>
@@ -347,17 +206,10 @@ export default function Sidebar({
 					onClick={toggleMinimize}
 					className={clsx(
 						"hover:text-mti-rose -xl:hidden flex cursor-pointer items-center gap-4 rounded-full p-4 text-black transition duration-300 ease-in-out",
-            isMinimized ? "w-fit" : "w-full min-w-[250px] px-8"
-          )}
-        >
-          {isMinimized ? (
-            <BsChevronBarRight size={24} />
-          ) : (
-            <BsChevronBarLeft size={24} />
-          )}
-          {!isMinimized && (
-            <span className="text-lg font-medium">Minimize</span>
-          )}
+						isMinimized ? "w-fit" : "w-full min-w-[250px] px-8",
+					)}>
+					{isMinimized ? <BsChevronBarRight size={24} /> : <BsChevronBarLeft size={24} />}
+					{!isMinimized && <span className="text-lg font-medium">Minimize</span>}
 				</div>
 				<div
 					role="button"
@@ -365,18 +217,13 @@ export default function Sidebar({
 					onClick={focusMode ? () => {} : logout}
 					className={clsx(
 						"hover:text-mti-rose flex cursor-pointer items-center gap-4 rounded-full p-4 text-black transition duration-300 ease-in-out",
-            isMinimized ? "w-fit" : "w-full min-w-[250px] px-8"
-          )}
-        >
+						isMinimized ? "w-fit" : "w-full min-w-[250px] px-8",
+					)}>
 					<RiLogoutBoxFill size={24} />
-          {!isMinimized && (
-            <span className="-xl:hidden text-lg font-medium">Log Out</span>
-          )}
+					{!isMinimized && <span className="-xl:hidden text-lg font-medium">Log Out</span>}
 				</div>
 			</div>
-      {focusMode && (
-        <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />
-      )}
+			{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
 		</section>
 	);
 }
--- a/src/components/Solutions/MultipleChoice.tsx
+++ b/src/components/Solutions/MultipleChoice.tsx
@@ -18,8 +18,6 @@ function Question({
 	const renderPrompt = (prompt: string) => {
 		return reactStringReplace(prompt, /((<u>)\w+(<\/u>))/g, (match) => {
 			const word = match.replaceAll("<u>", "").replaceAll("</u>", "");
-			console.log(word);
-
 			return word.length > 0 ? <u>{word}</u> : null;
 		});
 	};
--- a/src/pages/(generation)/LevelGeneration.tsx
+++ b/src/pages/(generation)/LevelGeneration.tsx
@@ -1,3 +1,5 @@
+import FillBlanksEdit from "@/components/Generation/fill.blanks.edit";
+import WriteBlankEdits from "@/components/Generation/write.blanks.edit";
 import Input from "@/components/Low/Input";
 import Select from "@/components/Low/Select";
 import {
@@ -8,6 +10,7 @@ import {
 	LevelPart,
 	FillBlanksExercise,
 	WriteBlanksExercise,
+	Exercise,
 } from "@/interfaces/exam";
 import useExamStore from "@/stores/examStore";
 import {getExamById} from "@/utils/exams";
@@ -42,8 +45,6 @@ const QuestionDisplay = ({question, onUpdate}: {question: MultipleChoiceQuestion
 	const renderPrompt = (prompt: string) => {
 		return reactStringReplace(prompt, /((<u>)\w+(<\/u>))/g, (match) => {
 			const word = match.replaceAll("<u>", "").replaceAll("</u>", "");
-			console.log(word);
-
 			return word.length > 0 ? <u>{word}</u> : null;
 		});
 	};
@@ -118,10 +119,67 @@ const TaskTab = ({section, setSection}: {section: LevelSection; setSection: (sec
 				questions: (x as MultipleChoiceExercise).questions.map((q) => (q.id === question.id ? question : q)),
 			})),
 		};
-		console.log(updatedExam);
 		setSection(updatedExam as any);
 	};

+	const renderExercise = (exercise: Exercise) => {
+		if (exercise.type === "multipleChoice")
+			return (
+				<div key={exercise.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="rounded-xl bg-white border border-ielts-level p-1 px-4 w-fit">{exercise.questions.length} questions</span>
+					</div>
+					<span>{exercise.prompt}</span>
+					<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} />
+						))}
+					</div>
+				</div>
+			);
+
+		if (exercise.type === "fillBlanks")
+			return (
+				<div key={exercise.id} className="w-full h-full flex flex-col gap-2">
+					<div className="flex gap-2">
+						<span className="text-xl font-semibold">Fill Blanks</span>
+					</div>
+					<span>{exercise.prompt}</span>
+					<FillBlanksEdit
+						exercise={exercise}
+						key={exercise.id}
+						updateExercise={(data: any) =>
+							setSection({
+								...section,
+								part: {...section.part!, exercises: section.part!.exercises.map((x) => (x.id === exercise.id ? {...x, ...data} : x))},
+							})
+						}
+					/>
+				</div>
+			);
+
+		if (exercise.type === "writeBlanks")
+			return (
+				<div key={exercise.id} className="w-full h-full flex flex-col gap-2">
+					<div className="flex gap-2">
+						<span className="text-xl font-semibold">Write Blanks</span>
+					</div>
+					<span>{exercise.prompt}</span>
+					<WriteBlankEdits
+						exercise={exercise}
+						key={exercise.id}
+						updateExercise={(data: any) =>
+							setSection({
+								...section,
+								part: {...section.part!, exercises: section.part!.exercises.map((x) => (x.id === exercise.id ? {...x, ...data} : x))},
+							})
+						}
+					/>
+				</div>
+			);
+	};
+
 	return (
 		<Tab.Panel className="w-full bg-ielts-level/20 min-h-[600px] h-full rounded-xl p-6 flex flex-col gap-4">
 			<div className="flex flex-col gap-4">
@@ -159,28 +217,8 @@ const TaskTab = ({section, setSection}: {section: LevelSection; setSection: (sec
 			)}
 			{section?.part && (
 				<div className="flex flex-col gap-2 w-full overflow-y-scroll scrollbar-hide h-full">
-					{section.part.exercises
-						.filter((x) => x.type === "multipleChoice")
-						.map((ex) => {
-							const exercise = ex as MultipleChoiceExercise;
-
-							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="rounded-xl bg-white border border-ielts-level p-1 px-4 w-fit">
-											{exercise.questions.length} questions
-										</span>
-									</div>
-									<span>{exercise.prompt}</span>
-									<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} />
-										))}
-									</div>
-								</div>
-							);
-						})}
+					{section.part.context && <div>{section.part.context}</div>}
+					{section.part.exercises.map(renderExercise)}
 				</div>
 			)}
 		</Tab.Panel>
@@ -237,6 +275,8 @@ const LevelGeneration = () => {
 			}
 		});

+		let newParts = [...parts];
+
 		axios
 			.post<{exercises: {[key: string]: any}}>("/api/exam/level/generate/level", {nr_exercises: numberOfParts, ...body})
 			.then((result) => {
@@ -270,22 +310,20 @@ const LevelGeneration = () => {
 									userSolutions: [],
 								};

-								setParts((prev) =>
-									prev.map((p, i) =>
+								const item = {
+									exercises: [exercise],
+								};
+
+								newParts = newParts.map((p, i) =>
 									i === index
 										? {
 												...p,
-													part: {
-														exercises: [exercise],
-													},
+												part: item,
 										  }
 										: p,
-									),
 								);

-								return {
-									exercises: [exercise],
-								};
+								return item;
 							}

 							if (part.type === "blank_space_text") {
@@ -300,22 +338,20 @@ const LevelGeneration = () => {
 									userSolutions: [],
 								};

-								setParts((prev) =>
-									prev.map((p, i) =>
+								const item = {
+									exercises: [exercise],
+								};
+
+								newParts = newParts.map((p, i) =>
 									i === index
 										? {
 												...p,
-													part: {
-														exercises: [exercise],
-													},
+												part: item,
 										  }
 										: p,
-									),
 								);

-								return {
-									exercises: [exercise],
-								};
+								return item;
 							}

 							const mcExercise: MultipleChoiceExercise = {
@@ -339,29 +375,26 @@ const LevelGeneration = () => {
 								userSolutions: [],
 							};

-							setParts((prev) =>
-								prev.map((p, i) =>
-									i === index
-										? {
-												...p,
-												part: {
-													context: currentExercise.text.content,
-													exercises: [mcExercise, wbExercise],
-												},
-										  }
-										: p,
-								),
-							);
-
-							return {
+							const item = {
 								context: currentExercise.text.content,
 								exercises: [mcExercise, wbExercise],
 							};
+
+							newParts = newParts.map((p, i) =>
+								i === index
+									? {
+											...p,
+											part: item,
+									  }
+									: p,
+							);
+
+							return item;
 						})
 						.filter((x) => !!x) as LevelPart[],
 				};

-				console.log(exam);
+				setParts(newParts);
 				setGeneratedExam(exam);
 			})
 			.finally(() => setIsLoading(false));
@@ -375,8 +408,13 @@ const LevelGeneration = () => {

 		setIsLoading(true);

+		const exam = {
+			...generatedExam,
+			parts: generatedExam.parts.map((p, i) => ({...p, exercises: parts[i].part!.exercises})),
+		};
+
 		axios
-			.post(`/api/exam/level`, generatedExam)
+			.post(`/api/exam/level`, exam)
 			.then((result) => {
 				playSound("sent");
 				console.log(`Generated Exam ID: ${result.data.id}`);
@@ -437,7 +475,10 @@ const LevelGeneration = () => {
 						<TaskTab
 							key={index}
 							section={parts[index]}
-							setSection={(part) => setParts((prev) => prev.map((x, i) => (i === index ? part : x)))}
+							setSection={(part) => {
+								console.log(part);
+								setParts((prev) => prev.map((x, i) => (i === index ? part : x)));
+							}}
 						/>
 					))}
 				</Tab.Panels>