From 74d3f30c93fd583a5d3b387c2d6e515e28f5d89f Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Tue, 23 Jan 2024 10:11:04 +0000
Subject: [PATCH] Added the ability to choose between partial and full exams

---
 src/components/Diagnostic.tsx                 |  2 +-
 src/exams/Selection.tsx                       | 46 +++++++---
 src/pages/(exam)/ExamPage.tsx                 |  8 +-
 src/pages/(generation)/SpeakingGeneration.tsx |  9 +-
 src/pages/api/exam/[module]/index.ts          | 11 +--
 src/utils/exams.be.ts                         | 83 +++++++++----------
 src/utils/exams.ts                            | 10 ++-
 7 files changed, 98 insertions(+), 71 deletions(-)

diff --git a/src/components/Diagnostic.tsx b/src/components/Diagnostic.tsx
index a221f1d2..f7b448f4 100644
--- a/src/components/Diagnostic.tsx
+++ b/src/components/Diagnostic.tsx
@@ -36,7 +36,7 @@ export default function Diagnostic({onFinish}: Props) {
 	};
 
 	const selectExam = () => {
-		const examPromises = MODULE_ARRAY.map((module) => getExam(module, true));
+		const examPromises = MODULE_ARRAY.map((module) => getExam(module, true, "partial"));
 
 		Promise.all(examPromises).then((exams) => {
 			if (exams.every((x) => !!x)) {
diff --git a/src/exams/Selection.tsx b/src/exams/Selection.tsx
index 2485bb70..02dcb681 100644
--- a/src/exams/Selection.tsx
+++ b/src/exams/Selection.tsx
@@ -12,17 +12,19 @@ import {calculateAverageLevel} from "@/utils/score";
 import {sortByModuleName} from "@/utils/moduleUtils";
 import {capitalize} from "lodash";
 import ProfileSummary from "@/components/ProfileSummary";
+import {Variant} from "@/interfaces/exam";
 
 interface Props {
 	user: User;
 	page: "exercises" | "exams";
-	onStart: (modules: Module[], avoidRepeated: boolean) => void;
+	onStart: (modules: Module[], avoidRepeated: boolean, variant: Variant) => void;
 	disableSelection?: boolean;
 }
 
 export default function Selection({user, page, onStart, disableSelection = false}: Props) {
 	const [selectedModules, setSelectedModules] = useState<Module[]>([]);
 	const [avoidRepeatedExams, setAvoidRepeatedExams] = useState(true);
+	const [variant, setVariant] = useState<Variant>("full");
 	const {stats} = useStats(user?.id);
 
 	const toggleModule = (module: Module) => {
@@ -202,20 +204,37 @@ export default function Selection({user, page, onStart, disableSelection = false
 					)}
 				</section>
 				<div className="flex w-full -md:flex-col -md:gap-4 -md:justify-center md:justify-between items-center">
-					<div
-						className="flex gap-3 items-center text-mti-gray-dim text-sm cursor-pointer tooltip w-full -md:justify-center"
-						data-tip="If possible, the platform will choose exams not yet done"
-						onClick={() => setAvoidRepeatedExams((prev) => !prev)}>
-						<input type="checkbox" className="hidden" />
+					<div className="flex flex-col gap-3 items-center w-full">
 						<div
-							className={clsx(
-								"w-6 h-6 rounded-md flex items-center justify-center border border-mti-purple-light bg-white",
-								"transition duration-300 ease-in-out",
-								avoidRepeatedExams && "!bg-mti-purple-light ",
-							)}>
-							<BsCheck color="white" className="w-full h-full" />
+							className="flex gap-3 items-center text-mti-gray-dim text-sm cursor-pointer w-full -md:justify-center"
+							onClick={() => setAvoidRepeatedExams((prev) => !prev)}>
+							<input type="checkbox" className="hidden" />
+							<div
+								className={clsx(
+									"w-6 h-6 rounded-md flex items-center justify-center border border-mti-purple-light bg-white",
+									"transition duration-300 ease-in-out",
+									avoidRepeatedExams && "!bg-mti-purple-light ",
+								)}>
+								<BsCheck color="white" className="w-full h-full" />
+							</div>
+							<span className="tooltip" data-tip="If possible, the platform will choose exams not yet done.">
+								Avoid Repeated Questions
+							</span>
+						</div>
+						<div
+							className="flex gap-3 items-center text-mti-gray-dim text-sm cursor-pointer  w-full -md:justify-center"
+							onClick={() => setVariant((prev) => (prev === "full" ? "partial" : "full"))}>
+							<input type="checkbox" className="hidden" />
+							<div
+								className={clsx(
+									"w-6 h-6 rounded-md flex items-center justify-center border border-mti-purple-light bg-white",
+									"transition duration-300 ease-in-out",
+									variant === "full" && "!bg-mti-purple-light ",
+								)}>
+								<BsCheck color="white" className="w-full h-full" />
+							</div>
+							<span>Full length exams</span>
 						</div>
-						<span>Avoid Repeated Questions</span>
 					</div>
 					<div className="tooltip w-full" data-tip={`Your screen size is too small to do ${page}`}>
 						<Button color="purple" className="px-12 w-full max-w-xs md:hidden" disabled>
@@ -227,6 +246,7 @@ export default function Selection({user, page, onStart, disableSelection = false
 							onStart(
 								!disableSelection ? selectedModules.sort(sortByModuleName) : ["reading", "listening", "writing", "speaking"],
 								avoidRepeatedExams,
+								variant,
 							)
 						}
 						color="purple"
diff --git a/src/pages/(exam)/ExamPage.tsx b/src/pages/(exam)/ExamPage.tsx
index 23b7c65e..27f15e18 100644
--- a/src/pages/(exam)/ExamPage.tsx
+++ b/src/pages/(exam)/ExamPage.tsx
@@ -5,7 +5,7 @@ import {Module} from "@/interfaces";
 
 import Selection from "@/exams/Selection";
 import Reading from "@/exams/Reading";
-import {Exam, InteractiveSpeakingExercise, SpeakingExercise, UserSolution, WritingExercise} from "@/interfaces/exam";
+import {Exam, InteractiveSpeakingExercise, SpeakingExercise, UserSolution, Variant, WritingExercise} from "@/interfaces/exam";
 import Listening from "@/exams/Listening";
 import Writing from "@/exams/Writing";
 import {ToastContainer, toast} from "react-toastify";
@@ -38,6 +38,7 @@ export default function ExamPage({page}: Props) {
 	const [avoidRepeated, setAvoidRepeated] = useState(false);
 	const [timeSpent, setTimeSpent] = useState(0);
 	const [statsAwaitingEvaluation, setStatsAwaitingEvaluation] = useState<string[]>([]);
+	const [variant, setVariant] = useState<Variant>("full");
 
 	const [exams, setExams] = useExamStore((state) => [state.exams, state.setExams]);
 	const [userSolutions, setUserSolutions] = useExamStore((state) => [state.userSolutions, state.setUserSolutions]);
@@ -84,7 +85,7 @@ export default function ExamPage({page}: Props) {
 	useEffect(() => {
 		(async () => {
 			if (selectedModules.length > 0 && exams.length === 0) {
-				const examPromises = selectedModules.map((module) => getExam(module, avoidRepeated));
+				const examPromises = selectedModules.map((module) => getExam(module, avoidRepeated, variant));
 				Promise.all(examPromises).then((values) => {
 					if (values.every((x) => !!x)) {
 						setExams(values.map((x) => x!));
@@ -253,10 +254,11 @@ export default function ExamPage({page}: Props) {
 					page={page}
 					user={user!}
 					disableSelection={page === "exams"}
-					onStart={(modules, avoid) => {
+					onStart={(modules: Module[], avoid: boolean, variant: Variant) => {
 						setModuleIndex(0);
 						setAvoidRepeated(avoid);
 						setSelectedModules(modules);
+						setVariant(variant);
 					}}
 				/>
 			);
diff --git a/src/pages/(generation)/SpeakingGeneration.tsx b/src/pages/(generation)/SpeakingGeneration.tsx
index 9c1d60b4..aca2bbe0 100644
--- a/src/pages/(generation)/SpeakingGeneration.tsx
+++ b/src/pages/(generation)/SpeakingGeneration.tsx
@@ -8,7 +8,7 @@ import {Tab} from "@headlessui/react";
 import axios from "axios";
 import clsx from "clsx";
 import {useRouter} from "next/router";
-import {useState} from "react";
+import {useEffect, useState} from "react";
 import {BsArrowRepeat, BsCheck} from "react-icons/bs";
 import {toast} from "react-toastify";
 
@@ -103,6 +103,11 @@ const SpeakingGeneration = () => {
 	const [isLoading, setIsLoading] = useState(false);
 	const [resultingExam, setResultingExam] = useState<SpeakingExam>();
 
+	useEffect(() => {
+		const parts = [part1, part2, part3].filter((x) => !!x);
+		setMinTimer(parts.length === 0 ? 5 : parts.length * 5);
+	}, [part1, part2, part3]);
+
 	const router = useRouter();
 
 	const setExams = useExamStore((state) => state.setExams);
@@ -162,7 +167,7 @@ const SpeakingGeneration = () => {
 				<Input
 					type="number"
 					name="minTimer"
-					onChange={(e) => setMinTimer(parseInt(e) < 15 ? 15 : parseInt(e))}
+					onChange={(e) => setMinTimer(parseInt(e) < 5 ? 5 : parseInt(e))}
 					value={minTimer}
 					className="max-w-[300px]"
 				/>
diff --git a/src/pages/api/exam/[module]/index.ts b/src/pages/api/exam/[module]/index.ts
index c48a3d78..4c19c4d5 100644
--- a/src/pages/api/exam/[module]/index.ts
+++ b/src/pages/api/exam/[module]/index.ts
@@ -4,8 +4,8 @@ import {app} from "@/firebase";
 import {getFirestore, setDoc, doc} from "firebase/firestore";
 import {withIronSessionApiRoute} from "iron-session/next";
 import {sessionOptions} from "@/lib/session";
-import {Exam} from "@/interfaces/exam";
-import { getExams } from "@/utils/exams.be";
+import {Exam, Variant} from "@/interfaces/exam";
+import {getExams} from "@/utils/exams.be";
 const db = getFirestore(app);
 
 export default withIronSessionApiRoute(handler, sessionOptions);
@@ -23,12 +23,9 @@ async function GET(req: NextApiRequest, res: NextApiResponse) {
 		return;
 	}
 
-	const {
-		module,
-		avoidRepeated,
-	} = req.query as {module: string; avoidRepeated: string};
+	const {module, avoidRepeated, variant} = req.query as {module: string; avoidRepeated: string; variant?: Variant};
 
-	const exams: Exam[] = await getExams(db, module, avoidRepeated, req.session.user.id);
+	const exams: Exam[] = await getExams(db, module, avoidRepeated, req.session.user.id, variant);
 	res.status(200).json(exams);
 }
 
diff --git a/src/utils/exams.be.ts b/src/utils/exams.be.ts
index 78ac1914..61d939b4 100644
--- a/src/utils/exams.be.ts
+++ b/src/utils/exams.be.ts
@@ -1,52 +1,51 @@
-import {
-  collection,
-  getDocs,
-  query,
-  where,
-  setDoc,
-  doc,
-  Firestore,
-} from "firebase/firestore";
-import { shuffle } from "lodash";
-import { Exam } from "@/interfaces/exam";
-import { Stat } from "@/interfaces/user";
+import {collection, getDocs, query, where, setDoc, doc, Firestore} from "firebase/firestore";
+import {shuffle} from "lodash";
+import {Exam, Variant} from "@/interfaces/exam";
+import {Stat} from "@/interfaces/user";
 
 export const getExams = async (
-  db: Firestore,
-  module: string,
-  avoidRepeated: string,
-  // added userId as due to assignments being set from the teacher to the student
-  // we need to make sure we are serving exams not executed by the user and not
-  // by the teacher that performed the request
-  userId: string | undefined
+	db: Firestore,
+	module: string,
+	avoidRepeated: string,
+	// added userId as due to assignments being set from the teacher to the student
+	// we need to make sure we are serving exams not executed by the user and not
+	// by the teacher that performed the request
+	userId: string | undefined,
+	variant?: Variant,
 ): Promise<Exam[]> => {
-  const moduleRef = collection(db, module);
+	const moduleRef = collection(db, module);
 
-  const q = query(moduleRef, where("isDiagnostic", "==", false));
-  const snapshot = await getDocs(q);
+	const q = query(moduleRef, where("isDiagnostic", "==", false));
+	const snapshot = await getDocs(q);
 
-  const exams: Exam[] = shuffle(
-    snapshot.docs.map((doc) => ({
-      id: doc.id,
-      ...doc.data(),
-      module,
-    }))
-  ) as Exam[];
+	const exams: Exam[] = filterByVariant(
+		shuffle(
+			snapshot.docs.map((doc) => ({
+				id: doc.id,
+				...doc.data(),
+				module,
+			})),
+		) as Exam[],
+		variant,
+	);
 
-  if (avoidRepeated === "true") {
-    const statsQ = query(collection(db, "stats"), where("user", "==", userId));
-    const statsSnapshot = await getDocs(statsQ);
+	if (avoidRepeated === "true") {
+		const statsQ = query(collection(db, "stats"), where("user", "==", userId));
+		const statsSnapshot = await getDocs(statsQ);
 
-    const stats: Stat[] = statsSnapshot.docs.map((doc) => ({
-      id: doc.id,
-      ...doc.data(),
-    })) as unknown as Stat[];
-    const filteredExams = exams.filter(
-      (x) => !stats.map((s) => s.exam).includes(x.id)
-    );
+		const stats: Stat[] = statsSnapshot.docs.map((doc) => ({
+			id: doc.id,
+			...doc.data(),
+		})) as unknown as Stat[];
+		const filteredExams = exams.filter((x) => !stats.map((s) => s.exam).includes(x.id));
 
-    return filteredExams.length > 0 ? filteredExams : exams;
-  }
+		return filteredExams.length > 0 ? filteredExams : exams;
+	}
 
-  return exams;
+	return exams;
+};
+
+const filterByVariant = (exams: Exam[], variant?: Variant) => {
+	const filtered = variant && variant === "partial" ? exams.filter((x) => x.variant === "partial") : exams;
+	return filtered.length > 0 ? filtered : exams;
 };
diff --git a/src/utils/exams.ts b/src/utils/exams.ts
index fec331d4..370d1173 100644
--- a/src/utils/exams.ts
+++ b/src/utils/exams.ts
@@ -1,9 +1,13 @@
 import {Module} from "@/interfaces";
-import {Exam, ReadingExam, ListeningExam, WritingExam, SpeakingExam, Exercise, UserSolution, LevelExam} from "@/interfaces/exam";
+import {Exam, ReadingExam, ListeningExam, WritingExam, SpeakingExam, Exercise, UserSolution, LevelExam, Variant} from "@/interfaces/exam";
 import axios from "axios";
 
-export const getExam = async (module: Module, avoidRepeated: boolean): Promise<Exam | undefined> => {
-	const examRequest = await axios<Exam[]>(`/api/exam/${module}?avoidRepeated=${avoidRepeated}`);
+export const getExam = async (module: Module, avoidRepeated: boolean, variant?: Variant): Promise<Exam | undefined> => {
+	const url = new URLSearchParams();
+	url.append("avoidRepeated", avoidRepeated.toString());
+	if (variant) url.append("variant", variant);
+
+	const examRequest = await axios<Exam[]>(`/api/exam/${module}?${url.toString()}`);
 	if (examRequest.status !== 200) {
 		return undefined;
 	}