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

Made it so the pages update the user when loading

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-04-21 12:18:24 +01:00
parent 713771d949
commit 1adfb7f3d5
5 changed files with 79 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/pages/index.tsx
View File

@@ -10,6 +10,7 @@ import {useEffect, useState} from "react";
import useStats from "@/hooks/useStats";
import {averageScore, formatModuleTotalStats, totalExams} from "@/utils/stats";
import {Divider} from "primereact/divider";
import useUser from "@/hooks/useUser";
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user;
@@ -30,10 +31,12 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
};
}, sessionOptions);
export default function Home({user}: {user: User}) {
export default function Home() {
const [showEndExam, setShowEndExam] = useState(false);
const [windowWidth, setWindowWidth] = useState(0);
const {stats, isLoading} = useStats();
const {user} = useUser({redirectTo: "/login"});
useEffect(() => setShowEndExam(window.innerWidth <= 960), []);
useEffect(() => setWindowWidth(window.innerWidth), []);
@@ -49,34 +52,36 @@ 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 text-black">
<Navbar profilePicture={user.profilePicture} showExamEnd={showEndExam} />
<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>
{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>
{user && (
<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 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>
{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>
)}
</div>
</section>
{!isLoading && stats && (
<section className="w-full lg:w-1/3 h-full flex items-center justify-center">
<SingleDatasetChart type="polarArea" data={formatModuleTotalStats(stats)} title="Exams per Module" />
)}
</div>
</section>
)}
</div>
</main>
{!isLoading && stats && (
<section className="w-full lg:w-1/3 h-full flex items-center justify-center">
<SingleDatasetChart type="polarArea" data={formatModuleTotalStats(stats)} title="Exams per Module" />
</section>
)}
</div>
</main>
)}
</>
);
}