generated from muhtadeetaron/nextjs-template
123 lines
4.0 KiB
TypeScript
123 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import { useSearchParams } from "next/navigation";
|
|
import { useRouter } from "next/navigation";
|
|
import { useEffect, useState } from "react";
|
|
import Header from "@/components/Header";
|
|
import DestructibleAlert from "@/components/DestructibleAlert";
|
|
import BackgroundWrapper from "@/components/BackgroundWrapper";
|
|
import { API_URL } from "@/lib/auth";
|
|
import { Loader, RefreshCw } from "lucide-react";
|
|
|
|
interface Mock {
|
|
id: string;
|
|
title: string;
|
|
rating: number;
|
|
}
|
|
export default function PaperScreen() {
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
const name = searchParams.get("name") || "";
|
|
|
|
const [questions, setQuestions] = useState<Mock[] | null>(null);
|
|
const [errorMsg, setErrorMsg] = useState<string | null>(null);
|
|
const [refreshing, setRefreshing] = useState<boolean>(false);
|
|
const [componentKey, setComponentKey] = useState<number>(0);
|
|
|
|
async function fetchMocks() {
|
|
try {
|
|
const questionResponse = await fetch(`${API_URL}/mocks`, {
|
|
method: "GET",
|
|
});
|
|
const fetchedQuestionData: Mock[] = await questionResponse.json();
|
|
setQuestions(fetchedQuestionData);
|
|
} catch (error) {
|
|
setErrorMsg(error instanceof Error ? error.message : "An error occurred");
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (name) {
|
|
fetchMocks();
|
|
}
|
|
}, [name]);
|
|
|
|
const onRefresh = async () => {
|
|
setRefreshing(true);
|
|
|
|
await fetchMocks();
|
|
setComponentKey((prevKey) => prevKey + 1);
|
|
setTimeout(() => {
|
|
setRefreshing(false);
|
|
}, 1000);
|
|
};
|
|
|
|
if (errorMsg) {
|
|
return (
|
|
<BackgroundWrapper>
|
|
<Header displayTabTitle={name} />
|
|
<div className="overflow-y-auto">
|
|
<div className="mt-5 px-5">
|
|
<DestructibleAlert text={errorMsg} extraStyles="" />
|
|
</div>
|
|
<div className="flex justify-center mt-4">
|
|
<button
|
|
onClick={onRefresh}
|
|
disabled={refreshing}
|
|
className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50"
|
|
>
|
|
{refreshing ? <Loader /> : <RefreshCw />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</BackgroundWrapper>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<BackgroundWrapper>
|
|
<div>
|
|
<Header displayTabTitle={name} />
|
|
<div className="mx-10 pt-10 overflow-y-auto">
|
|
<div className="border border-[#c0dafc] flex flex-col gap-4 w-full rounded-[25px] p-4">
|
|
{questions ? (
|
|
questions.map((mock) => (
|
|
<div key={mock.id}>
|
|
<button
|
|
onClick={() =>
|
|
router.push(
|
|
`/exam/pretest?unitname=${name}&id=${mock.id}&title=${mock.title}&rating=${mock.rating}`
|
|
)
|
|
}
|
|
className="w-full border-2 border-[#B0C2DA] py-4 rounded-[10px] px-6 gap-2 text-left hover:bg-gray-50 transition-colors"
|
|
>
|
|
<h3 className="text-xl font-medium">{mock.title}</h3>
|
|
<p className="text-md font-normal">
|
|
Rating: {mock.rating} / 10
|
|
</p>
|
|
</button>
|
|
</div>
|
|
))
|
|
) : (
|
|
<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-xl font-medium text-center">Loading...</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex justify-center mt-4">
|
|
<button
|
|
onClick={onRefresh}
|
|
disabled={refreshing}
|
|
className="p-2 bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50 rounded-full"
|
|
>
|
|
{refreshing ? <Loader /> : <RefreshCw />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* <CustomBackHandler fallbackRoute="unit" useCustomHandler={false} /> */}
|
|
</BackgroundWrapper>
|
|
);
|
|
}
|