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