Made sure the user can’t navigate to another page when they shouldn’t via the URL

src/pages/admin.tsx

@@ -11,6 +11,7 @@ import {Tab} from "@headlessui/react";
 import clsx from "clsx";
 import Lists from "./(admin)/Lists";
 import BatchCodeGenerator from "./(admin)/BatchCodeGenerator";
+import {shouldRedirectHome} from "@/utils/navigation.disabled";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -26,7 +27,7 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 		};
 	}
 
-	if (user.type !== "developer") {
+	if (shouldRedirectHome(user) || user.type !== "developer") {
 		res.setHeader("location", "/");
 		res.statusCode = 302;
 		res.end();

src/pages/exam.tsx

@@ -34,6 +34,7 @@ import AbandonPopup from "@/components/AbandonPopup";
 import {evaluateSpeakingAnswer, evaluateWritingAnswer} from "@/utils/evaluation";
 import {useRouter} from "next/router";
 import {getExam} from "@/utils/exams";
+import {shouldRedirectHome} from "@/utils/navigation.disabled";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -49,6 +50,17 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 		};
 	}
 
+	if (shouldRedirectHome(user)) {
+		res.setHeader("location", "/");
+		res.statusCode = 302;
+		res.end();
+		return {
+			props: {
+				user: null,
+			},
+		};
+	}
+
 	return {
 		props: {user: req.session.user},
 	};

src/pages/exercises.tsx

@@ -37,6 +37,7 @@ import AbandonPopup from "@/components/AbandonPopup";
 import {evaluateSpeakingAnswer, evaluateWritingAnswer} from "@/utils/evaluation";
 import {useRouter} from "next/router";
 import {getExam} from "@/utils/exams";
+import {shouldRedirectHome} from "@/utils/navigation.disabled";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -52,6 +53,17 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 		};
 	}
 
+	if (shouldRedirectHome(user)) {
+		res.setHeader("location", "/");
+		res.statusCode = 302;
+		res.end();
+		return {
+			props: {
+				user: null,
+			},
+		};
+	}
+
 	return {
 		props: {user: req.session.user},
 	};

src/pages/profile.tsx

@@ -17,6 +17,7 @@ import {EmploymentStatus, EMPLOYMENT_STATUS, Gender, User} from "@/interfaces/us
 import countryCodes from "country-codes-list";
 import {countries, TCountries} from "countries-list";
 import CountrySelect from "@/components/Low/CountrySelect";
+import {shouldRedirectHome} from "@/utils/navigation.disabled";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -32,6 +33,17 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 		};
 	}
 
+	if (shouldRedirectHome(user)) {
+		res.setHeader("location", "/");
+		res.statusCode = 302;
+		res.end();
+		return {
+			props: {
+				user: null,
+			},
+		};
+	}
+
 	return {
 		props: {user: req.session.user},
 	};

src/pages/record.tsx

@@ -21,6 +21,7 @@ import {calculateBandScore} from "@/utils/score";
 import {BsBook, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
 import Select from "react-select";
 import useGroups from "@/hooks/useGroups";
+import {shouldRedirectHome} from "@/utils/navigation.disabled";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -36,6 +37,17 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 		};
 	}
 
+	if (shouldRedirectHome(user)) {
+		res.setHeader("location", "/");
+		res.statusCode = 302;
+		res.end();
+		return {
+			props: {
+				user: null,
+			},
+		};
+	}
+
 	return {
 		props: {user: req.session.user},
 	};

src/pages/stats.tsx

@@ -21,6 +21,7 @@ import Select from "react-select";
 import useGroups from "@/hooks/useGroups";
 import DatePicker from "react-datepicker";
 import moment from "moment";
+import {shouldRedirectHome} from "@/utils/navigation.disabled";
 
 ChartJS.register(LinearScale, CategoryScale, PointElement, LineElement, LineController, Legend, Tooltip);
 
@@ -40,6 +41,17 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 		};
 	}
 
+	if (shouldRedirectHome(user)) {
+		res.setHeader("location", "/");
+		res.statusCode = 302;
+		res.end();
+		return {
+			props: {
+				user: null,
+			},
+		};
+	}
+
 	return {
 		props: {user: req.session.user},
 	};

src/pages/test.tsx

@@ -1,190 +0,0 @@
-/* eslint-disable @next/next/no-img-element */
-
-import Head from "next/head";
-import Navbar from "@/components/Navbar";
-import {ToastContainer} from "react-toastify";
-import {withIronSessionSsr} from "iron-session/next";
-import {sessionOptions} from "@/lib/session";
-import useUser from "@/hooks/useUser";
-import Sidebar from "@/components/Sidebar";
-import dynamic from "next/dynamic";
-import {BsCheckCircleFill, BsMicFill, BsPauseCircle, BsPauseFill, BsPlayCircle, BsPlayFill, BsTrashFill} from "react-icons/bs";
-import {useEffect, useState} from "react";
-import Layout from "@/components/High/Layout";
-
-const Waveform = dynamic(() => import("../components/Waveform"), {ssr: false});
-const ReactMediaRecorder = dynamic(() => import("react-media-recorder").then((mod) => mod.ReactMediaRecorder), {
-	ssr: false,
-});
-
-export const getServerSideProps = withIronSessionSsr(({req, res}) => {
-	const user = req.session.user;
-
-	if (!user || !user.isVerified) {
-		res.setHeader("location", "/login");
-		res.statusCode = 302;
-		res.end();
-		return {
-			props: {
-				user: null,
-			},
-		};
-	}
-
-	return {
-		props: {user: req.session.user},
-	};
-}, sessionOptions);
-
-export default function Page() {
-	const {user} = useUser({redirectTo: "/login"});
-	const [recordingDuration, setRecordingDuration] = useState(0);
-	const [isRecording, setIsRecording] = useState(false);
-	const [mediaBlob, setMediaBlob] = useState<string>();
-
-	useEffect(() => {
-		let recordingInterval: NodeJS.Timer | undefined = undefined;
-		if (isRecording) {
-			recordingInterval = setInterval(() => setRecordingDuration((prev) => prev + 1), 1000);
-		} else if (recordingInterval) {
-			clearInterval(recordingInterval);
-		}
-
-		return () => {
-			if (recordingInterval) clearInterval(recordingInterval);
-		};
-	}, [isRecording]);
-
-	return (
-		<>
-			<Head>
-				<title>Exam | EnCoach</title>
-				<meta
-					name="description"
-					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
-				/>
-				<meta name="viewport" content="width=device-width, initial-scale=1" />
-				<link rel="icon" href="/favicon.ico" />
-			</Head>
-			<ToastContainer />
-			{user && (
-				<Layout user={user}>
-					<ReactMediaRecorder
-						audio
-						onStop={(blob) => setMediaBlob(blob)}
-						render={({status, startRecording, stopRecording, pauseRecording, resumeRecording, clearBlobUrl, mediaBlobUrl}) => (
-							<div className="w-full p-4 px-8 bg-transparent border-2 border-mti-gray-platinum rounded-2xl flex-col gap-8 items-center">
-								<p className="text-base font-normal">Record your answer:</p>
-								<div className="flex gap-8 items-center justify-center py-8">
-									{status === "idle" && (
-										<>
-											<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
-											{status === "idle" && (
-												<BsMicFill
-													onClick={() => {
-														setRecordingDuration(0);
-														startRecording();
-														setIsRecording(true);
-													}}
-													className="h-5 w-5 text-mti-gray-cool cursor-pointer"
-												/>
-											)}
-										</>
-									)}
-									{status === "recording" && (
-										<>
-											<div className="flex gap-4 items-center">
-												<span className="text-xs w-9">
-													{Math.round(recordingDuration / 60)
-														.toString(10)
-														.padStart(2, "0")}
-													:
-													{Math.round(recordingDuration % 60)
-														.toString(10)
-														.padStart(2, "0")}
-												</span>
-											</div>
-											<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
-											<div className="flex gap-4 items-center">
-												<BsPauseCircle
-													onClick={() => {
-														setIsRecording(false);
-														pauseRecording();
-													}}
-													className="text-red-500 w-8 h-8 cursor-pointer"
-												/>
-												<BsCheckCircleFill
-													onClick={() => {
-														setIsRecording(false);
-														stopRecording();
-													}}
-													className="text-mti-purple-light w-8 h-8 cursor-pointer"
-												/>
-											</div>
-										</>
-									)}
-									{status === "paused" && (
-										<>
-											<div className="flex gap-4 items-center">
-												<span className="text-xs w-9">
-													{Math.floor(recordingDuration / 60)
-														.toString(10)
-														.padStart(2, "0")}
-													:
-													{Math.floor(recordingDuration % 60)
-														.toString(10)
-														.padStart(2, "0")}
-												</span>
-											</div>
-											<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
-											<div className="flex gap-4 items-center">
-												<BsPlayCircle
-													onClick={() => {
-														setIsRecording(true);
-														resumeRecording();
-													}}
-													className="text-mti-purple-light w-8 h-8 cursor-pointer"
-												/>
-												<BsCheckCircleFill
-													onClick={() => {
-														setIsRecording(false);
-														stopRecording();
-													}}
-													className="text-mti-purple-light w-8 h-8 cursor-pointer"
-												/>
-											</div>
-										</>
-									)}
-									{status === "stopped" && mediaBlobUrl && (
-										<>
-											<Waveform audio={mediaBlobUrl} waveColor="#FCDDEC" progressColor="#EF5DA8" />
-											<div className="flex gap-4 items-center">
-												<BsTrashFill
-													className="text-mti-gray-cool cursor-pointer w-5 h-5"
-													onClick={() => {
-														setRecordingDuration(0);
-														clearBlobUrl();
-													}}
-												/>
-
-												<BsMicFill
-													onClick={() => {
-														clearBlobUrl();
-														setRecordingDuration(0);
-														startRecording();
-														setIsRecording(true);
-													}}
-													className="h-5 w-5 text-mti-gray-cool cursor-pointer"
-												/>
-											</div>
-										</>
-									)}
-								</div>
-							</div>
-						)}
-					/>
-				</Layout>
-			)}
-		</>
-	);
-}

src/pages/users.tsx

@@ -1,101 +0,0 @@
-import {withIronSessionSsr} from "iron-session/next";
-import {sessionOptions} from "@/lib/session";
-import {Type, User} from "@/interfaces/user";
-import Head from "next/head";
-import {Avatar} from "primereact/avatar";
-import {useEffect, useState} from "react";
-import {FilterMatchMode, FilterOperator} from "primereact/api";
-import useUsers from "@/hooks/useUsers";
-import {DataTable} from "primereact/datatable";
-import {Column} from "primereact/column";
-import {capitalize} from "lodash";
-import {levelCalculator} from "@/resources/level";
-import {Dropdown} from "primereact/dropdown";
-
-export const getServerSideProps = withIronSessionSsr(({req, res}) => {
-	const user = req.session.user;
-
-	if (!user || !user.isVerified) {
-		res.setHeader("location", "/login");
-		res.statusCode = 302;
-		res.end();
-		return {
-			props: {
-				user: null,
-			},
-		};
-	}
-
-	return {
-		props: {user: req.session.user},
-	};
-}, sessionOptions);
-
-export default function Users({user}: {user: User}) {
-	const {users, isLoading} = useUsers();
-	const [filters] = useState({
-		name: {value: null, matchMode: FilterMatchMode.CONTAINS},
-		type: {value: null, matchMode: FilterMatchMode.EQUALS},
-	});
-
-	const userTypes: Type[] = ["admin", "developer", "owner", "student", "teacher"];
-
-	const typeRowFilterTemplate = (options: any) => {
-		return (
-			<Dropdown
-				value={options.value}
-				options={userTypes.map(capitalize)}
-				onChange={(e) => options.filterApplyCallback(e.value)}
-				placeholder="Select One"
-				className="p-column-filter"
-				showClear
-				style={{minWidth: "12rem"}}
-			/>
-		);
-	};
-
-	return (
-		<>
-			<Head>
-				<title>EnCoach | Users</title>
-				<meta
-					name="description"
-					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
-				/>
-				<meta name="viewport" content="width=device-width, initial-scale=1" />
-				<link rel="icon" href="/favicon.ico" />
-			</Head>
-			<main className="w-full h-full min-h-[100vh] flex flex-col items-center bg-neutral-100">
-				<div className="w-full h-full flex flex-col items-center justify-center p-4 relative">
-					<DataTable
-						dataKey="id"
-						filters={filters}
-						filterDisplay="row"
-						className="w-full h-full"
-						loading={isLoading}
-						value={users}
-						removableSort
-						stripedRows
-						paginator
-						rows={5}
-						rowsPerPageOptions={[5, 10, 25, 50]}
-						tableStyle={{minWidth: "50rem"}}>
-						<Column field="id" sortable header="ID" />
-						<Column field="name" sortable header="Name" filter filterPlaceholder="Search by name" />
-						<Column field="experience" sortable header="Experience" />
-						<Column field="experience" sortable header="Level" body={(data: User) => levelCalculator(data.experience).currentLevel} />
-						<Column
-							field="type"
-							showFilterMenu={false}
-							filter
-							filterElement={typeRowFilterTemplate}
-							sortable
-							header="Type"
-							body={(data: User) => capitalize(data.type)}
-						/>
-					</DataTable>
-				</div>
-			</main>
-		</>
-	);
-}

src/utils/navigation.disabled.ts

@@ -1,5 +1,17 @@
+import {User} from "@/interfaces/user";
+import moment from "moment";
+
 export const preventNavigation = (navDisabled: boolean, focusMode: boolean): boolean => {
 	if (navDisabled) return true;
 	if (focusMode) return true;
 	return false;
 };
+
+export const shouldRedirectHome = (user: User) => {
+	if (user.isDisabled) return true;
+	if (user.isFirstLogin) return true;
+	if (!user.demographicInformation) return true;
+	if (user.subscriptionExpirationDate && moment(new Date()).isAfter(user.subscriptionExpirationDate)) return true;
+
+	return false;
+};