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

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 &&