- Did a bit of refactor related to the exam/exercises page;
- Improved the responsiveness of the page for mobile;
This commit is contained in:
Tiago Ribeiro
@@ -6,7 +6,7 @@ import {withIronSessionSsr} from "iron-session/next";
|
||||
import {sessionOptions} from "@/lib/session";
|
||||
import {useEffect, useState} from "react";
|
||||
import useStats from "@/hooks/useStats";
|
||||
import {averageScore, totalExams} from "@/utils/stats";
|
||||
import {averageScore, groupBySession, totalExams} from "@/utils/stats";
|
||||
import useUser from "@/hooks/useUser";
|
||||
import Sidebar from "@/components/Sidebar";
|
||||
import Diagnostic from "@/components/Diagnostic";
|
||||
@@ -21,6 +21,7 @@ import DemographicInformationInput from "@/components/DemographicInformationInpu
|
||||
import moment from "moment";
|
||||
import Link from "next/link";
|
||||
import {MODULE_ARRAY} from "@/utils/moduleUtils";
|
||||
import ProfileSummary from "@/components/ProfileSummary";
|
||||
|
||||
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
|
||||
const user = req.session.user;
|
||||
@@ -159,105 +160,26 @@ export default function Home() {
|
||||
<ToastContainer />
|
||||
{user && (
|
||||
<Layout user={user}>
|
||||
<section className="w-full flex -md:flex-col gap-4 md:gap-8">
|
||||
<img
|
||||
src={user.profilePicture}
|
||||
alt={user.name}
|
||||
className="aspect-square h-20 md:h-64 rounded-3xl drop-shadow-xl object-cover -md:hidden"
|
||||
/>
|
||||
<div className="flex md:flex-col gap-4 md:py-4 w-full -md:items-center">
|
||||
<img
|
||||
src={user.profilePicture}
|
||||
alt={user.name}
|
||||
className="aspect-square h-24 md:hidden rounded-3xl drop-shadow-xl object-cover"
|
||||
/>
|
||||
<div className="flex -md:flex-col justify-between w-full gap-8">
|
||||
<div className="flex flex-col gap-2 py-2">
|
||||
<h1 className="font-bold text-2xl md:text-4xl">{user.name}</h1>
|
||||
<h6 className="font-normal text-base text-mti-gray-taupe">{capitalize(user.type)}</h6>
|
||||
</div>
|
||||
<ProgressBar
|
||||
label={`Level ${calculateAverageLevel(user.levels).toFixed(1)}`}
|
||||
percentage={100}
|
||||
color="purple"
|
||||
className="max-w-xs w-32 md:self-end h-10 -md:hidden"
|
||||
/>
|
||||
</div>
|
||||
<ProgressBar
|
||||
label=""
|
||||
percentage={Math.round((calculateAverageLevel(user.levels) * 100) / calculateAverageLevel(user.desiredLevels))}
|
||||
color="red"
|
||||
className="w-full h-3 drop-shadow-lg -md:hidden"
|
||||
/>
|
||||
<div className="flex justify-between w-full mt-8 -md:hidden">
|
||||
<div className="flex gap-4 items-center">
|
||||
<div className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl">
|
||||
<BsFileEarmarkText className="w-8 h-8 text-mti-red-light" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-bold text-xl">{totalExams(stats)}</span>
|
||||
<span className="font-normal text-base text-mti-gray-dim">Exams</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-4 items-center">
|
||||
<div className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl">
|
||||
<BsPencil className="w-8 h-8 text-mti-red-light" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-bold text-xl">{stats.length}</span>
|
||||
<span className="font-normal text-base text-mti-gray-dim">Exercises</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-4 items-center">
|
||||
<div className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl">
|
||||
<BsStar className="w-8 h-8 text-mti-red-light" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-bold text-xl">{stats.length > 0 ? averageScore(stats) : 0}%</span>
|
||||
<span className="font-normal text-base text-mti-gray-dim">Average Score</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ProgressBar
|
||||
label={`Level ${calculateAverageLevel(user.levels).toFixed(1)}`}
|
||||
percentage={Math.round((calculateAverageLevel(user.levels) * 100) / calculateAverageLevel(user.desiredLevels))}
|
||||
color="purple"
|
||||
className="w-full md:hidden h-8"
|
||||
textClassName="!text-mti-black"
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 w-full mt-4 md:hidden">
|
||||
<div className="flex gap-4 items-center">
|
||||
<div className="w-12 h-12 md:w-16 md:h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-lg md:rounded-xl">
|
||||
<BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-bold text-lg md:text-xl">{totalExams(stats)}</span>
|
||||
<span className="font-normal text-sm md:text-base text-mti-gray-dim">Exams</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-4 items-center">
|
||||
<div className="w-12 h-12 md:w-16 md:h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-lg md:rounded-xl">
|
||||
<BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-bold text-lg md:text-xl">{stats.length}</span>
|
||||
<span className="font-normal text-sm md:text-base text-mti-gray-dim">Exercises</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-4 items-center col-span-2">
|
||||
<div className="w-12 h-12 md:w-16 md:h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-lg md:rounded-xl">
|
||||
<BsStar className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-bold text-lg md:text-xl">{stats.length > 0 ? averageScore(stats) : 0}%</span>
|
||||
<span className="font-normal text-sm md:text-base text-mti-gray-dim">Average Score</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<ProfileSummary
|
||||
user={user}
|
||||
items={[
|
||||
{
|
||||
icon: <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
|
||||
value: Object.keys(groupBySession(stats)).length,
|
||||
label: "Exams",
|
||||
},
|
||||
{
|
||||
icon: <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
|
||||
value: stats.length,
|
||||
label: "Exercises",
|
||||
},
|
||||
{
|
||||
icon: <BsStar className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
|
||||
value: `${stats.length > 0 ? averageScore(stats) : 0}%`,
|
||||
label: "Average Score",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<section className="flex flex-col gap-1 md:gap-3">
|
||||
<span className="font-bold text-lg">Bio</span>
|
||||
@@ -275,7 +197,7 @@ export default function Home() {
|
||||
<div className="w-8 h-8 md:w-12 md:h-12 bg-mti-gray-smoke flex items-center justify-center rounded-lg md:rounded-xl">
|
||||
{module === "reading" && <BsBook className="text-ielts-reading w-4 h-4 md:w-5 md:h-5" />}
|
||||
{module === "listening" && <BsHeadphones className="text-ielts-listening w-4 h-4 md:w-5 md:h-5" />}
|
||||
{module === "writing" && <BsPencil className="text-ielts-writing w-4 h-4 md:w-5 md:h-5" />}
|
||||
{module === "writing" && <BsPen className="text-ielts-writing w-4 h-4 md:w-5 md:h-5" />}
|
||||
{module === "speaking" && <BsMegaphone className="text-ielts-speaking w-4 h-4 md:w-5 md:h-5" />}
|
||||
</div>
|
||||
<div className="flex justify-between w-full">
|
||||
|
||||
Reference in New Issue
Block a user