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

- Updated the code to remove the exam pages to components;

Browse Source 
- Added some state logic to make it so it keeps track of the current exam the user is in;
This commit is contained in:
Tiago Ribeiro
2023-04-06 11:18:34 +01:00
parent 780d208675
commit 36e6c017b4
7 changed files with 377 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,25 +1,59 @@
/* eslint-disable @next/next/no-img-element */
import Head from "next/head";
import Navbar from "@/components/Navbar";
import Icon from "@mdi/react";
import {mdiAccountVoice, mdiArrowLeft, mdiArrowRight, mdiBookOpen, mdiHeadphones, mdiPen} from "@mdi/js";
import {useState} from "react";
import {useEffect, useState} from "react";
import {Module} from "@/interfaces";
import clsx from "clsx";
import {useRouter} from "next/router";
import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
import ProfileLevel from "@/components/ProfileLevel";
// TODO: Remove this import
import JSON_USER from "@/demo/user.json";
import JSON_READING from "@/demo/reading.json";
import JSON_LISTENING from "@/demo/listening.json";
import Selection from "@/exams/Selection";
import Reading from "@/exams/Reading";
import {Exam, ListeningExam, ReadingExam} from "@/interfaces/exam";
import Listening from "@/exams/Listening";
export default function Home() {
const [selectedModules, setSelectedModules] = useState<Module[]>([]);
const router = useRouter();
const [moduleIndex, setModuleIndex] = useState(0);
const [exam, setExam] = useState<Exam>();
const toggleModule = (module: Module) => {
const modules = selectedModules.filter((x) => x !== module);
setSelectedModules((prev) => (prev.includes(module) ? modules : [...modules, module]));
useEffect(() => {
if (selectedModules.length > 0 && moduleIndex < selectedModules.length) {
setExam(getExam(selectedModules[moduleIndex]));
}
}, [selectedModules, moduleIndex]);
const getExam = (module: Module): Exam | undefined => {
switch (module) {
case "reading":
return JSON_READING as ReadingExam;
case "listening":
return JSON_LISTENING as ListeningExam;
}
return undefined;
};
const renderScreen = () => {
if (selectedModules.length === 0) {
return <Selection user={JSON_USER} onStart={setSelectedModules} />;
}
if (moduleIndex >= selectedModules.length) {
return <>Finished!</>;
}
if (exam && exam.module === "reading") {
return <Reading exam={exam} onFinish={() => setModuleIndex((prev) => prev + 1)} />;
}
if (exam && exam.module === "listening") {
return <Listening exam={exam} onFinish={() => setModuleIndex((prev) => prev + 1)} />;
}
return <>Loading...</>;
};
return (
@@ -32,84 +66,7 @@ export default function Home() {
</Head>
<main className="w-full h-screen flex flex-col items-center bg-neutral-100 text-black">
<Navbar profilePicture={JSON_USER.profilePicture} />
<div className="w-full h-full relative">
<section className="h-full w-full flex flex-col items-center justify-center">
{/* //TODO: Change this section to work with the user account */}
<ProfileLevel user={JSON_USER} className="h-1/2" />
<div className="h-1/2 flex flex-col">
<div className="h-1/2 flex gap-8">
<div
role="button"
tabIndex={0}
onClick={() => 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 ",
)}>
<Icon path={mdiBookOpen} color="white" size={3} />
<span>Reading</span>
</div>
<div
role="button"
tabIndex={0}
onClick={() => 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 ",
)}>
<Icon path={mdiHeadphones} color="white" size={3} />
<span>Listening</span>
</div>
<div
role="button"
tabIndex={0}
onClick={() => 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 ",
)}>
<Icon path={mdiAccountVoice} color="white" size={3} />
<span>Speaking</span>
</div>
<div
role="button"
tabIndex={0}
onClick={() => 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 ",
)}>
<Icon path={mdiPen} color="white" size={3} />
<span>Writing</span>
</div>
</div>
<div className="w-full flex 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} />
</div>
Back
</button>
<button
className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}
onClick={() => router.push("/exam/reading/demo")}>
Start
<div className="absolute right-4">
<Icon path={mdiArrowRight} color="white" size={1} />
</div>
</button>
</div>
</div>
</section>
</div>
{renderScreen()}
</main>
</>
);