From 60217e9a66a033d19e9343477728c5dec6b0d5cb Mon Sep 17 00:00:00 2001 From: Tiago Ribeiro Date: Thu, 15 Jun 2023 09:12:13 +0100 Subject: [PATCH] - Updated the icons; - Extracted the Layout into its own component; --- src/components/High/Layout.tsx | 20 +++ src/components/Sidebar.tsx | 6 +- src/pages/exam.tsx | 11 +- src/pages/index.tsx | 289 ++++++++++++++++----------------- src/pages/test.tsx | 233 +++++++++++++------------- 5 files changed, 281 insertions(+), 278 deletions(-) create mode 100644 src/components/High/Layout.tsx diff --git a/src/components/High/Layout.tsx b/src/components/High/Layout.tsx new file mode 100644 index 00000000..b6925d17 --- /dev/null +++ b/src/components/High/Layout.tsx @@ -0,0 +1,20 @@ +import {User} from "@/interfaces/user"; +import Navbar from "../Navbar"; +import Sidebar from "../Sidebar"; + +interface Props { + user: User; + children: React.ReactNode; +} + +export default function Layout({user, children}: Props) { + return ( +
+ +
+ +
{children}
+
+
+ ); +} diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index b59d1027..e692121b 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -1,7 +1,7 @@ import clsx from "clsx"; import {IconType} from "react-icons"; import {MdSpaceDashboard} from "react-icons/md"; -import {BsFileEarmarkText, BsClockHistory} from "react-icons/bs"; +import {BsFileEarmarkText, BsClockHistory, BsPencil, BsGraphUp} from "react-icons/bs"; import {RiLogoutBoxFill} from "react-icons/ri"; import {SlPencil} from "react-icons/sl"; import {FaAward} from "react-icons/fa"; @@ -46,8 +46,8 @@ export default function Sidebar({path}: Props) {
diff --git a/src/pages/exam.tsx b/src/pages/exam.tsx index 2cf882df..1c6ad024 100644 --- a/src/pages/exam.tsx +++ b/src/pages/exam.tsx @@ -20,6 +20,7 @@ import {v4 as uuidv4} from "uuid"; import useUser from "@/hooks/useUser"; import useExamStore from "@/stores/examStore"; import Sidebar from "@/components/Sidebar"; +import Layout from "@/components/High/Layout"; export const getServerSideProps = withIronSessionSsr(({req, res}) => { const user = req.session.user; @@ -208,15 +209,7 @@ export default function Page() { - {user && ( -
- -
- -
{renderScreen()}
-
-
- )} + {user && {renderScreen()}} ); } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 8e3e9aac..0a8644ac 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -14,6 +14,7 @@ import {ToastContainer} from "react-toastify"; import {capitalize} from "lodash"; import {Module} from "@/interfaces"; import ProgressBar from "@/components/Low/ProgressBar"; +import Layout from "@/components/High/Layout"; export const getServerSideProps = withIronSessionSsr(({req, res}) => { const user = req.session.user; @@ -79,160 +80,154 @@ export default function Home() { {user && ( -
- -
- -
-
- {user.name} -
-
-
-

{user.name}

-
{capitalize(user.type)}
-
- + +
+ {user.name} +
+
+
+

{user.name}

+
{capitalize(user.type)}
+
+ +
+ +
+
+
+
- -
-
-
- -
-
- {totalExams(stats)} - Exams -
-
-
-
- -
-
- {stats.length} - Exercises -
-
-
-
- -
-
- {averageScore(stats)}% - Average Score -
-
+
+ {totalExams(stats)} + Exams
-
-
- Bio - - Patricia Smith is a dedicated and enthusiastic student. Her passion for knowledge drives her to constantly seek - new academic challenges. She is recognized for her exemplary work ethic, active participation in the classroom, - and commitment to helping her peers. Her insatiable curiosity has led her to explore a wide range of areas of - study, making her a versatile and adaptable learner. Patricia is a true academic leader, inspiring other students - to pursue their own educational goals. - -
-
- Score History -
-
-
-
- -
-
- Reading - - Level {user.levels.reading} / Level {user.desiredLevels.reading} - -
-
-
- -
+
+
+
-
-
-
- -
-
- Writing - - Level {user.levels.writing} / Level {user.desiredLevels.writing} - -
-
-
- -
-
-
-
-
- -
-
- Listening - - Level {user.levels.listening} / Level {user.desiredLevels.listening} - -
-
-
- -
-
-
-
-
- -
-
- Speaking - - Level {user.levels.speaking} / Level {user.desiredLevels.speaking} - -
-
-
- -
+
+ {stats.length} + Exercises
-
+
+
+ +
+
+ {averageScore(stats)}% + Average Score +
+
+
-
-
+ +
+ Bio + + Patricia Smith is a dedicated and enthusiastic student. Her passion for knowledge drives her to constantly seek new + academic challenges. She is recognized for her exemplary work ethic, active participation in the classroom, and commitment + to helping her peers. Her insatiable curiosity has led her to explore a wide range of areas of study, making her a + versatile and adaptable learner. Patricia is a true academic leader, inspiring other students to pursue their own + educational goals. + +
+
+ Score History +
+
+
+
+ +
+
+ Reading + + Level {user.levels.reading} / Level {user.desiredLevels.reading} + +
+
+
+ +
+
+
+
+
+ +
+
+ Writing + + Level {user.levels.writing} / Level {user.desiredLevels.writing} + +
+
+
+ +
+
+
+
+
+ +
+
+ Listening + + Level {user.levels.listening} / Level {user.desiredLevels.listening} + +
+
+
+ +
+
+
+
+
+ +
+
+ Speaking + + Level {user.levels.speaking} / Level {user.desiredLevels.speaking} + +
+
+
+ +
+
+
+
+ )} ); diff --git a/src/pages/test.tsx b/src/pages/test.tsx index cda40997..bce36bfc 100644 --- a/src/pages/test.tsx +++ b/src/pages/test.tsx @@ -10,6 +10,7 @@ import Sidebar from "@/components/Sidebar"; import dynamic from "next/dynamic"; import {BsCheckCircleFill, BsMicFill, BsPauseCircle, BsPauseFill, BsPlayCircle, BsPlayFill, BsTrashFill} from "react-icons/bs"; import {useEffect, useState} from "react"; +import Layout from "@/components/High/Layout"; const Waveform = dynamic(() => import("../components/Waveform"), {ssr: false}); const ReactMediaRecorder = dynamic(() => import("react-media-recorder").then((mod) => mod.ReactMediaRecorder), { @@ -67,128 +68,122 @@ export default function Page() { {user && ( -
- -
- -
- setMediaBlob(blob)} - render={({status, startRecording, stopRecording, pauseRecording, resumeRecording, clearBlobUrl, mediaBlobUrl}) => ( -
-

Record your answer:

-
+ + setMediaBlob(blob)} + render={({status, startRecording, stopRecording, pauseRecording, resumeRecording, clearBlobUrl, mediaBlobUrl}) => ( +
+

Record your answer:

+
+ {status === "idle" && ( + <> +
{status === "idle" && ( - <> -
- {status === "idle" && ( - { - setRecordingDuration(0); - startRecording(); - setIsRecording(true); - }} - className="h-5 w-5 text-mti-gray-cool cursor-pointer" - /> - )} - + { + setRecordingDuration(0); + startRecording(); + setIsRecording(true); + }} + className="h-5 w-5 text-mti-gray-cool cursor-pointer" + /> )} - {status === "recording" && ( - <> -
- - {Math.round(recordingDuration / 60) - .toString(10) - .padStart(2, "0")} - : - {Math.round(recordingDuration % 60) - .toString(10) - .padStart(2, "0")} - -
-
-
- { - setIsRecording(false); - pauseRecording(); - }} - className="text-red-500 w-8 h-8 cursor-pointer" - /> - { - setIsRecording(false); - stopRecording(); - }} - className="text-mti-green-light w-8 h-8 cursor-pointer" - /> -
- - )} - {status === "paused" && ( - <> -
- - {Math.round(recordingDuration / 60) - .toString(10) - .padStart(2, "0")} - : - {Math.round(recordingDuration % 60) - .toString(10) - .padStart(2, "0")} - -
-
-
- { - setIsRecording(true); - resumeRecording(); - }} - className="text-mti-green-light w-8 h-8 cursor-pointer" - /> - { - setIsRecording(false); - stopRecording(); - }} - className="text-mti-green-light w-8 h-8 cursor-pointer" - /> -
- - )} - {status === "stopped" && mediaBlobUrl && ( - <> - -
- { - setRecordingDuration(0); - clearBlobUrl(); - }} - /> + + )} + {status === "recording" && ( + <> +
+ + {Math.round(recordingDuration / 60) + .toString(10) + .padStart(2, "0")} + : + {Math.round(recordingDuration % 60) + .toString(10) + .padStart(2, "0")} + +
+
+
+ { + setIsRecording(false); + pauseRecording(); + }} + className="text-red-500 w-8 h-8 cursor-pointer" + /> + { + setIsRecording(false); + stopRecording(); + }} + className="text-mti-green-light w-8 h-8 cursor-pointer" + /> +
+ + )} + {status === "paused" && ( + <> +
+ + {Math.round(recordingDuration / 60) + .toString(10) + .padStart(2, "0")} + : + {Math.round(recordingDuration % 60) + .toString(10) + .padStart(2, "0")} + +
+
+
+ { + setIsRecording(true); + resumeRecording(); + }} + className="text-mti-green-light w-8 h-8 cursor-pointer" + /> + { + setIsRecording(false); + stopRecording(); + }} + className="text-mti-green-light w-8 h-8 cursor-pointer" + /> +
+ + )} + {status === "stopped" && mediaBlobUrl && ( + <> + +
+ { + setRecordingDuration(0); + clearBlobUrl(); + }} + /> - { - clearBlobUrl(); - setRecordingDuration(0); - startRecording(); - setIsRecording(true); - }} - className="h-5 w-5 text-mti-gray-cool cursor-pointer" - /> -
- - )} -
-
- )} - /> -
-
-
+ { + clearBlobUrl(); + setRecordingDuration(0); + startRecording(); + setIsRecording(true); + }} + className="h-5 w-5 text-mti-gray-cool cursor-pointer" + /> + + + )} + + + )} + /> + )} );