- Solved the bug on Diagnostic where the exams weren't loading;

- Removed the Layout appearance and made it so the abandon popup appears on click and not on enter

src/components/AbandonPopup.tsx

@@ -7,18 +7,11 @@ interface Props {
 	abandonPopupTitle: string;
 	abandonPopupDescription: string;
 	abandonConfirmButtonText: string;
-	onAbandon: Function;
-    onCancel: Function;
+	onAbandon: () => void;
+	onCancel: () => void;
 }
 
-export default function AbandonPopup({
-    isOpen,
-    abandonPopupTitle,
-	abandonPopupDescription,
-	abandonConfirmButtonText,
-	onAbandon,
-    onCancel,
-}: Props) {
+export default function AbandonPopup({isOpen, abandonPopupTitle, abandonPopupDescription, abandonConfirmButtonText, onAbandon, onCancel}: Props) {
 	return (
 		<Transition show={isOpen} as={Fragment}>
 			<Dialog onClose={onCancel} className="relative z-50">

src/components/Diagnostic.tsx

@@ -10,7 +10,7 @@ import axios from "axios";
 import clsx from "clsx";
 import {capitalize} from "lodash";
 import {useRouter} from "next/router";
-import {useState} from "react";
+import {useEffect, useState} from "react";
 import {BsBook, BsChevronDown, BsHeadphones, BsMegaphone, BsPen, BsQuestionSquare} from "react-icons/bs";
 import {toast} from "react-toastify";
 import Button from "./Low/Button";
@@ -23,7 +23,7 @@ interface Props {
 const DIAGNOSTIC_EXAMS = [
 	["reading", "CurQtQoxWmHaJHeN0JW2"],
 	["listening", "Y6cMao8kUcVnPQOo6teV"],
-	["writing", "hbueuDaEZXV37EW7I12A"],
+	["writing", "B1J90R4Lmdn2dwjdHEwj"],
 	["speaking", "QVFm4pdcziJQZN2iUTDo"],
 ];
 
@@ -49,7 +49,7 @@ export default function Diagnostic({onFinish}: Props) {
 			if (exams.every((x) => !!x)) {
 				setExams(exams.map((x) => x!));
 				setSelectedModules(exams.map((x) => x!.module));
-				router.push("/exam");
+				router.push("/exercises");
 			}
 		});
 	};
@@ -58,7 +58,7 @@ export default function Diagnostic({onFinish}: Props) {
 		axios
 			.patch("/api/users/update", {
 				focus,
-				levels: Object.values(levels).includes(-1) ? {reading: -1, listening: -1, writing: -1, speaking: -1} : levels,
+				levels: Object.values(levels).includes(-1) ? {reading: 0, listening: 0, writing: 0, speaking: 0} : levels,
 				desiredLevels,
 				isFirstLogin: false,
 			})

src/components/FocusLayer.tsx

@@ -1,13 +1,9 @@
 import {useEffect, useState} from "react";
 
 interface Props {
-	onFocusLayerMouseEnter: Function,
+	onFocusLayerMouseEnter?: () => void;
 }
 
-export default function FocusLayer({
-	onFocusLayerMouseEnter,
-}: Props) {
-	return (
-		<div className="bg-gray-700 bg-opacity-30 absolute top-0 left-0 bottom-0 right-0" onMouseEnter={onFocusLayerMouseEnter}/>
-	);
+export default function FocusLayer({onFocusLayerMouseEnter}: Props) {
+	return <div className="absolute top-0 left-0 bottom-0 right-0" onMouseDown={onFocusLayerMouseEnter} />;
 }

src/components/High/Layout.tsx

@@ -9,18 +9,18 @@ interface Props {
 	children: React.ReactNode;
 	className?: string;
 	navDisabled?: boolean;
-	focusMode?: boolean
-	onFocusLayerMouseEnter?: Function;
+	focusMode?: boolean;
+	onFocusLayerMouseEnter?: () => void;
 }
 
-export default function Layout({user, children, className, navDisabled = false, focusMode = false, onFocusLayerMouseEnter }: Props) {
+export default function Layout({user, children, className, navDisabled = false, focusMode = false, onFocusLayerMouseEnter}: Props) {
 	const router = useRouter();
 
 	return (
 		<main className="w-full min-h-full h-screen flex flex-col bg-mti-gray-smoke">
 			<Navbar user={user} navDisabled={navDisabled} focusMode={focusMode} onFocusLayerMouseEnter={onFocusLayerMouseEnter} />
 			<div className="h-full w-full flex gap-2">
-				<Sidebar path={router.pathname} navDisabled={navDisabled} focusMode={focusMode} onFocusLayerMouseEnter={onFocusLayerMouseEnter}/>
+				<Sidebar path={router.pathname} navDisabled={navDisabled} focusMode={focusMode} onFocusLayerMouseEnter={onFocusLayerMouseEnter} />
 				<div
 					className={clsx(
 						"w-5/6 min-h-full h-fit mr-8 bg-white shadow-md rounded-2xl p-12 pb-8 flex flex-col gap-12 relative overflow-hidden mt-2",

src/components/Navbar.tsx

@@ -1,15 +1,14 @@
 import {User} from "@/interfaces/user";
 import Link from "next/link";
 import {Avatar} from "primereact/avatar";
-import FocusLayer from '@/components/FocusLayer';
-import { preventNavigation } from "@/utils/navigation.disabled";
-
+import FocusLayer from "@/components/FocusLayer";
+import {preventNavigation} from "@/utils/navigation.disabled";
 
 interface Props {
 	user: User;
 	navDisabled?: boolean;
 	focusMode?: boolean;
-	onFocusLayerMouseEnter?: Function;
+	onFocusLayerMouseEnter?: () => void;
 }
 
 /* eslint-disable @next/next/no-img-element */
@@ -26,7 +25,7 @@ export default function Navbar({user, navDisabled = false, focusMode = false, on
 					<span className="text-right">{user.name}</span>
 				</Link>
 			</div>
-			{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter}/>}
+			{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
 		</header>
 	);
 }

src/pages/exam.tsx

@@ -321,21 +321,18 @@ export default function Page() {
 					user={user}
 					className="justify-between"
 					focusMode={selectedModules.length !== 0}
-					onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}
-					>
+					onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}>
 					<>
 						{renderScreen()}
 						<AbandonPopup
 							isOpen={showAbandonPopup}
-							abandonPopupTitle="Leave Exam"
-							abandonPopupDescription="Are you sure you want to leave the exam? You will lose all your progress."
+							abandonPopupTitle="Leave Exercise"
+							abandonPopupDescription="Are you sure you want to leave the exercise? You will lose all your progress."
 							abandonConfirmButtonText="Confirm"
 							onAbandon={() => {
-								console.log('TODO: Handle Abandon');
 								setExam(undefined);
 								setSelectedModules([]);
-								setShowAbandonPopup(false)
-								return true;
+								setShowAbandonPopup(false);
 							}}
 							onCancel={() => setShowAbandonPopup(false)}
 						/>

src/pages/exercises.tsx

@@ -323,21 +323,18 @@ export default function Page() {
 					user={user}
 					className="justify-between"
 					focusMode={selectedModules.length !== 0}
-					onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}
-				>
+					onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}>
 					<>
 						{renderScreen()}
 						<AbandonPopup
 							isOpen={showAbandonPopup}
-
 							abandonPopupTitle="Leave Exercise"
 							abandonPopupDescription="Are you sure you want to leave the exercise? You will lose all your progress."
 							abandonConfirmButtonText="Confirm"
 							onAbandon={() => {
 								setExam(undefined);
 								setSelectedModules([]);
-									setShowAbandonPopup(false)
-									return true;
+								setShowAbandonPopup(false);
 							}}
 							onCancel={() => setShowAbandonPopup(false)}
 						/>