diff --git a/src/exams/Selection.tsx b/src/exams/Selection.tsx index 44c3b380..eb2d7543 100644 --- a/src/exams/Selection.tsx +++ b/src/exams/Selection.tsx @@ -9,6 +9,10 @@ import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles"; import ProfileLevel from "@/components/ProfileLevel"; import {User} from "@/interfaces/user"; import useExamStore from "@/stores/examStore"; +import ProgressBar from "@/components/Low/ProgressBar"; +import {BsBook, BsFileEarmarkText, BsHeadphones, BsMegaphone, BsPen, BsPencil, BsStar} from "react-icons/bs"; +import {averageScore, formatModuleTotalStats, totalExams, totalExamsByModule} from "@/utils/stats"; +import useStats from "@/hooks/useStats"; interface Props { user: User; @@ -17,6 +21,11 @@ interface Props { export default function Selection({user, onStart}: Props) { const [selectedModules, setSelectedModules] = useState([]); + const {stats} = useStats(user?.id); + + const calculateAverageLevel = () => { + return Object.keys(user!.levels).reduce((accumulator, current) => user!.levels[current as Module] + accumulator, 0) / 4; + }; const router = useRouter(); @@ -27,82 +36,72 @@ export default function Selection({user, onStart}: Props) { return ( <> -
-
- -
-
-
toggleModule("reading")} - className={clsx( - "flex flex-col gap-2 items-center justify-center", - "border-ielts-reading hover:bg-ielts-reading text-white", - "border-2 rounded-xl p-4 h-fit w-48 cursor-pointer", - selectedModules.includes("reading") ? "bg-ielts-reading " : "bg-ielts-reading-transparent ", - )}> - - Reading -
-
toggleModule("listening")} - className={clsx( - "flex flex-col gap-2 items-center justify-center", - "border-ielts-listening hover:bg-ielts-listening text-white", - "border-2 rounded-xl p-4 h-fit w-48 cursor-pointer", - selectedModules.includes("listening") ? "bg-ielts-listening " : "bg-ielts-listening-transparent ", - )}> - - Listening -
-
toggleModule("writing")} - className={clsx( - "flex flex-col gap-2 items-center justify-center", - "border-ielts-writing hover:bg-ielts-writing text-white", - "border-2 rounded-xl p-4 h-fit w-48 cursor-pointer", - selectedModules.includes("writing") ? "bg-ielts-writing " : "bg-ielts-writing-transparent ", - )}> - - Writing -
-
toggleModule("speaking")} - className={clsx( - "flex flex-col gap-2 items-center justify-center", - "border-ielts-speaking hover:bg-ielts-speaking text-white", - "border-2 rounded-xl p-4 h-fit w-48 cursor-pointer", - selectedModules.includes("speaking") ? "bg-ielts-speaking " : "bg-ielts-speaking-transparent ", - )}> - - Speaking +
+
+ {user.name} +
+
+
+

{user.name}

+
{user.type}
+
-
- - +
+
+
+ +
+
+ {totalExamsByModule(stats, "listening")} + Listening +
+
+
+
+ +
+
+ {totalExamsByModule(stats, "writing")} + Writing +
+
+
+
+ +
+
+ {totalExamsByModule(stats, "speaking")} + Speaking +
+
+
+ About Exams + + This comprehensive test will assess your proficiency in reading, listening, writing, and speaking English. Be prepared to dive + into a variety of interesting and challenging topics while showcasing your ability to communicate effectively in English. + Master the vocabulary, grammar, and interpretation skills required to succeed in this high-level exam. Are you ready to + demonstrate your mastery of the English language to the world? + +
); diff --git a/src/pages/exam.tsx b/src/pages/exam.tsx index c4b39a6b..2cf882df 100644 --- a/src/pages/exam.tsx +++ b/src/pages/exam.tsx @@ -19,6 +19,7 @@ import Speaking from "@/exams/Speaking"; import {v4 as uuidv4} from "uuid"; import useUser from "@/hooks/useUser"; import useExamStore from "@/stores/examStore"; +import Sidebar from "@/components/Sidebar"; export const getServerSideProps = withIronSessionSsr(({req, res}) => { const user = req.session.user; @@ -207,7 +208,15 @@ export default function Page() { - {user &&
{renderScreen()}
} + {user && ( +
+ +
+ +
{renderScreen()}
+
+
+ )} ); } diff --git a/src/utils/stats.ts b/src/utils/stats.ts index 8d730958..765b24a3 100644 --- a/src/utils/stats.ts +++ b/src/utils/stats.ts @@ -2,6 +2,7 @@ import {Stat} from "@/interfaces/user"; import {capitalize, groupBy} from "lodash"; import {convertCamelCaseToReadable} from "@/utils/string"; import {UserSolution} from "@/interfaces/exam"; +import {Module} from "@/interfaces"; export const totalExams = (stats: Stat[]): number => { const moduleStats = formatModuleTotalStats(stats); @@ -35,6 +36,22 @@ export const formatModuleTotalStats = (stats: Stat[]): {label: string; value: nu })); }; +export const totalExamsByModule = (stats: Stat[], module: Module): number => { + const moduleSessions: {[key: string]: string[]} = {}; + + stats.forEach((stat) => { + if (stat.module in moduleSessions) { + if (!moduleSessions[stat.module].includes(stat.session)) { + moduleSessions[stat.module] = [...moduleSessions[stat.module], stat.session]; + } + } else { + moduleSessions[stat.module] = [stat.session]; + } + }); + + return moduleSessions[module]?.length || 0; +}; + export const formatModuleAverageScoreStats = (stats: Stat[]): {label: string; value: number}[] => { const moduleScores: {[key: string]: {correct: number; total: number}} = {};