- 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;

package.json

@@ -44,6 +44,7 @@
   },
   "devDependencies": {
     "@types/lodash": "^4.14.191",
+    "@wixc3/react-board": "^2.2.0",
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.21",
     "tailwindcss": "^3.2.4"

src/components/Exercises/FillBlanks.tsx

@@ -70,7 +70,7 @@ function WordsPopout({words, isOpen, onCancel, onAnswer}: WordsPopoutProps) {
 	);
 }
 
-export default function FillBlanks({id, allowRepetition, prompt, solutions, text, words, onNext, onBack}: FillBlanksExercise & CommonProps) {
+export default function FillBlanks({id, allowRepetition, type, prompt, solutions, text, words, onNext, onBack}: FillBlanksExercise & CommonProps) {
 	const [userSolutions, setUserSolutions] = useState<{id: string; solution: string}[]>([]);
 	const [currentBlankId, setCurrentBlankId] = useState<string>();
 
@@ -128,7 +128,7 @@ export default function FillBlanks({id, allowRepetition, prompt, solutions, text
 				</span>
 			</div>
 
-			<div className="self-end flex flex-col items-center md:items-start md:flex-row gap-8">
+			<div className="self-end flex flex-col-reverse items-center w-full md:justify-between md:items-start md:flex-row gap-8">
 				<button className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)} onClick={onBack}>
 					<div className="absolute left-4">
 						<Icon path={mdiArrowLeft} color="white" size={1} />
@@ -137,7 +137,7 @@ export default function FillBlanks({id, allowRepetition, prompt, solutions, text
 				</button>
 				<button
 					className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}
-					onClick={() => onNext({id, solutions: userSolutions, score: calculateScore()})}>
+					onClick={() => onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type})}>
 					Next
 					<div className="absolute right-4">
 						<Icon path={mdiArrowRight} color="white" size={1} />

src/components/Exercises/MatchSentences.tsx

@@ -3,11 +3,11 @@ import {MatchSentencesExercise} from "@/interfaces/exam";
 import {mdiArrowLeft, mdiArrowRight} from "@mdi/js";
 import Icon from "@mdi/react";
 import clsx from "clsx";
-import {useState} from "react";
+import {Fragment, useState} from "react";
 import LineTo from "react-lineto";
 import {CommonProps} from ".";
 
-export default function MatchSentences({id, options, prompt, sentences, onNext, onBack}: MatchSentencesExercise & CommonProps) {
+export default function MatchSentences({id, options, type, prompt, sentences, onNext, onBack}: MatchSentencesExercise & CommonProps) {
 	const [selectedQuestion, setSelectedQuestion] = useState<string>();
 	const [userSolutions, setUserSolutions] = useState<{question: string; option: string}[]>([]);
 
@@ -31,7 +31,14 @@ export default function MatchSentences({id, options, prompt, sentences, onNext,
 	return (
 		<>
 			<div className="flex flex-col items-center gap-8">
-				<span className="text-lg font-medium text-center px-48">{prompt}</span>
+				<span className="text-base md:text-lg font-medium text-center px-2 md:px-4 lg:px-48">
+					{prompt.split("\\n").map((line, index) => (
+						<Fragment key={index}>
+							{line}
+							<br />
+						</Fragment>
+					))}
+				</span>
 				<div className="grid grid-cols-2 gap-16 place-items-center">
 					<div className="flex flex-col gap-1">
 						{sentences.map(({sentence, id, color}) => (
@@ -85,7 +92,7 @@ export default function MatchSentences({id, options, prompt, sentences, onNext,
 				</div>
 			</div>
 
-			<div className="self-end flex gap-8">
+			<div className="self-end flex flex-col-reverse items-center w-full md:justify-between md:items-start md:flex-row gap-8">
 				<button className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)} onClick={onBack}>
 					<div className="absolute left-4">
 						<Icon path={mdiArrowLeft} color="white" size={1} />
@@ -94,7 +101,7 @@ export default function MatchSentences({id, options, prompt, sentences, onNext,
 				</button>
 				<button
 					className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}
-					onClick={() => onNext({id, solutions: userSolutions, score: calculateScore()})}>
+					onClick={() => onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type})}>
 					Next
 					<div className="absolute right-4">
 						<Icon path={mdiArrowRight} color="white" size={1} />

src/components/Exercises/MultipleChoice.tsx

@@ -83,7 +83,7 @@ function Question({
 	);
 }
 
-export default function MultipleChoice({id, prompt, questions, onNext, onBack}: MultipleChoiceExercise & CommonProps) {
+export default function MultipleChoice({id, prompt, type, questions, onNext, onBack}: MultipleChoiceExercise & CommonProps) {
 	const [userSolutions, setUserSolutions] = useState<{question: string; option: string}[]>([]);
 	const [questionIndex, setQuestionIndex] = useState(0);
 
@@ -101,7 +101,7 @@ export default function MultipleChoice({id, prompt, questions, onNext, onBack}:
 
 	const next = () => {
 		if (questionIndex === questions.length - 1) {
-			onNext({id, solutions: userSolutions, score: calculateScore()});
+			onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type});
 		} else {
 			setQuestionIndex((prev) => prev + 1);
 		}
@@ -127,7 +127,8 @@ export default function MultipleChoice({id, prompt, questions, onNext, onBack}:
 					/>
 				)}
 			</div>
-			<div className="self-end flex gap-8">
+
+			<div className="self-end flex flex-col-reverse items-center w-full md:justify-between md:items-start md:flex-row gap-8">
 				<button className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)} onClick={back}>
 					<div className="absolute left-4">
 						<Icon path={mdiArrowLeft} color="white" size={1} />

src/components/Exercises/Speaking.tsx

@@ -7,7 +7,7 @@ import {CommonProps} from ".";
 import {Fragment, useEffect, useState} from "react";
 import {toast} from "react-toastify";
 
-export default function Speaking({id, title, text, prompts, onNext, onBack}: SpeakingExercise & CommonProps) {
+export default function Speaking({id, title, text, type, prompts, onNext, onBack}: SpeakingExercise & CommonProps) {
 	return (
 		<div className="flex flex-col h-full w-2/3 items-center justify-center gap-8">
 			<div className="flex flex-col max-w-2xl gap-4">
@@ -32,7 +32,7 @@ export default function Speaking({id, title, text, prompts, onNext, onBack}: Spe
 				</div>
 			</div>
 
-			<div className="self-end flex gap-8">
+			<div className="self-end flex flex-col-reverse items-center w-full md:justify-between md:items-start md:flex-row gap-8">
 				<button className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)} onClick={onBack}>
 					<div className="absolute left-4">
 						<Icon path={mdiArrowLeft} color="white" size={1} />
@@ -41,7 +41,7 @@ export default function Speaking({id, title, text, prompts, onNext, onBack}: Spe
 				</button>
 				<button
 					className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}
-					onClick={() => onNext({id, solutions: [], score: {correct: 0, total: 0}})}>
+					onClick={() => onNext({exercise: id, solutions: [], score: {correct: 0, total: 0}, type})}>
 					Next
 					<div className="absolute right-4">
 						<Icon path={mdiArrowRight} color="white" size={1} />

src/components/Exercises/WriteBlanks.tsx

@@ -42,7 +42,7 @@ function Blank({
 	);
 }
 
-export default function WriteBlanks({id, prompt, maxWords, solutions, text, onNext, onBack}: WriteBlanksExercise & CommonProps) {
+export default function WriteBlanks({id, prompt, type, maxWords, solutions, text, onNext, onBack}: WriteBlanksExercise & CommonProps) {
 	const [userSolutions, setUserSolutions] = useState<{id: string; solution: string}[]>([]);
 
 	const calculateScore = () => {
@@ -88,7 +88,7 @@ export default function WriteBlanks({id, prompt, maxWords, solutions, text, onNe
 				</span>
 			</div>
 
-			<div className="self-end flex gap-8">
+			<div className="self-end flex flex-col-reverse items-center w-full md:justify-between md:items-start md:flex-row gap-8">
 				<button className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)} onClick={onBack}>
 					<div className="absolute left-4">
 						<Icon path={mdiArrowLeft} color="white" size={1} />
@@ -97,7 +97,7 @@ export default function WriteBlanks({id, prompt, maxWords, solutions, text, onNe
 				</button>
 				<button
 					className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}
-					onClick={() => onNext({id, solutions: userSolutions, score: calculateScore()})}>
+					onClick={() => onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type})}>
 					Next
 					<div className="absolute right-4">
 						<Icon path={mdiArrowRight} color="white" size={1} />

src/components/Exercises/Writing.tsx

@@ -7,7 +7,7 @@ import {CommonProps} from ".";
 import {Fragment, useEffect, useState} from "react";
 import {toast} from "react-toastify";
 
-export default function Writing({id, prompt, info, wordCounter, onNext, onBack}: WritingExercise & CommonProps) {
+export default function Writing({id, prompt, info, type, wordCounter, onNext, onBack}: WritingExercise & CommonProps) {
 	const [inputText, setInputText] = useState("");
 	const [isSubmitEnabled, setIsSubmitEnabled] = useState(false);
 
@@ -49,7 +49,7 @@ export default function Writing({id, prompt, info, wordCounter, onNext, onBack}:
 				placeholder="Write your text here..."
 			/>
 
-			<div className="self-end flex gap-8">
+			<div className="self-end flex flex-col-reverse items-center w-full md:justify-between md:items-start md:flex-row gap-8">
 				<button className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)} onClick={onBack}>
 					<div className="absolute left-4">
 						<Icon path={mdiArrowLeft} color="white" size={1} />
@@ -61,7 +61,7 @@ export default function Writing({id, prompt, info, wordCounter, onNext, onBack}:
 						<button
 							className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}
 							disabled={!isSubmitEnabled}
-							onClick={() => onNext({id, solutions: [inputText], score: {correct: 1, total: 1}})}>
+							onClick={() => onNext({exercise: id, solutions: [inputText], score: {correct: 1, total: 1}, type})}>
 							Next
 						</button>
 					</div>
@@ -70,7 +70,7 @@ export default function Writing({id, prompt, info, wordCounter, onNext, onBack}:
 					<button
 						className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}
 						disabled={!isSubmitEnabled}
-						onClick={() => onNext({id, solutions: [inputText], score: {correct: 1, total: 1}})}>
+						onClick={() => onNext({exercise: id, solutions: [inputText], score: {correct: 1, total: 1}, type})}>
 						Next
 						<div className="absolute right-4">
 							<Icon path={mdiArrowRight} color="white" size={1} />

src/exams/Finish.tsx

@@ -54,11 +54,11 @@ export default function Finish({user, scores, modules, onViewResults}: Props) {
 		<div className="w-full h-full relative">
 			<section className="h-full w-full flex flex-col items-center justify-center gap-4">
 				<ProfileLevel user={user} className="h-1/2" />
-				<div className="h-2/3 w-1/2 flex flex-col items-center gap-4">
+				<div className="h-2/3 w-2/3 flex flex-col items-center gap-4">
-					<div className="rounded-xl p-4 items-center flex justify-center gap-4">
+					<div className="rounded-xl p-2 md:p-4 items-center flex lg:justify-center gap-2 md:gap-4 max-w-[100%] overflow-auto">
 						{modules.map((module) => (
 							<div
-								className={`flex flex-col gap-12 min-w-[176px] items-center justify-center border-2 border-ielts-${module} bg-ielts-${module}-transparent p-4 rounded-xl text-white font-semibold`}
+								className={`flex flex-col gap-12 min-w-[176px] items-center justify-center border-2 border-ielts-${module} bg-ielts-${module}-transparent py-4 px-2 rounded-xl text-white font-semibold`}
 								key={module}>
 								<div className="flex flex-col items-center">
 									<Icon path={ICONS[module]} color="white" size={2} />

src/exams/Listening.tsx

@@ -20,7 +20,7 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
 
 	const nextExercise = (solution?: UserSolution) => {
 		if (solution) {
-			setUserSolutions((prev) => [...prev.filter((x) => x.id !== solution.id), solution]);
+			setUserSolutions((prev) => [...prev.filter((x) => x.exercise !== solution.exercise), solution]);
 		}
 
 		if (exerciseIndex + 1 < exam.exercises.length) {
@@ -29,7 +29,9 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
 		}
 
 		if (solution) {
-			onFinish([...userSolutions.filter((x) => x.id !== solution.id), solution].map((x) => ({...x, module: "listening", exam: exam.id})));
+			onFinish(
+				[...userSolutions.filter((x) => x.exercise !== solution.exercise), solution].map((x) => ({...x, module: "listening", exam: exam.id})),
+			);
 		} else {
 			onFinish(userSolutions.map((x) => ({...x, module: "listening", exam: exam.id})));
 		}
@@ -53,14 +55,16 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
 					)}
 				</div>
 			)}
-			<div className="bg-gray-300 rounded-xl p-4 flex flex-col gap-4 items-center w-full overflow-auto">
+			<div className="rounded-xl flex flex-col gap-4 items-center w-full overflow-auto">
 				{exam.audio.repeatableTimes > 0 && (
 					<>{exam.audio.repeatableTimes <= timesListened && <span>You are no longer allowed to listen to the audio again.</span>}</>
 				)}
-				<audio preload="auto" controls autoPlay onPlay={() => setTimesListened((prev) => prev + 1)}>
+				{exam.audio.repeatableTimes > 0 && timesListened < exam.audio.repeatableTimes && (
-					<source src={exam.audio.source} type="audio/mpeg" />
+					<audio preload="auto" controls autoPlay onPlay={() => setTimesListened((prev) => prev + 1)}>
-					Your browser does not support the audio element
+						<source src={exam.audio.source} type="audio/mpeg" />
-				</audio>
+						Your browser does not support the audio element
+					</audio>
+				)}
 			</div>
 		</>
 	);

src/exams/Reading.tsx

@@ -80,7 +80,7 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
 
 	const nextExercise = (solution?: UserSolution) => {
 		if (solution) {
-			setUserSolutions((prev) => [...prev.filter((x) => x.id !== solution.id), solution]);
+			setUserSolutions((prev) => [...prev.filter((x) => x.exercise !== solution.exercise), solution]);
 		}
 
 		if (exerciseIndex + 1 < exam.exercises.length) {
@@ -89,7 +89,9 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
 		}
 
 		if (solution) {
-			onFinish([...userSolutions.filter((x) => x.id !== solution.id), solution].map((x) => ({...x, module: "reading", exam: exam.id})));
+			onFinish(
+				[...userSolutions.filter((x) => x.exercise !== solution.exercise), solution].map((x) => ({...x, module: "reading", exam: exam.id})),
+			);
 		} else {
 			onFinish(userSolutions.map((x) => ({...x, module: "reading", exam: exam.id})));
 		}

src/exams/Speaking.tsx

@@ -20,7 +20,7 @@ export default function Speaking({exam, showSolutions = false, onFinish}: Props)
 
 	const nextExercise = (solution?: UserSolution) => {
 		if (solution) {
-			setUserSolutions((prev) => [...prev.filter((x) => x.id !== solution.id), solution]);
+			setUserSolutions((prev) => [...prev.filter((x) => x.exercise !== solution.exercise), solution]);
 		}
 
 		if (exerciseIndex + 1 < exam.exercises.length) {
@@ -29,7 +29,9 @@ export default function Speaking({exam, showSolutions = false, onFinish}: Props)
 		}
 
 		if (solution) {
-			onFinish([...userSolutions.filter((x) => x.id !== solution.id), solution].map((x) => ({...x, module: "speaking", exam: exam.id})));
+			onFinish(
+				[...userSolutions.filter((x) => x.exercise !== solution.exercise), solution].map((x) => ({...x, module: "speaking", exam: exam.id})),
+			);
 		} else {
 			onFinish(userSolutions.map((x) => ({...x, module: "speaking", exam: exam.id})));
 		}

src/exams/Writing.tsx

@@ -20,7 +20,7 @@ export default function Writing({exam, showSolutions = false, onFinish}: Props)
 
 	const nextExercise = (solution?: UserSolution) => {
 		if (solution) {
-			setUserSolutions((prev) => [...prev.filter((x) => x.id !== solution.id), solution]);
+			setUserSolutions((prev) => [...prev.filter((x) => x.exercise !== solution.exercise), solution]);
 		}
 
 		if (exerciseIndex + 1 < exam.exercises.length) {
@@ -29,7 +29,9 @@ export default function Writing({exam, showSolutions = false, onFinish}: Props)
 		}
 
 		if (solution) {
-			onFinish([...userSolutions.filter((x) => x.id !== solution.id), solution].map((x) => ({...x, module: "writing", exam: exam.id})));
+			onFinish(
+				[...userSolutions.filter((x) => x.exercise !== solution.exercise), solution].map((x) => ({...x, module: "writing", exam: exam.id})),
+			);
 		} else {
 			onFinish(userSolutions.map((x) => ({...x, module: "writing", exam: exam.id})));
 		}

src/hooks/useStats.tsx

@@ -0,0 +1,19 @@
+import {Stat, User} from "@/interfaces/user";
+import axios from "axios";
+import {useEffect, useState} from "react";
+
+export default function useStats() {
+	const [stats, setStats] = useState<Stat[]>([]);
+	const [isLoading, setIsLoading] = useState(false);
+	const [isError, setIsError] = useState(false);
+
+	useEffect(() => {
+		setIsLoading(true);
+		axios
+			.get<Stat[]>("/api/stats")
+			.then((response) => setStats(response.data))
+			.finally(() => setIsLoading(false));
+	}, []);
+
+	return {stats, isLoading, isError};
+}

src/interfaces/exam.ts

@@ -28,11 +28,12 @@ export interface UserSolution {
 	solutions: any[];
 	module?: Module;
 	exam?: string;
+	type: string;
 	score: {
 		correct: number;
 		total: number;
 	};
-	id: string;
+	exercise: string;
 }
 
 export interface WritingExam {

src/interfaces/results.ts

@@ -3,6 +3,7 @@ import {Module} from "@/interfaces";
 export type UserResults = {[key in Module]: ModuleResult};
 
 interface ModuleResult {
+	exams: string[];
 	score: number;
 	total: number;
 }

src/interfaces/user.ts

@@ -1,3 +1,6 @@
+import {Module} from ".";
+import {UserSolution} from "./exam";
+
 export interface User {
 	email: string;
 	name: string;
@@ -7,4 +10,16 @@ export interface User {
 	type: Type;
 }
 
+export interface Stat {
+	user: string;
+	exam: string;
+	exercise: string;
+	module: Module;
+	solutions: any[];
+	score: {
+		correct: number;
+		total: number;
+	};
+}
+
 export type Type = "student" | "teacher" | "admin" | "owner" | "developer";

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">
+						{!isLoading && stats && (
-							<UserResultChart results={JSON_RESULTS} resultKey="total" label="Total exams" className="w-2/3" />
+							<section className="w-full lg:w-1/3 h-full flex items-center justify-center">
-						</section>
+								<UserResultChart results={formatStatsToChart(stats)} resultKey="total" label="Total exams" className="w-2/3" />
+							</section>
+						)}
 					</section>
 				</div>
 			</main>