generated from muhtadeetaron/nextjs-template
254 lines
8.3 KiB
TypeScript
254 lines
8.3 KiB
TypeScript
"use client";
|
|
|
|
import { useRouter, useSearchParams } from "next/navigation";
|
|
import { Suspense, useEffect, useState } from "react";
|
|
import { ArrowLeft, HelpCircle, Clock, XCircle } from "lucide-react";
|
|
import DestructibleAlert from "@/components/DestructibleAlert";
|
|
import BackgroundWrapper from "@/components/BackgroundWrapper";
|
|
import { API_URL, getToken } from "@/lib/auth";
|
|
import { useExam } from "@/context/ExamContext";
|
|
import { Test } from "@/types/exam";
|
|
import { Metadata, MockMeta, SubjectMeta, TopicMeta } from "@/types/exam";
|
|
|
|
type MetadataType = "mock" | "subject" | "topic";
|
|
|
|
type MetadataMap = {
|
|
mock: MockMeta;
|
|
subject: SubjectMeta;
|
|
topic: TopicMeta;
|
|
};
|
|
|
|
function PretestPageContent() {
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
const { startExam, setCurrentExam } = useExam();
|
|
|
|
// Get params from URL search params
|
|
const id = searchParams.get("test_id") || "";
|
|
const typeParam = searchParams.get("type");
|
|
const type =
|
|
typeParam === "mock" || typeParam === "subject" || typeParam === "topic"
|
|
? typeParam
|
|
: null;
|
|
|
|
const [metadata, setMetadata] = useState<MetadataMap[MetadataType] | null>(
|
|
null
|
|
);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string>();
|
|
|
|
function fetchMetadata<T extends MetadataType>(
|
|
type: T,
|
|
data: unknown
|
|
): MetadataMap[T] {
|
|
return data as MetadataMap[T]; // you'd validate in real code
|
|
}
|
|
|
|
useEffect(() => {
|
|
async function fetchQuestions() {
|
|
if (!id || !type) return;
|
|
|
|
try {
|
|
setLoading(true);
|
|
const token = await getToken();
|
|
const questionResponse = await fetch(`${API_URL}/tests/${type}/${id}`, {
|
|
method: "GET",
|
|
headers: {
|
|
authorization: `Bearer ${token}`,
|
|
},
|
|
});
|
|
|
|
if (!questionResponse.ok) {
|
|
throw new Error("Failed to fetch questions");
|
|
}
|
|
|
|
const data = await questionResponse.json();
|
|
const fetchedMetadata = fetchMetadata(type, data.metadata);
|
|
|
|
setMetadata(fetchedMetadata);
|
|
} catch (error) {
|
|
console.error(error);
|
|
setError(error instanceof Error ? error.message : "An error occurred");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
fetchQuestions();
|
|
}, [id, type]);
|
|
|
|
if (error) {
|
|
return (
|
|
<BackgroundWrapper>
|
|
<div className="min-h-screen">
|
|
<div className="mx-10 mt-10">
|
|
<button
|
|
onClick={() => router.push("/categories/subjects")}
|
|
className="mb-4"
|
|
>
|
|
<ArrowLeft size={30} color="black" />
|
|
</button>
|
|
<DestructibleAlert text={error} extraStyles="" />
|
|
</div>
|
|
</div>
|
|
</BackgroundWrapper>
|
|
);
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<BackgroundWrapper>
|
|
<div className="min-h-screen">
|
|
<div className="mx-10 pt-10">
|
|
<button
|
|
onClick={() => router.push(`/categories/${type}s`)}
|
|
className="mb-4"
|
|
>
|
|
<ArrowLeft size={30} color="black" />
|
|
</button>
|
|
<div className="flex flex-col items-center justify-center">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mb-4"></div>
|
|
<p className="text-lg font-medium text-gray-900">Loading...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</BackgroundWrapper>
|
|
);
|
|
}
|
|
|
|
// function handleStartExam() {
|
|
// if (!examData) return;
|
|
|
|
// setCurrentExam(examData);
|
|
// startExam(examData);
|
|
// router.push(`/exam/${id}?time=${metadata?.metadata.duration}`);
|
|
// }
|
|
return (
|
|
<BackgroundWrapper>
|
|
<div className="min-h-screen flex flex-col justify-between">
|
|
<div className="flex-1 overflow-y-auto mb-20">
|
|
{metadata ? (
|
|
<div className="mx-10 mt-10 gap-6 pb-6 space-y-6">
|
|
<button onClick={() => router.back()}>
|
|
<ArrowLeft size={30} color="black" />
|
|
</button>
|
|
|
|
<h1 className="text-4xl font-semibold text-[#113768]">
|
|
{metadata.name}
|
|
</h1>
|
|
|
|
<p className="text-xl font-medium text-[#113768]">
|
|
Rating: 8 / 10
|
|
</p>
|
|
|
|
<div className="border-[1.5px] border-[#226DCE]/30 rounded-[25px] gap-8 py-7 px-5 space-y-8">
|
|
<div className="flex gap-5 items-center">
|
|
<HelpCircle size={40} color="#113768" />
|
|
<div className="space-y-2">
|
|
<p className="font-bold text-4xl text-[#113768]">
|
|
{metadata.num_questions}
|
|
</p>
|
|
<p className="font-normal text-lg">
|
|
Multiple Choice Questions
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-5 items-center">
|
|
<Clock size={40} color="#113768" />
|
|
<div className="space-y-2">
|
|
<p className="font-bold text-4xl text-[#113768]">
|
|
{String(metadata.time_limit_minutes)} mins
|
|
</p>
|
|
<p className="font-normal text-lg">Time Taken</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-5 items-center">
|
|
<XCircle size={40} color="#113768" />
|
|
<div className="space-y-2">
|
|
<p className="font-bold text-4xl text-[#113768]">
|
|
{metadata.deduction} marks
|
|
</p>
|
|
<p className="font-normal text-lg">
|
|
From each wrong answer
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-[1.5px] border-[#226DCE]/30 rounded-[25px] gap-4 py-7 px-5 space-y-4">
|
|
<h2 className="text-xl font-bold">Ready yourself!</h2>
|
|
|
|
<div className="flex pr-4">
|
|
<span className="mx-4">•</span>
|
|
<p className="font-normal text-lg">
|
|
You must complete this test in one session - make sure your
|
|
internet connection is reliable.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex pr-4">
|
|
<span className="mx-4">•</span>
|
|
<p className="font-normal text-lg">
|
|
There is negative marking for the wrong answer.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex pr-4">
|
|
<span className="mx-4">•</span>
|
|
<p className="font-normal text-lg">
|
|
The more you answer correctly, the better chance you have of
|
|
winning a badge.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex pr-4">
|
|
<span className="mx-4">•</span>
|
|
<p className="font-normal text-lg">
|
|
You can retake this test however many times you want. But,
|
|
you will earn points only once.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="mt-60 flex flex-col items-center">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mb-4"></div>
|
|
<p className="text-xl font-medium text-center">Loading...</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => console.log("Exam started")}
|
|
className="fixed bottom-0 w-full bg-[#113768] h-[78px] justify-center items-center flex text-white text-2xl font-bold"
|
|
>
|
|
Start Test
|
|
</button>
|
|
|
|
{/* <CustomBackHandler fallbackRoute="paper" /> */}
|
|
</div>
|
|
</BackgroundWrapper>
|
|
);
|
|
}
|
|
|
|
export default function PretestPage() {
|
|
return (
|
|
<Suspense
|
|
fallback={
|
|
<BackgroundWrapper>
|
|
<div className="min-h-screen">
|
|
<div className="mx-10 mt-10 flex flex-col justify-center items-center">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-900 mb-4"></div>
|
|
<p className="text-lg font-medium text-gray-900">Loading...</p>
|
|
</div>
|
|
</div>
|
|
</BackgroundWrapper>
|
|
}
|
|
>
|
|
<PretestPageContent />
|
|
</Suspense>
|
|
);
|
|
}
|