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
package.json
View File

@@ -26,6 +26,7 @@
"framer-motion": "^9.0.2", "framer-motion": "^9.0.2",
"iron-session": "^6.3.1", "iron-session": "^6.3.1",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"moment": "^2.29.4",
"next": "13.1.6", "next": "13.1.6",
"primeicons": "^6.0.1", "primeicons": "^6.0.1",
"primereact": "^9.2.3", "primereact": "^9.2.3",

1
src/components/Navbar.tsx
View File

@@ -43,6 +43,7 @@ export default function Navbar({profilePicture, timer, showExamEnd = false}: Pro
items: [ items: [
{label: "List", icon: "pi pi-fw pi-users", url: "/users"}, {label: "List", icon: "pi pi-fw pi-users", url: "/users"},
{label: "Stats", icon: "pi pi-fw pi-chart-pie", url: "/stats"}, {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 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 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) return;
if (redirectTo && !user) {
Router.push(redirectTo);
}
if ( if (
// If redirectTo is set, redirect if the user was not found. // 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; exam: string;
exercise: string; exercise: string;
session: string; session: string;
date: number;
module: Module; module: Module;
solutions: any[]; solutions: any[];
type: string; type: string;

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

@@ -71,6 +71,7 @@ export default function Page() {
exam: solution.exam!, exam: solution.exam!,
module: solution.module!, module: solution.module!,
user: user?.id || "", user: user?.id || "",
date: new Date().getTime(),
})); }));
axios 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 {Stat} from "@/interfaces/user";
import {capitalize} from "lodash"; import {capitalize, groupBy} from "lodash";
import {convertCamelCaseToReadable} from "@/utils/string"; import {convertCamelCaseToReadable} from "@/utils/string";
export const totalExams = (stats: Stat[]): number => { 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");

5
yarn.lock
View File

@@ -2679,6 +2679,11 @@ minimist@^1.2.0, minimist@^1.2.6:
resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz" resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz"
integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g== integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==
moment@^2.29.4:
version "2.29.4"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
ms@2.1.2, ms@^2.1.1: ms@2.1.2, ms@^2.1.1:
version "2.1.2" version "2.1.2"
resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz" resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"