- Adapted the exam to store all of its information to Zustand;

- Made it so, every time there is a change or every X seconds, it saves the session;

src/pages/(exam)/ExamPage.tsx

@@ -16,11 +16,12 @@ import {Exam, UserSolution, Variant} from "@/interfaces/exam";
 import {Stat} from "@/interfaces/user";
 import useExamStore from "@/stores/examStore";
 import {evaluateSpeakingAnswer, evaluateWritingAnswer} from "@/utils/evaluation";
-import {getExam} from "@/utils/exams";
+import {defaultExamUserSolutions, getExam} from "@/utils/exams";
 import axios from "axios";
 import {useRouter} from "next/router";
 import {toast, ToastContainer} from "react-toastify";
 import {v4 as uuidv4} from "uuid";
+import useSessions from "@/hooks/useSessions";
 
 interface Props {
 	page: "exams" | "exercises";
@@ -33,11 +34,15 @@ export default function ExamPage({page}: Props) {
 	const [showAbandonPopup, setShowAbandonPopup] = useState(false);
 	const [isEvaluationLoading, setIsEvaluationLoading] = useState(false);
 	const [statsAwaitingEvaluation, setStatsAwaitingEvaluation] = useState<string[]>([]);
+	const [timeSpent, setTimeSpent] = useState(0);
+
+	const partIndex = useExamStore((state) => state.partIndex);
+	const assignment = useExamStore((state) => state.assignment);
+	const initialTimeSpent = useExamStore((state) => state.timeSpent);
+	const exerciseIndex = useExamStore((state) => state.exerciseIndex);
 
-	const {assignment} = useExamStore((state) => state);
 	const {exam, setExam} = useExamStore((state) => state);
 	const {exams, setExams} = useExamStore((state) => state);
-	const {timeSpent, setTimeSpent} = useExamStore((state) => state);
 	const {sessionId, setSessionId} = useExamStore((state) => state);
 	const {moduleIndex, setModuleIndex} = useExamStore((state) => state);
 	const {userSolutions, setUserSolutions} = useExamStore((state) => state);
@@ -47,16 +52,56 @@ export default function ExamPage({page}: Props) {
 	const {user} = useUser({redirectTo: "/login"});
 	const router = useRouter();
 
-	useEffect(() => setSessionId(uuidv4()), [setSessionId]);
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	const saveSession = async () => {
+		await axios.post("/api/sessions", {
+			id: sessionId,
+			userSolutions,
+			moduleIndex,
+			selectedModules,
+			assignment,
+			timeSpent,
+			exams,
+			exam,
+			partIndex,
+			exerciseIndex,
+			user: user?.id,
+		});
+	};
+
+	useEffect(() => setTimeSpent((prev) => prev + initialTimeSpent), [initialTimeSpent]);
+
+	useEffect(() => {
+		if (userSolutions.length === 0 && exams.length > 0) {
+			const defaultSolutions = exams.map(defaultExamUserSolutions).flat();
+			setUserSolutions(defaultSolutions);
+		}
+	}, [exams, setUserSolutions, userSolutions]);
+
+	useEffect(() => {
+		if (sessionId.length > 0 && userSolutions.length > 0 && selectedModules.length > 0 && exams.length > 0 && !!exam && timeSpent > 0)
+			saveSession();
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [assignment, exam, exams, moduleIndex, selectedModules, sessionId, userSolutions, user, exerciseIndex, partIndex]);
+
+	useEffect(() => {
+		if (timeSpent % 20 === 0 && timeSpent > 0) saveSession();
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [timeSpent]);
+
+	useEffect(() => {
+		if (selectedModules.length > 0) {
+			setSessionId(uuidv4());
+		}
+	}, [setSessionId, selectedModules]);
 	useEffect(() => {
 		if (user?.type === "developer") console.log(exam);
 	}, [exam, user]);
 
 	useEffect(() => {
-		selectedModules.length > 0 && timeSpent === 0 && !showSolutions;
 		if (selectedModules.length > 0 && timeSpent === 0 && !showSolutions) {
 			const timerInterval = setInterval(() => {
-				setTimeSpent(timeSpent + 1);
+				setTimeSpent((prev) => prev + 1);
 			}, 1000);
 
 			return () => {

src/pages/_app.tsx

@@ -10,9 +10,10 @@ import {useRouter} from "next/router";
 import {useEffect} from "react";
 import useExamStore from "@/stores/examStore";
 import usePreferencesStore from "@/stores/preferencesStore";
+import axios from "axios";
 
 export default function App({Component, pageProps}: AppProps) {
-	const reset = useExamStore((state) => state.reset);
+	const {reset} = useExamStore((state) => state);
 	const setIsSidebarMinimized = usePreferencesStore((state) => state.setSidebarMinimized);
 
 	const router = useRouter();

src/pages/api/sessions/[id].ts

@@ -0,0 +1,53 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type {NextApiRequest, NextApiResponse} from "next";
+import {app} from "@/firebase";
+import {getFirestore, doc, getDoc, deleteDoc} from "firebase/firestore";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+	if (req.method === "GET") return get(req, res);
+	if (req.method === "DELETE") return del(req, res);
+}
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
+
+	const {id} = req.query as {id: string};
+
+	const docRef = doc(db, "sessions", id);
+	const docSnap = await getDoc(docRef);
+
+	if (docSnap.exists()) {
+		res.status(200).json({
+			id: docSnap.id,
+			...docSnap.data(),
+		});
+	} else {
+		res.status(404).json(undefined);
+	}
+}
+
+async function del(req: NextApiRequest, res: NextApiResponse) {
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
+
+	const {id} = req.query as {id: string};
+
+	const docRef = doc(db, "sessions", id);
+	const docSnap = await getDoc(docRef);
+
+	if (!docSnap.exists()) return res.status(404).json({ok: false});
+
+	await deleteDoc(docRef);
+	return res.status(200).json({ok: true});
+}

src/pages/api/sessions/index.ts

@@ -0,0 +1,46 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type {NextApiRequest, NextApiResponse} from "next";
+import {app} from "@/firebase";
+import {getFirestore, collection, getDocs, query, where, doc, setDoc, addDoc, getDoc} from "firebase/firestore";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+	if (req.method === "GET") return get(req, res);
+	if (req.method === "POST") return post(req, res);
+}
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
+
+	const {user} = req.query as {user?: string};
+
+	const q = user ? query(collection(db, "sessions"), where("user", "==", user)) : collection(db, "sessions");
+	const snapshot = await getDocs(q);
+
+	res.status(200).json(
+		snapshot.docs.map((doc) => ({
+			id: doc.id,
+			...doc.data(),
+		})),
+	);
+}
+
+async function post(req: NextApiRequest, res: NextApiResponse) {
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
+
+	const session = req.body;
+	await setDoc(doc(db, "sessions", session.id), session, {merge: true});
+
+	res.status(200).json({ok: true});
+}

src/pages/api/stats/index.ts

@@ -1,7 +1,7 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 import type {NextApiRequest, NextApiResponse} from "next";
 import {app} from "@/firebase";
-import {getFirestore, collection, getDocs, query, where, doc, setDoc, addDoc, getDoc} from "firebase/firestore";
+import {getFirestore, collection, getDocs, query, where, doc, setDoc, addDoc, getDoc, deleteDoc} from "firebase/firestore";
 import {withIronSessionApiRoute} from "iron-session/next";
 import {sessionOptions} from "@/lib/session";
 import {Stat} from "@/interfaces/user";
@@ -43,6 +43,10 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 
 	const stats = req.body as Stat[];
 	await stats.forEach(async (stat) => await setDoc(doc(db, "stats", stat.id), stat));
+	await stats.forEach(async (stat) => {
+		const sessionDoc = await getDoc(doc(db, "sessions", stat.session));
+		if (sessionDoc.exists()) await deleteDoc(sessionDoc.ref);
+	});
 
 	const groupedStatsByAssignment = groupBy(
 		stats.filter((x) => !!x.assignment),