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

Created the stats page where a user can select another user to view their stats;

Browse Source 
Improved the whole stats and the home page
This commit is contained in:
Tiago Ribeiro
2023-04-20 22:43:30 +01:00
parent e60130069d
commit 02d76e4c3c
13 changed files with 361 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/pages/index.tsx
View File

@@ -8,7 +8,8 @@ import {sessionOptions} from "@/lib/session";
import {User} from "@/interfaces/user";
import {useEffect, useState} from "react";
import useStats from "@/hooks/useStats";
import {formatModuleTotalStats} from "@/utils/stats";
import {averageScore, formatModuleTotalStats, totalExams} from "@/utils/stats";
import {Divider} from "primereact/divider";
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user;
@@ -31,10 +32,11 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
export default function Home({user}: {user: User}) {
const [showEndExam, setShowEndExam] = useState(false);
const [windowWidth, setWindowWidth] = useState(0);
const {stats, isLoading} = useStats();
useEffect(() => setShowEndExam(window.innerWidth <= 960), []);
useEffect(() => console.log(stats), [stats]);
useEffect(() => setWindowWidth(window.innerWidth), []);
return (
<>
@@ -47,19 +49,32 @@ export default function Home({user}: {user: User}) {
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="w-full h-full min-h-[100vh] flex flex-col items-center bg-neutral-100">
<main className="w-full h-full min-h-[100vh] flex flex-col items-center bg-neutral-100 text-black">
<Navbar profilePicture={user.profilePicture} showExamEnd={showEndExam} />
<div className="w-full h-full p-4 relative">
<section className="h-full w-full flex flex-col lg:flex-row gap-12 justify-center items-center md:items-start">
<section className="w-full lg:w-1/2 h-full flex items-center">
<div className="w-full h-full p-4 relative flex flex-col gap-8">
<section className="h-full w-full flex lg:gap-8 flex-col lg:flex-row justify-center md:justify-start md:items-start">
<section className="w-full h-full flex items-center">
<ProfileCard user={user} className="text-black self-start" />
</section>
{!isLoading && stats && (
<section className="w-full lg:w-1/3 h-full flex items-center justify-center">
<UserResultChart data={formatModuleTotalStats(stats)} title="Total exams" className="w-2/3" />
</section>
)}
{windowWidth <= 960 && <Divider />}
<div className="flex flex-col w-full gap-4">
<span className="font-bold text-2xl">Statistics</span>
{!isLoading && stats && (
<div className="text-neutral-600 flex flex-wrap gap-2 md:gap-4 w-full justify-between md:justify-start">
<div className="bg-white p-4 rounded-xl drop-shadow-xl flex flex-col gap-2 md:gap-4 w-full">
<span className="font-bold text-xl">Exams: {totalExams(stats)}</span>
<span className="font-bold text-xl">Exercises: {stats.length}</span>
<span className="font-bold text-xl">Average Score: {averageScore(stats)}%</span>
</div>
</div>
)}
</div>
</section>
{!isLoading && stats && (
<section className="w-full lg:w-1/3 h-full flex items-center justify-center">
<UserResultChart type="polarArea" data={formatModuleTotalStats(stats)} title="Exams per Module" />
</section>
)}
</div>
</main>
</>