- Adapted more of the design to be more responsive;

- Revamped some of the UserSolutions;
- Transformed the homepage chart to use actual dynamic values;
- Created an endpoint for the stats;

src/pages/api/login.ts

@@ -26,7 +26,7 @@ async function login(req: NextApiRequest, res: NextApiResponse) {
 
 			const user = docUser.data() as User;
 
-			req.session.user = user;
+			req.session.user = {...user, id: userId};
 			await req.session.save();
 
 			res.status(200).json({user: {...user, id: userId}});

src/pages/api/stats/index.ts

@@ -0,0 +1,47 @@
+// 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} from "firebase/firestore";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {Stat} from "@/interfaces/user";
+
+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.session.user;
+	const q = query(collection(db, "stats"), where("user", "==", user.id));
+
+	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 stats = req.body as Stat[];
+	await stats.forEach(async (stat) => await addDoc(collection(db, "stats"), stat));
+
+	res.status(200).json({ok: true});
+}

src/pages/exam/index.tsx

@@ -14,7 +14,7 @@ import Finish from "@/exams/Finish";
 import axios from "axios";
 import {withIronSessionSsr} from "iron-session/next";
 import {sessionOptions} from "@/lib/session";
-import {User} from "@/interfaces/user";
+import {Stat, User} from "@/interfaces/user";
 import Speaking from "@/exams/Speaking";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
@@ -37,11 +37,12 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 }, sessionOptions);
 
 export default function Page({user}: {user: User}) {
+	const [userSolutions, setUserSolutions] = useState<UserSolution[]>([]);
 	const [selectedModules, setSelectedModules] = useState<Module[]>([]);
+	const [hasBeenUploaded, setHasBeenUploaded] = useState(false);
+	const [showSolutions, setShowSolutions] = useState(false);
 	const [moduleIndex, setModuleIndex] = useState(0);
 	const [exam, setExam] = useState<Exam>();
-	const [userSolutions, setUserSolutions] = useState<UserSolution[]>([]);
-	const [showSolutions, setShowSolutions] = useState(false);
 	const [timer, setTimer] = useState(-1);
 
 	useEffect(() => {
@@ -54,6 +55,25 @@ export default function Page({user}: {user: User}) {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [selectedModules, moduleIndex]);
 
+	useEffect(() => {
+		(async () => {
+			if (selectedModules.length > 0 && moduleIndex >= selectedModules.length && !hasBeenUploaded) {
+				const stats: Stat[] = userSolutions.map((solution) => ({
+					...solution,
+					exam: solution.exam!,
+					module: solution.module!,
+					user: user.id,
+				}));
+
+				axios
+					.post<{ok: boolean}>("/api/stats", stats)
+					.then((response) => setHasBeenUploaded(response.data.ok))
+					.catch(() => setHasBeenUploaded(false));
+			}
+		})();
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [selectedModules, moduleIndex, hasBeenUploaded]);
+
 	useEffect(() => {
 		if (exam) {
 			setTimer(exam.minTimer * 60);
@@ -87,15 +107,15 @@ export default function Page({user}: {user: User}) {
 	};
 
 	const updateExamWithUserSolutions = (exam: Exam): Exam => {
-		const exercises = exam.exercises.map((x) => Object.assign(x, {userSolutions: userSolutions.find((y) => x.id === y.id)?.solutions}));
+		const exercises = exam.exercises.map((x) => Object.assign(x, {userSolutions: userSolutions.find((y) => x.id === y.exercise)?.solutions}));
 
 		return Object.assign(exam, exercises);
 	};
 
 	const onFinish = (solutions: UserSolution[]) => {
-		const solutionIds = solutions.map((x) => x.id);
+		const solutionIds = solutions.map((x) => x.exercise);
 
-		setUserSolutions((prev) => [...prev.filter((x) => !solutionIds.includes(x.id)), ...solutions]);
+		setUserSolutions((prev) => [...prev.filter((x) => !solutionIds.includes(x.exercise)), ...solutions]);
 		setModuleIndex((prev) => prev + 1);
 	};
 

src/pages/index.tsx

@@ -14,8 +14,11 @@ import JSON_RESULTS from "@/demo/user_results.json";
 
 import {withIronSessionSsr} from "iron-session/next";
 import {sessionOptions} from "@/lib/session";
-import {User} from "@/interfaces/user";
+import {Stat, User} from "@/interfaces/user";
 import {useEffect, useState} from "react";
+import useStats from "@/hooks/useStats";
+import {Module} from "@/interfaces";
+import {UserResults} from "@/interfaces/results";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -38,8 +41,46 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 
 export default function Home({user}: {user: User}) {
 	const [showEndExam, setShowEndExam] = useState(false);
+	const {stats, isLoading} = useStats();
 
 	useEffect(() => setShowEndExam(window.innerWidth <= 960), []);
+	useEffect(() => console.log(stats), [stats]);
+
+	const formatStatsToChart = (data: Stat[]): UserResults => {
+		const result: UserResults = {
+			reading: {
+				exams: [],
+				score: 0,
+				total: 0,
+			},
+			listening: {
+				exams: [],
+				score: 0,
+				total: 0,
+			},
+			writing: {
+				exams: [],
+				score: 0,
+				total: 0,
+			},
+			speaking: {
+				exams: [],
+				score: 0,
+				total: 0,
+			},
+		};
+
+		data.forEach((stat) => {
+			if (result[stat.module].exams)
+				result[stat.module] = {
+					exams: [...result[stat.module].exams.filter((x) => x !== stat.exam), stat.exam],
+					total: result[stat.module].score + (result[stat.module].exams.includes(stat.exam) ? 0 : 1),
+					score: result[stat.module].total + 1,
+				};
+		});
+
+		return result;
+	};
 
 	return (
 		<>
@@ -59,9 +100,11 @@ export default function Home({user}: {user: User}) {
 						<section className="w-full lg:w-1/2 h-full flex items-center">
 							<ProfileCard user={user} className="text-black self-start" />
 						</section>
-						<section className="w-full lg:w-1/3 h-full flex items-center justify-center">
-							<UserResultChart results={JSON_RESULTS} resultKey="total" label="Total exams" className="w-2/3" />
-						</section>
+						{!isLoading && stats && (
+							<section className="w-full lg:w-1/3 h-full flex items-center justify-center">
+								<UserResultChart results={formatStatsToChart(stats)} resultKey="total" label="Total exams" className="w-2/3" />
+							</section>
+						)}
 					</section>
 				</div>
 			</main>