From 9b852bd6be00c91f09b30682f922e41e3b784c40 Mon Sep 17 00:00:00 2001 From: Tiago Ribeiro Date: Tue, 17 Oct 2023 08:52:41 +0100 Subject: [PATCH] - Did a bit of refactor related to the exam/exercises page; - Improved the responsiveness of the page for mobile; --- src/components/High/Layout.tsx | 2 +- src/components/MobileMenu.tsx | 4 +- src/components/Navbar.tsx | 18 +- src/components/ProfileSummary.tsx | 85 +++++++ src/exams/Selection.tsx | 105 +++------ src/pages/(admin)/BatchCodeGenerator.tsx | 8 +- src/pages/(admin)/CodeGenerator.tsx | 8 +- src/pages/(admin)/ExamLoader.tsx | 2 +- src/pages/(exam)/ExamPage.tsx | 287 +++++++++++++++++++++++ src/pages/admin.tsx | 2 +- src/pages/exam.tsx | 285 +--------------------- src/pages/exercises.tsx | 286 +--------------------- src/pages/index.tsx | 124 ++-------- src/pages/record.tsx | 8 +- src/pages/stats.tsx | 86 +++---- 15 files changed, 491 insertions(+), 819 deletions(-) create mode 100644 src/components/ProfileSummary.tsx create mode 100644 src/pages/(exam)/ExamPage.tsx diff --git a/src/components/High/Layout.tsx b/src/components/High/Layout.tsx index 45c04b3a..d2925f9d 100644 --- a/src/components/High/Layout.tsx +++ b/src/components/High/Layout.tsx @@ -37,7 +37,7 @@ export default function Layout({user, children, className, navDisabled = false, />
{children} diff --git a/src/components/MobileMenu.tsx b/src/components/MobileMenu.tsx index 015ea1e6..abad69cb 100644 --- a/src/components/MobileMenu.tsx +++ b/src/components/MobileMenu.tsx @@ -75,10 +75,10 @@ export default function MobileMenu({isOpen, onClose, path, user}: Props) { Exams Exercises diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index da51607d..1f43a5c8 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -3,9 +3,7 @@ import Link from "next/link"; import FocusLayer from "@/components/FocusLayer"; import {preventNavigation} from "@/utils/navigation.disabled"; import {useRouter} from "next/router"; -import axios from "axios"; -import {RiLogoutBoxFill} from "react-icons/ri"; -import {BsList, BsPower} from "react-icons/bs"; +import {BsList} from "react-icons/bs"; import clsx from "clsx"; import moment from "moment"; import MobileMenu from "./MobileMenu"; @@ -47,12 +45,12 @@ export default function Navbar({user, path, navDisabled = false, focusMode = fal return ( <> {user && setIsMenuOpen(false)} user={user} />} -
- - EnCoach's Logo -

EnCoach

+
+ + EnCoach's Logo +

EnCoach

-
+
{showExpirationDate() && ( {user.name} - {user.name} + {user.name}
setIsMenuOpen(true)}> - +
{focusMode && } diff --git a/src/components/ProfileSummary.tsx b/src/components/ProfileSummary.tsx new file mode 100644 index 00000000..87f9faba --- /dev/null +++ b/src/components/ProfileSummary.tsx @@ -0,0 +1,85 @@ +/* eslint-disable @next/next/no-img-element */ +import {User} from "@/interfaces/user"; +import {calculateAverageLevel} from "@/utils/score"; +import {capitalize} from "lodash"; +import {ReactElement} from "react"; +import ProgressBar from "./Low/ProgressBar"; + +interface Props { + user: User; + items: { + icon: ReactElement; + value: string | number; + label: string; + }[]; + children?: ReactElement; +} + +export default function ProfileSummary({user, items}: Props) { + return ( +
+ {user.name} +
+ {user.name} +
+
+

{user.name}

+
{capitalize(user.type)}
+
+ +
+ + +
+ {items.map((item) => ( +
+
+ {item.icon} +
+
+ {item.value} + {item.label} +
+
+ ))} +
+
+ + + +
+ {items.map((item) => ( +
+
+ {item.icon} +
+
+ {item.value} + {item.label} +
+
+ ))} +
+
+ ); +} diff --git a/src/exams/Selection.tsx b/src/exams/Selection.tsx index f9238093..ebc22f40 100644 --- a/src/exams/Selection.tsx +++ b/src/exams/Selection.tsx @@ -11,6 +11,7 @@ import Button from "@/components/Low/Button"; import {calculateAverageLevel} from "@/utils/score"; import {sortByModuleName} from "@/utils/moduleUtils"; import {capitalize} from "lodash"; +import ProfileSummary from "@/components/ProfileSummary"; interface Props { user: User; @@ -31,68 +32,35 @@ export default function Selection({user, page, onStart, disableSelection = false return ( <> -
-
- {user.name} -
-
-
-

{user.name}

-
{user.type}
-
- -
- -
-
-
- -
-
- {totalExamsByModule(stats, "reading")} - Reading -
-
-
-
- -
-
- {totalExamsByModule(stats, "listening")} - Listening -
-
-
-
- -
-
- {totalExamsByModule(stats, "writing")} - Writing -
-
-
-
- -
-
- {totalExamsByModule(stats, "speaking")} - Speaking -
-
-
-
-
+
+ {user && ( + , + label: "Reading", + value: totalExamsByModule(stats, "reading"), + }, + { + icon: , + label: "Listening", + value: totalExamsByModule(stats, "listening"), + }, + { + icon: , + label: "Writing", + value: totalExamsByModule(stats, "writing"), + }, + { + icon: , + label: "Speaking", + value: totalExamsByModule(stats, "speaking"), + }, + ]} + /> + )} +
About {capitalize(page)} @@ -119,7 +87,7 @@ export default function Selection({user, page, onStart, disableSelection = false )}
-
+
toggleModule("reading") : undefined} className={clsx( @@ -201,9 +169,9 @@ export default function Selection({user, page, onStart, disableSelection = false )}
-
+
setAvoidRepeatedExams((prev) => !prev)}> @@ -217,6 +185,11 @@ export default function Selection({user, page, onStart, disableSelection = false
Avoid Repeated Questions
+
+ +
diff --git a/src/pages/(admin)/BatchCodeGenerator.tsx b/src/pages/(admin)/BatchCodeGenerator.tsx index 0e079fef..b5c99f9f 100644 --- a/src/pages/(admin)/BatchCodeGenerator.tsx +++ b/src/pages/(admin)/BatchCodeGenerator.tsx @@ -110,28 +110,28 @@ export default function BatchCodeGenerator({user}: {user: User}) { {user && (