Merge with develop

2024-11-06 10:59:26 +00:00
parent b50913eda8 f686985c6e
commit b5ac908d09
135 changed files with 9517 additions and 3617 deletions
--- a/src/exams/Selection.tsx
+++ b/src/exams/Selection.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @next/next/no-img-element */
-import {useState} from "react";
+import {useMemo, useState} from "react";
 import {Module} from "@/interfaces";
 import clsx from "clsx";
 import {Stat, User} from "@/interfaces/user";
@@ -22,10 +22,9 @@ interface Props {
 	user: User;
 	page: "exercises" | "exams";
 	onStart: (modules: Module[], avoidRepeated: boolean, variant: Variant) => void;
-	disableSelection?: boolean;
 }

-export default function Selection({user, page, onStart, disableSelection = false}: Props) {
+export default function Selection({user, page, onStart}: Props) {
 	const [selectedModules, setSelectedModules] = useState<Module[]>([]);
 	const [avoidRepeatedExams, setAvoidRepeatedExams] = useState(true);
 	const [variant, setVariant] = useState<Variant>("full");
@@ -40,6 +39,10 @@ export default function Selection({user, page, onStart, disableSelection = false
 		setSelectedModules((prev) => (prev.includes(module) ? modules : [...modules, module]));
 	};

+	const isCompleteExam = useMemo(() =>
+		["reading", "listening", "writing", "speaking"].every(m => selectedModules.includes(m as Module)), [selectedModules]
+	)
+
 	const loadSession = async (session: Session) => {
 		state.setShuffles(session.userSolutions.map((x) => ({exerciseID: x.exercise, shuffles: x.shuffleMaps ? x.shuffleMaps : []})));
 		state.setSelectedModules(session.selectedModules);
@@ -146,10 +149,10 @@ export default function Selection({user, page, onStart, disableSelection = false

 				<section className="-lg:flex-col -lg:items-center -lg:gap-12 mt-4 flex w-full justify-between gap-8">
 					<div
-						onClick={!disableSelection && !selectedModules.includes("level") ? () => toggleModule("reading") : undefined}
+						onClick={!selectedModules.includes("level") ? () => toggleModule("reading") : undefined}
 						className={clsx(
 							"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
-							selectedModules.includes("reading") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
+							selectedModules.includes("reading") ? "border-mti-purple-light" : "border-mti-gray-platinum",
 						)}>
 						<div className="bg-ielts-reading absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
 							<BsBook className="h-7 w-7 text-white" />
@@ -158,19 +161,19 @@ export default function Selection({user, page, onStart, disableSelection = false
 						<p className="text-left text-xs">
 							Expand your vocabulary, improve your reading comprehension and improve your ability to interpret texts in English.
 						</p>
-						{!selectedModules.includes("reading") && !selectedModules.includes("level") && !disableSelection && (
+						{!selectedModules.includes("reading") && !selectedModules.includes("level") && (
 							<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
 						)}
-						{(selectedModules.includes("reading") || disableSelection) && (
+						{(selectedModules.includes("reading")) && (
 							<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
 						)}
 						{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />}
 					</div>
 					<div
-						onClick={!disableSelection && !selectedModules.includes("level") ? () => toggleModule("listening") : undefined}
+						onClick={!selectedModules.includes("level") ? () => toggleModule("listening") : undefined}
 						className={clsx(
 							"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
-							selectedModules.includes("listening") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
+							selectedModules.includes("listening") ? "border-mti-purple-light" : "border-mti-gray-platinum",
 						)}>
 						<div className="bg-ielts-listening absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
 							<BsHeadphones className="h-7 w-7 text-white" />
@@ -179,19 +182,19 @@ export default function Selection({user, page, onStart, disableSelection = false
 						<p className="text-left text-xs">
 							Improve your ability to follow conversations in English and your ability to understand different accents and intonations.
 						</p>
-						{!selectedModules.includes("listening") && !selectedModules.includes("level") && !disableSelection && (
+						{!selectedModules.includes("listening") && !selectedModules.includes("level") && (
 							<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
 						)}
-						{(selectedModules.includes("listening") || disableSelection) && (
+						{(selectedModules.includes("listening")) && (
 							<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
 						)}
 						{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />}
 					</div>
 					<div
-						onClick={!disableSelection && !selectedModules.includes("level") ? () => toggleModule("writing") : undefined}
+						onClick={!selectedModules.includes("level") ? () => toggleModule("writing") : undefined}
 						className={clsx(
 							"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
-							selectedModules.includes("writing") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
+							selectedModules.includes("writing") ? "border-mti-purple-light" : "border-mti-gray-platinum",
 						)}>
 						<div className="bg-ielts-writing absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
 							<BsPen className="h-7 w-7 text-white" />
@@ -200,19 +203,19 @@ export default function Selection({user, page, onStart, disableSelection = false
 						<p className="text-left text-xs">
 							Allow you to practice writing in a variety of formats, from simple paragraphs to complex essays.
 						</p>
-						{!selectedModules.includes("writing") && !selectedModules.includes("level") && !disableSelection && (
+						{!selectedModules.includes("writing") && !selectedModules.includes("level") && (
 							<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
 						)}
-						{(selectedModules.includes("writing") || disableSelection) && (
+						{(selectedModules.includes("writing")) && (
 							<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
 						)}
 						{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />}
 					</div>
 					<div
-						onClick={!disableSelection && !selectedModules.includes("level") ? () => toggleModule("speaking") : undefined}
+						onClick={!selectedModules.includes("level") ? () => toggleModule("speaking") : undefined}
 						className={clsx(
 							"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
-							selectedModules.includes("speaking") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
+							selectedModules.includes("speaking") ? "border-mti-purple-light" : "border-mti-gray-platinum",
 						)}>
 						<div className="bg-ielts-speaking absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
 							<BsMegaphone className="h-7 w-7 text-white" />
@@ -221,37 +224,35 @@ export default function Selection({user, page, onStart, disableSelection = false
 						<p className="text-left text-xs">
 							You&apos;ll have access to interactive dialogs, pronunciation exercises and speech recordings.
 						</p>
-						{!selectedModules.includes("speaking") && !selectedModules.includes("level") && !disableSelection && (
+						{!selectedModules.includes("speaking") && !selectedModules.includes("level") && (
 							<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
 						)}
-						{(selectedModules.includes("speaking") || disableSelection) && (
+						{(selectedModules.includes("speaking")) && (
 							<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
 						)}
 						{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />}
 					</div>
-					{!disableSelection && (
-						<div
-							onClick={selectedModules.length === 0 || selectedModules.includes("level") ? () => toggleModule("level") : undefined}
-							className={clsx(
-								"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
-								selectedModules.includes("level") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
-							)}>
-							<div className="bg-ielts-level absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
-								<BsClipboard className="h-7 w-7 text-white" />
-							</div>
-							<span className="font-semibold">Level:</span>
-							<p className="text-left text-xs">You&apos;ll be able to test your english level with multiple choice questions.</p>
-							{!selectedModules.includes("level") && selectedModules.length === 0 && !disableSelection && (
-								<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
-							)}
-							{(selectedModules.includes("level") || disableSelection) && (
-								<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
-							)}
-							{!selectedModules.includes("level") && selectedModules.length > 0 && (
-								<BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />
-							)}
+					<div
+						onClick={selectedModules.length === 0 || selectedModules.includes("level") ? () => toggleModule("level") : undefined}
+						className={clsx(
+							"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
+							selectedModules.includes("level") ? "border-mti-purple-light" : "border-mti-gray-platinum",
+						)}>
+						<div className="bg-ielts-level absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
+							<BsClipboard className="h-7 w-7 text-white" />
 						</div>
-					)}
+						<span className="font-semibold">Level:</span>
+						<p className="text-left text-xs">You&apos;ll be able to test your english level with multiple choice questions.</p>
+						{!selectedModules.includes("level") && selectedModules.length === 0 && (
+							<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
+						)}
+						{(selectedModules.includes("level")) && (
+							<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
+						)}
+						{!selectedModules.includes("level") && selectedModules.length > 0 && (
+							<BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />
+						)}
+					</div>
 				</section>
 				<div className="-md:flex-col -md:gap-4 -md:justify-center flex w-full items-center md:justify-between">
 					<div className="flex w-full flex-col items-center gap-3">
@@ -291,19 +292,29 @@ export default function Selection({user, page, onStart, disableSelection = false
 							Start Exam
 						</Button>
 					</div>
-					<Button
-						onClick={() =>
-							onStart(
-								!disableSelection ? selectedModules.sort(sortByModuleName) : ["reading", "listening", "writing", "speaking"],
-								avoidRepeatedExams,
-								variant,
-							)
-						}
-						color="purple"
-						className="-md:hidden w-full max-w-xs px-12 md:self-end"
-						disabled={selectedModules.length === 0 && !disableSelection}>
-						Start Exam
-					</Button>
+					<div className="flex items-center gap-4 w-full">
+						<Button
+							color="green"
+							variant={isCompleteExam ? "solid" : "outline"}
+							onClick={() => isCompleteExam ? setSelectedModules([]) : setSelectedModules(["reading", "listening", "writing", "speaking"])}
+							className="-md:hidden w-full max-w-xs px-12 md:self-end"
+						>
+								Complete Exam
+						</Button>
+						<Button
+							onClick={() =>
+								onStart(
+									selectedModules.sort(sortByModuleName),
+									avoidRepeatedExams,
+									variant,
+								)
+							}
+							color="purple"
+							className="-md:hidden w-full max-w-xs px-12 md:self-end"
+							disabled={selectedModules.length === 0}>
+							Start Exam
+						</Button>
+					</div>
 				</div>
 			</div>
 		</>
--- a/src/exams/Speaking.tsx
+++ b/src/exams/Speaking.tsx
@@ -27,6 +27,12 @@ export default function Speaking({exam, showSolutions = false, onFinish}: Props)
 	const {hasExamEnded, setHasExamEnded} = useExamStore((state) => state);
 	const {exerciseIndex, setExerciseIndex} = useExamStore((state) => state);

+	useEffect(() => {
+		if (hasExamEnded && exerciseIndex === -1) {
+			setExerciseIndex(exerciseIndex + 1);
+		}
+	}, [hasExamEnded, exerciseIndex, setExerciseIndex]);
+
 	const scrollToTop = () => Array.from(document.getElementsByTagName("body")).forEach((body) => body.scrollTo(0, 0));

 	const nextExercise = (solution?: UserSolution) => {
--- a/src/exams/Writing.tsx
+++ b/src/exams/Writing.tsx
@@ -32,6 +32,12 @@ export default function Writing({ exam, showSolutions = false, preview = false,
 	const [seenParts, setSeenParts] = useState<Set<number>>(new Set(showSolutions ? exam.exercises.map((_, index) => index) : []));
 	const [showPartDivider, setShowPartDivider] = useState<boolean>(typeof exam.exercises[0].intro === "string" && exam.exercises[0].intro !== "");

+	useEffect(() => {
+		if (hasExamEnded && exerciseIndex === -1) {
+			setExerciseIndex(exerciseIndex + 1);
+		}
+	}, [hasExamEnded, exerciseIndex, setExerciseIndex]);
+
 	const scrollToTop = () => Array.from(document.getElementsByTagName("body")).forEach((body) => body.scrollTo(0, 0));

 	useEffect(() => {