Created a really basic history page

2023-04-28 18:19:29 +01:00
parent 240bf1c790
commit 06de06fbf6
8 changed files with 122 additions and 1 deletions
--- a/src/pages/exam/index.tsx
+++ b/src/pages/exam/index.tsx
@@ -71,6 +71,7 @@ export default function Page() {
 					exam: solution.exam!,
 					module: solution.module!,
 					user: user?.id || "",
+					date: new Date().getTime(),
 				}));

 				axios
--- a/src/pages/history.tsx
+++ b/src/pages/history.tsx
@@ -0,0 +1,106 @@
+/* eslint-disable @next/next/no-img-element */
+import Head from "next/head";
+import SingleDatasetChart from "@/components/UserResultChart";
+import Navbar from "@/components/Navbar";
+import ProfileCard from "@/components/ProfileCard";
+import {withIronSessionSsr} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {Stat, User} from "@/interfaces/user";
+import {useEffect, useState} from "react";
+import useStats from "@/hooks/useStats";
+import {averageScore, formatModuleTotalStats, groupByDate, groupBySession, totalExams} from "@/utils/stats";
+import {Divider} from "primereact/divider";
+import useUser from "@/hooks/useUser";
+import {Timeline} from "primereact/timeline";
+import moment from "moment";
+
+export const getServerSideProps = withIronSessionSsr(({req, res}) => {
+	const user = req.session.user;
+
+	if (!user) {
+		res.setHeader("location", "/login");
+		res.statusCode = 302;
+		res.end();
+		return {
+			props: {
+				user: null,
+			},
+		};
+	}
+
+	return {
+		props: {user: req.session.user},
+	};
+}, sessionOptions);
+
+export default function History() {
+	const [groupedStats, setGroupedStats] = useState<{[key: string]: Stat[]}>();
+
+	const {stats, isLoading} = useStats();
+	const {user} = useUser({redirectTo: "/login"});
+
+	useEffect(() => {
+		if (stats && !isLoading) {
+			setGroupedStats(groupByDate(stats));
+		}
+	}, [stats, isLoading]);
+
+	const formatTimestamp = (timestamp: string) => {
+		const date = moment(parseInt(timestamp));
+		const formatter = "YYYY/MM/DD - HH:mm";
+
+		return date.format(formatter);
+	};
+
+	const customContent = (timestamp: string) => {
+		if (!groupedStats) return <></>;
+
+		const dateStats = groupedStats[timestamp];
+		const correct = dateStats.reduce((accumulator, current) => accumulator + current.score.correct, 0);
+		const total = dateStats.reduce((accumulator, current) => accumulator + current.score.total, 0);
+
+		return (
+			<div className="flex flex-col gap-2">
+				<span>{formatTimestamp(timestamp)}</span>
+				<div className="bg-white p-4 rounded-xl mb-4 flex flex-col gap-2">
+					<span>
+						Modules:{" "}
+						{formatModuleTotalStats(dateStats)
+							.filter((x) => x.value > 0)
+							.map((x) => x.label)
+							.join(", ")}
+					</span>
+					<span>
+						Score: {correct}/{total} | {((correct / total) * 100).toFixed(2)}%
+					</span>
+				</div>
+			</div>
+		);
+	};
+
+	return (
+		<>
+			<Head>
+				<title>IELTS GPT | Muscat Training Institute</title>
+				<meta
+					name="description"
+					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+				/>
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<link rel="icon" href="/favicon.ico" />
+			</Head>
+			{user && (
+				<main className="w-full h-full min-h-[100vh] flex flex-col items-center bg-neutral-100 text-black">
+					<Navbar profilePicture={user.profilePicture} />
+					<div className="w-full h-full p-4 relative flex flex-col gap-8">
+						{groupedStats && !isLoading && (
+							<div className="flex gap-4">
+								<Timeline value={Object.keys(groupedStats)} content={customContent} />
+							</div>
+						)}
+					</div>
+				</main>
+			)}
+		</>
+	);
+}