devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Created a really basic history page

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-04-28 18:19:29 +01:00
parent 240bf1c790
commit 06de06fbf6
8 changed files with 122 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Navbar.tsx
View File

@@ -43,6 +43,7 @@ export default function Navbar({profilePicture, timer, showExamEnd = false}: Pro
items: [
{label: "List", icon: "pi pi-fw pi-users", url: "/users"},
{label: "Stats", icon: "pi pi-fw pi-chart-pie", url: "/stats"},
{label: "History", icon: "pi pi-fw pi-chart-pie", url: "/history"},
],
},
{

3
src/hooks/useUser.tsx
View File

@@ -13,6 +13,9 @@ export default function useUser({redirectTo = "", redirectIfFound = false} = {})
// if no redirect needed, just return (example: already on /dashboard)
// if user data not yet there (fetch in progress, logged in or not) then don't do anything yet
if (!redirectTo || !user) return;
if (redirectTo && !user) {
Router.push(redirectTo);
}
if (
// If redirectTo is set, redirect if the user was not found.

1
src/interfaces/user.ts
View File

@@ -14,6 +14,7 @@ export interface Stat {
exam: string;
exercise: string;
session: string;
date: number;
module: Module;
solutions: any[];
type: string;

1
src/pages/exam/index.tsx
View File

@@ -71,6 +71,7 @@ export default function Page() {
exam: solution.exam!,
module: solution.module!,
user: user?.id || "",
date: new Date().getTime(),
}));
axios

106
src/pages/history.tsx Normal file
View File

@@ -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>
)}
</>
);
}

5
src/utils/stats.ts
View File

@@ -1,5 +1,5 @@
import {Stat} from "@/interfaces/user";
import {capitalize} from "lodash";
import {capitalize, groupBy} from "lodash";
import {convertCamelCaseToReadable} from "@/utils/string";
export const totalExams = (stats: Stat[]): number => {
@@ -90,3 +90,6 @@ export const formatExerciseAverageScoreStats = (stats: Stat[]): {label: string;
};
});
};
export const groupBySession = (stats: Stat[]) => groupBy(stats, "session");
export const groupByDate = (stats: Stat[]) => groupBy(stats, "date");