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

Updated the timer to be on the Navbar, making it more mobile friendly

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-04-17 18:42:28 +01:00
parent 378b6b1693
commit 13c8fae588
8 changed files with 31 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/LevelProgressBar.tsx
View File

@@ -7,7 +7,7 @@ interface Props {
progressBarWidth?: string;
}
export default function LevelProgressBar({experience, className, progressBarWidth = "w-64"}: Props) {
export default function LevelProgressBar({experience, className, progressBarWidth = "w-32 md:w-64"}: Props) {
const levelResult = levelCalculator(experience);
return (

13
src/components/Navbar.tsx
View File

@@ -6,10 +6,11 @@ import {MenuItem} from "primereact/menuitem";
interface Props {
profilePicture: string;
timer?: number;
}
/* eslint-disable @next/next/no-img-element */
export default function Navbar({profilePicture}: Props) {
export default function Navbar({profilePicture, timer}: Props) {
const router = useRouter();
const logout = async () => {
@@ -49,9 +50,17 @@ export default function Navbar({profilePicture}: Props) {
},
];
const end = timer && (
<span className="pr-2 font-semibold">
{Math.floor(timer / 60) < 10 ? "0" : ""}
{Math.floor(timer / 60)}:{timer % 60 < 10 ? "0" : ""}
{timer % 60}
</span>
);
return (
<div className="bg-neutral-100 z-10 w-full p-2">
<Menubar model={items} />
<Menubar model={items} end={end} />
</div>
);
}

19
src/exams/Listening.tsx
View File

@@ -1,5 +1,5 @@
import {ListeningExam, UserSolution} from "@/interfaces/exam";
import {useEffect, useState} from "react";
import {useState} from "react";
import Icon from "@mdi/react";
import {mdiArrowRight} from "@mdi/js";
import clsx from "clsx";
@@ -16,18 +16,8 @@ interface Props {
export default function Listening({exam, showSolutions = false, onFinish}: Props) {
const [exerciseIndex, setExerciseIndex] = useState(-1);
const [timesListened, setTimesListened] = useState(0);
const [timer, setTimer] = useState<number>();
const [userSolutions, setUserSolutions] = useState<UserSolution[]>([]);
useEffect(() => {
setTimer(exam.minTimer * 60);
const timerInterval = setInterval(() => setTimer((prev) => prev && prev - 1), 1000);
return () => {
clearInterval(timerInterval);
};
}, [exam.minTimer]);
const nextExercise = (solution?: UserSolution) => {
if (solution) {
setUserSolutions((prev) => [...prev.filter((x) => x.id !== solution.id), solution]);
@@ -78,13 +68,6 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
return (
<>
<div className="w-full h-full relative flex flex-col gap-8 items-center justify-center p-8 px-16 overflow-hidden">
{timer && (
<div className="absolute w-24 top-8 text-center right-8 font-semibold text-lg border-ielts-listening border-2 p-2 rounded-xl bg-ielts-listening-transparent text-white">
{Math.floor(timer / 60) < 10 ? "0" : ""}
{Math.floor(timer / 60)}:{timer % 60 < 10 ? "0" : ""}
{timer % 60}
</div>
)}
{renderAudioPlayer()}
{exerciseIndex > -1 &&
exerciseIndex < exam.exercises.length &&

17
src/exams/Reading.tsx
View File

@@ -76,18 +76,8 @@ function TextModal({isOpen, title, content, onClose}: {isOpen: boolean; title: s
export default function Reading({exam, showSolutions = false, onFinish}: Props) {
const [exerciseIndex, setExerciseIndex] = useState(-1);
const [showTextModal, setShowTextModal] = useState(false);
const [timer, setTimer] = useState<number>();
const [userSolutions, setUserSolutions] = useState<UserSolution[]>([]);
useEffect(() => {
setTimer(exam.minTimer * 60);
const timerInterval = setInterval(() => setTimer((prev) => prev && prev - 1), 1000);
return () => {
clearInterval(timerInterval);
};
}, [exam.minTimer]);
const nextExercise = (solution?: UserSolution) => {
if (solution) {
setUserSolutions((prev) => [...prev.filter((x) => x.id !== solution.id), solution]);
@@ -131,13 +121,6 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
<>
<TextModal {...exam.text} isOpen={showTextModal} onClose={() => setShowTextModal(false)} />
<div className="w-full h-full relative flex flex-col gap-8 items-center justify-center p-8 px-16 overflow-hidden">
{timer && (
<div className="absolute w-24 top-8 text-center right-8 font-semibold text-lg border-ielts-reading border-2 p-2 rounded-xl bg-ielts-reading-transparent text-white">
{Math.floor(timer / 60) < 10 ? "0" : ""}
{Math.floor(timer / 60)}:{timer % 60 < 10 ? "0" : ""}
{timer % 60}
</div>
)}
{exerciseIndex === -1 && renderText()}
{exerciseIndex > -1 &&
exerciseIndex < exam.exercises.length &&

8
src/exams/Selection.tsx
View File

@@ -26,10 +26,10 @@ export default function Selection({user, onStart}: Props) {
return (
<>
<div className="w-full h-full relative">
<section className="h-full w-full flex flex-col items-center justify-center">
<section className="h-full w-full flex flex-col items-center justify-center gap-8">
<ProfileLevel user={user} className="h-1/2" />
<div className="h-1/2 flex flex-col">
<div className="h-1/2 flex gap-8">
<div className="h-1/2 flex flex-col gap-8">
<div className="h-1/2 items-center flex flex-col md:flex-row gap-8">
<div
role="button"
tabIndex={0}
@@ -83,7 +83,7 @@ export default function Selection({user, onStart}: Props) {
<span>Speaking</span>
</div>
</div>
<div className="w-full flex justify-between">
<div className="w-full flex flex-col gap-4 md:flex-row justify-between">
<button onClick={() => router.push("/")} className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)}>
<div className="absolute left-4">
<Icon path={mdiArrowLeft} color="white" size={1} />

17
src/exams/Speaking.tsx
View File

@@ -16,18 +16,8 @@ interface Props {
export default function Speaking({exam, showSolutions = false, onFinish}: Props) {
const [exerciseIndex, setExerciseIndex] = useState(0);
const [timer, setTimer] = useState<number>();
const [userSolutions, setUserSolutions] = useState<UserSolution[]>([]);
useEffect(() => {
setTimer(exam.minTimer * 60);
const timerInterval = setInterval(() => setTimer((prev) => prev && prev - 1), 1000);
return () => {
clearInterval(timerInterval);
};
}, [exam.minTimer]);
const nextExercise = (solution?: UserSolution) => {
if (solution) {
setUserSolutions((prev) => [...prev.filter((x) => x.id !== solution.id), solution]);
@@ -51,13 +41,6 @@ export default function Speaking({exam, showSolutions = false, onFinish}: Props)
return (
<div className="w-full h-full relative flex flex-col gap-8 items-center justify-center p-8 px-16 overflow-hidden">
{timer && (
<div className="absolute w-24 top-8 text-center right-8 font-semibold text-lg border-ielts-speaking border-2 p-2 rounded-xl bg-ielts-speaking-transparent text-white">
{Math.floor(timer / 60) < 10 ? "0" : ""}
{Math.floor(timer / 60)}:{timer % 60 < 10 ? "0" : ""}
{timer % 60}
</div>
)}
{exerciseIndex > -1 &&
exerciseIndex < exam.exercises.length &&
!showSolutions &&

17
src/exams/Writing.tsx
View File

@@ -16,18 +16,8 @@ interface Props {
export default function Writing({exam, showSolutions = false, onFinish}: Props) {
const [exerciseIndex, setExerciseIndex] = useState(0);
const [timer, setTimer] = useState<number>();
const [userSolutions, setUserSolutions] = useState<UserSolution[]>([]);
useEffect(() => {
setTimer(exam.minTimer * 60);
const timerInterval = setInterval(() => setTimer((prev) => prev && prev - 1), 1000);
return () => {
clearInterval(timerInterval);
};
}, [exam.minTimer]);
const nextExercise = (solution?: UserSolution) => {
if (solution) {
setUserSolutions((prev) => [...prev.filter((x) => x.id !== solution.id), solution]);
@@ -51,13 +41,6 @@ export default function Writing({exam, showSolutions = false, onFinish}: Props)
return (
<div className="w-full h-full relative flex flex-col gap-8 items-center justify-center p-8 px-16 overflow-hidden">
{timer && (
<div className="absolute w-24 top-8 text-center right-8 font-semibold text-lg border-ielts-writing border-2 p-2 rounded-xl bg-ielts-writing-transparent text-white">
{Math.floor(timer / 60) < 10 ? "0" : ""}
{Math.floor(timer / 60)}:{timer % 60 < 10 ? "0" : ""}
{timer % 60}
</div>
)}
{exerciseIndex > -1 &&
exerciseIndex < exam.exercises.length &&
!showSolutions &&

16
src/pages/exam/index.tsx
View File

@@ -42,6 +42,7 @@ export default function Page({user}: {user: User}) {
const [exam, setExam] = useState<Exam>();
const [userSolutions, setUserSolutions] = useState<UserSolution[]>([]);
const [showSolutions, setShowSolutions] = useState(false);
const [timer, setTimer] = useState(-1);
useEffect(() => {
(async () => {
@@ -53,6 +54,17 @@ export default function Page({user}: {user: User}) {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedModules, moduleIndex]);
useEffect(() => {
if (exam) {
setTimer(exam.minTimer * 60);
const timerInterval = setInterval(() => setTimer((prev) => prev && prev - 1), 1000);
return () => {
clearInterval(timerInterval);
};
}
}, [exam]);
const getExam = async (module: Module): Promise<Exam | undefined> => {
const examRequest = await axios<Exam[]>(`/api/exam/${module}`);
if (examRequest.status !== 200) {
@@ -146,9 +158,9 @@ export default function Page({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-screen flex flex-col items-center bg-neutral-100 text-black">
<main className="w-full h-full md:h-screen flex flex-col items-center bg-neutral-100 text-black">
<ToastContainer />
<Navbar profilePicture={user.profilePicture} />
<Navbar profilePicture={user.profilePicture} timer={exam && timer} />
{renderScreen()}
</main>
</>