Made it so the pages update the user when loading

src/pages/exam/index.tsx

@@ -17,6 +17,7 @@ import {sessionOptions} from "@/lib/session";
 import {Stat, User} from "@/interfaces/user";
 import Speaking from "@/exams/Speaking";
 import {v4 as uuidv4} from "uuid";
+import useUser from "@/hooks/useUser";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -37,7 +38,7 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	};
 }, sessionOptions);
 
-export default function Page({user}: {user: User}) {
+export default function Page() {
 	const [userSolutions, setUserSolutions] = useState<UserSolution[]>([]);
 	const [selectedModules, setSelectedModules] = useState<Module[]>([]);
 	const [hasBeenUploaded, setHasBeenUploaded] = useState(false);
@@ -47,6 +48,8 @@ export default function Page({user}: {user: User}) {
 	const [exam, setExam] = useState<Exam>();
 	const [timer, setTimer] = useState(-1);
 
+	const {user} = useUser({redirectTo: "/login"});
+
 	useEffect(() => setSessionId(uuidv4()), []);
 
 	useEffect(() => {
@@ -67,7 +70,7 @@ export default function Page({user}: {user: User}) {
 					session: sessionId,
 					exam: solution.exam!,
 					module: solution.module!,
-					user: user.id,
+					user: user?.id || "",
 				}));
 
 				axios
@@ -126,13 +129,13 @@ export default function Page({user}: {user: User}) {
 
 	const renderScreen = () => {
 		if (selectedModules.length === 0) {
-			return <Selection user={user} onStart={setSelectedModules} />;
+			return <Selection user={user!} onStart={setSelectedModules} />;
 		}
 
 		if (moduleIndex >= selectedModules.length) {
 			return (
 				<Finish
-					user={user}
+					user={user!}
 					modules={selectedModules}
 					onViewResults={() => {
 						setShowSolutions(true);
@@ -184,10 +187,12 @@ export default function Page({user}: {user: User}) {
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
 			<ToastContainer />
-			<main className="w-full h-full min-h-[100vh] flex flex-col items-center bg-neutral-100 text-black pb-4 gap-4">
-				<Navbar profilePicture={user.profilePicture} timer={exam ? timer : undefined} />
-				{renderScreen()}
-			</main>
+			{user && (
+				<main className="w-full h-full min-h-[100vh] flex flex-col items-center bg-neutral-100 text-black pb-4 gap-4">
+					<Navbar profilePicture={user.profilePicture} timer={exam ? timer : undefined} />
+					{renderScreen()}
+				</main>
+			)}
 		</>
 	);
 }