ENCOA-268

src/components/PracticeModal.tsx

@@ -0,0 +1,26 @@
+import { useState } from "react";
+import Button from "./Low/Button";
+import Modal from "./Modal";
+
+interface Props {
+	open?: boolean
+}
+
+export default function PracticeModal({ open }: Props) {
+	const [isOpen, setIsOpen] = useState<boolean>(open || false)
+
+	return (
+		<Modal title="Practice Questions" isOpen={isOpen} onClose={() => setIsOpen(false)}>
+			<div className="py-4 flex flex-col gap-4 items-center">
+				<span className="w-full">
+					To acquaint yourself with the question types in this section, please respond to the practice questions provided.
+					<br />
+					<b>Do note that these questions are for practice purposes only and are not graded.</b>
+					<br />
+					You may choose to skip them if you prefer.
+				</span>
+				<Button onClick={() => setIsOpen(false)} className="w-full max-w-[200px]">Understood</Button>
+			</div>
+		</Modal>
+	)
+}

src/exams/Listening.tsx

@@ -14,6 +14,7 @@ import RenderAudioInstructionsPlayer from "./components/RenderAudioInstructionsP
 import RenderAudioPlayer from "./components/RenderAudioPlayer";
 import SectionNavbar from "./Navigation/SectionNavbar";
 import ProgressButtons from "./components/ProgressButtons";
+import PracticeModal from "@/components/PracticeModal";
 
 
 const Listening: React.FC<ExamProps<ListeningExam>> = ({ exam, showSolutions = false, preview = false }) => {
@@ -83,8 +84,11 @@ const Listening: React.FC<ExamProps<ListeningExam>> = ({ exam, showSolutions = f
 			userSolutions: userSolutions.find((x) => x.exercise === exercise.id)?.solutions || [],
 		}))
 
+		const hasPractice = exercises.some(e => e.isPractice)
+
 		return (
 			<div className="flex flex-col gap-4">
+				<PracticeModal open={hasPractice} />
 				{formattedExercises.map(e => showSolutions
 					? renderSolution(e)
 					: (!startNow && !showPartDivider && !isBetweenParts && !showSolutions) && renderExercise(e, exam.id, registerSolution, preview))}
@@ -93,8 +97,6 @@ const Listening: React.FC<ExamProps<ListeningExam>> = ({ exam, showSolutions = f
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [partIndex, startNow, showPartDivider, isBetweenParts, showSolutions]);
 
-
-
 	const confirmFinishModule = (keepGoing?: boolean) => {
 		if (!keepGoing) {
 			setShowBlankModal(false);

src/exams/Reading.tsx

@@ -17,6 +17,7 @@ import useExamStore, { usePersistentExamStore } from "@/stores/exam";
 import useExamTimer from "@/hooks/useExamTimer";
 import SectionNavbar from "./Navigation/SectionNavbar";
 import ProgressButtons from "./components/ProgressButtons";
+import PracticeModal from "@/components/PracticeModal";
 
 const Reading: React.FC<ExamProps<ReadingExam>> = ({ exam, showSolutions = false, preview = false }) => {
 	const updateTimers = useExamTimer(exam.module, preview || showSolutions);
@@ -50,6 +51,13 @@ const Reading: React.FC<ExamProps<ReadingExam>> = ({ exam, showSolutions = false
 		startNow
 	} = useExamNavigation({ exam, module: "reading", showBlankModal, setShowBlankModal, showSolutions, preview, disableBetweenParts: showSolutions });
 
+	const hasPractice = useMemo(() => {
+		if (partIndex > -1 && partIndex < exam.parts.length) {
+			return exam.parts[partIndex].exercises.some(e => e.isPractice)
+		}
+		return false
+	}, [partIndex, exam.parts])
+
 	useEffect(() => {
 		if (finalizeModule || timeIsUp) {
 			updateTimers();
@@ -146,6 +154,7 @@ const Reading: React.FC<ExamProps<ReadingExam>> = ({ exam, showSolutions = false
 					/>
 				</div> : (
 					<>
+						<PracticeModal key={partIndex} open={hasPractice} />
 						<div className="flex flex-col h-full w-full gap-8">
 							<BlankQuestionsModal isOpen={showBlankModal} onClose={confirmFinishModule} />
 							{/*<ReadingPassageModal text={exam.parts[partIndex].text} isOpen={showTextModal} onClose={() => setShowTextModal(false)} />*/}

src/exams/Speaking.tsx

@@ -13,6 +13,7 @@ import useExamNavigation from "./Navigation/useExamNavigation";
 import ProgressButtons from "./components/ProgressButtons";
 import { calculateExerciseIndexSpeaking } from "./utils/calculateExerciseIndex";
 import SectionNavbar from "./Navigation/SectionNavbar";
+import PracticeModal from "@/components/PracticeModal";
 
 
 const Speaking: React.FC<ExamProps<SpeakingExam>> = ({ exam, showSolutions = false, preview = false }) => {
@@ -33,6 +34,7 @@ const Speaking: React.FC<ExamProps<SpeakingExam>> = ({ exam, showSolutions = fal
 	const { finalizeModule, timeIsUp } = flags;
 
 	const timer = useRef(exam.minTimer - timeSpentCurrentModule / 60);
+	const hasPractice = useMemo(() => exam.exercises.some(e => e.isPractice), [exam.exercises])
 
 	const {
 		nextExercise, previousExercise,
@@ -110,6 +112,7 @@ const Speaking: React.FC<ExamProps<SpeakingExam>> = ({ exam, showSolutions = fal
 					onNext={handlePartDividerClick}
 				/> : (
 					<>
+						<PracticeModal open={hasPractice} />
 						{exam.exercises.length > 1 && <SectionNavbar
 							module="speaking"
 							sectionLabel="Part"

src/exams/Writing.tsx

@@ -11,6 +11,7 @@ import useExamTimer from "@/hooks/useExamTimer";
 import useExamNavigation from "./Navigation/useExamNavigation";
 import SectionNavbar from "./Navigation/SectionNavbar";
 import ProgressButtons from "./components/ProgressButtons";
+import PracticeModal from "@/components/PracticeModal";
 
 const Writing: React.FC<ExamProps<WritingExam>> = ({ exam, showSolutions = false, preview = false }) => {
 	const updateTimers = useExamTimer(exam.module, preview || showSolutions);
@@ -27,6 +28,7 @@ const Writing: React.FC<ExamProps<WritingExam>> = ({ exam, showSolutions = false
 	} = !preview ? examState : persistentExamState;
 
 	const timer = useRef(exam.minTimer - timeSpentCurrentModule / 60);
+	const hasPractice = useMemo(() => exam.exercises.some(e => e.isPractice), [exam.exercises])
 
 	const { finalizeModule, timeIsUp } = flags;
 	const { nextDisabled } = navigation;
@@ -96,6 +98,7 @@ const Writing: React.FC<ExamProps<WritingExam>> = ({ exam, showSolutions = false
 					onNext={handlePartDividerClick}
 				/> : (
 					<div className="flex flex-col h-full w-full gap-8 items-center">
+						<PracticeModal open={hasPractice} />
 						{exam.exercises.length > 1 && <SectionNavbar
 							module="writing"
 							sectionLabel="Part"

src/pages/(exam)/ExamPage.tsx

@@ -22,6 +22,7 @@ import ShortUniqueId from "short-unique-id";
 import { ExamProps } from "@/exams/types";
 import useExamStore from "@/stores/exam";
 import useEvaluationPolling from "@/hooks/useEvaluationPolling";
+import PracticeModal from "@/components/PracticeModal";
 
 interface Props {
 	page: "exams" | "exercises";

src/pages/api/sessions/index.ts

@@ -24,7 +24,10 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
 	const { user } = req.query as { user?: string };
 
 	const q = user ? { user: user } : {};
-	const sessions = await db.collection("sessions").find<Session>(q).limit(10).toArray();
+	const sessions = await db.collection("sessions").find<Session>({
+		...q,
+	}).limit(12).toArray();
+	console.log(sessions)
 
 	res.status(200).json(
 		sessions.filter((x) => {