36e6c017b4
- Added some state logic to make it so it keeps track of the current exam the user is in;
74 lines
2.1 KiB
TypeScript
74 lines
2.1 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
|
import Head from "next/head";
|
|
import Navbar from "@/components/Navbar";
|
|
import {useEffect, useState} from "react";
|
|
import {Module} from "@/interfaces";
|
|
|
|
// 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 [moduleIndex, setModuleIndex] = useState(0);
|
|
const [exam, setExam] = useState<Exam>();
|
|
|
|
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 (
|
|
<>
|
|
<Head>
|
|
<title>Create Next App</title>
|
|
<meta name="description" content="Generated by create next app" />
|
|
<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">
|
|
<Navbar profilePicture={JSON_USER.profilePicture} />
|
|
{renderScreen()}
|
|
</main>
|
|
</>
|
|
);
|
|
}
|