generated from muhtadeetaron/nextjs-template
fix(ts): refactor codebase for capacitor setup
This commit is contained in:
shafin-r
@ -6,71 +6,11 @@ import { useTimer } from "@/context/TimerContext";
|
||||
import { useExam } from "@/context/ExamContext";
|
||||
import { API_URL, getToken } from "@/lib/auth";
|
||||
import Header from "@/components/Header";
|
||||
import { Bookmark, BookmarkCheck } from "lucide-react";
|
||||
import { useModal } from "@/context/ModalContext";
|
||||
import Modal from "@/components/ExamModal";
|
||||
import { Question } from "@/types/exam";
|
||||
import QuestionItem from "@/components/QuestionItem";
|
||||
|
||||
// Types
|
||||
// interface Question {
|
||||
// id: number;
|
||||
// question: string;
|
||||
// options: Record<string, string>;
|
||||
// }
|
||||
|
||||
// interface QuestionItemProps {
|
||||
// question: Question;
|
||||
// selectedAnswer?: string;
|
||||
// handleSelect: (questionId: number, option: string) => void;
|
||||
// }
|
||||
|
||||
// const QuestionItem = React.memo<QuestionItemProps>(
|
||||
// ({ question, selectedAnswer, handleSelect }) => {
|
||||
// const [bookmark, setBookmark] = useState(false);
|
||||
|
||||
// return (
|
||||
// <div className="border-[0.5px] border-[#8abdff]/60 rounded-2xl p-4 flex flex-col">
|
||||
// <h3 className="text-xl font-medium mb-[20px]">
|
||||
// {question.id}. {question.question}
|
||||
// </h3>
|
||||
// <div className="flex justify-between items-center">
|
||||
// <div></div>
|
||||
// <button onClick={() => setBookmark(!bookmark)}>
|
||||
// {bookmark ? (
|
||||
// <BookmarkCheck size={25} color="#113768" />
|
||||
// ) : (
|
||||
// <Bookmark size={25} color="#113768" />
|
||||
// )}
|
||||
// </button>
|
||||
// </div>
|
||||
// <div className="flex flex-col gap-4 items-start">
|
||||
// {Object.entries(question.options).map(([key, value]) => (
|
||||
// <button
|
||||
// key={key}
|
||||
// className="flex items-center gap-3"
|
||||
// onClick={() => handleSelect(question.id, key)}
|
||||
// >
|
||||
// <span
|
||||
// className={`flex items-center rounded-full border px-1.5 ${
|
||||
// selectedAnswer === key
|
||||
// ? "text-white bg-[#113768] border-[#113768]"
|
||||
// : ""
|
||||
// }`}
|
||||
// >
|
||||
// {key.toUpperCase()}
|
||||
// </span>
|
||||
// <span className="option-description">{value}</span>
|
||||
// </button>
|
||||
// ))}
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
// );
|
||||
|
||||
// QuestionItem.displayName = "QuestionItem";
|
||||
|
||||
export default function ExamPage() {
|
||||
// All hooks at the top - no conditional calls
|
||||
const router = useRouter();
|
||||
@ -280,13 +220,7 @@ export default function ExamPage() {
|
||||
// Render the main exam interface
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<Header
|
||||
examDuration={time}
|
||||
displayTabTitle={null}
|
||||
image={undefined}
|
||||
displayUser={undefined}
|
||||
displaySubject={undefined}
|
||||
/>
|
||||
<Header examDuration={time} />
|
||||
<Modal open={isOpen} onClose={close} title={currentExam?.title}>
|
||||
{currentAttempt ? (
|
||||
<div>
|
||||
@ -301,8 +235,8 @@ export default function ExamPage() {
|
||||
<p className="">
|
||||
Skipped:{" "}
|
||||
<span className="text-yellow-600 font-bold">
|
||||
{currentExam?.questions.length -
|
||||
currentAttempt?.answers.length}
|
||||
{(currentExam?.questions?.length ?? 0) -
|
||||
(currentAttempt?.answers?.length ?? 0)}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Suspense, useEffect, useState } from "react";
|
||||
import { ArrowLeft, HelpCircle, Clock, XCircle } from "lucide-react";
|
||||
import DestructibleAlert from "@/components/DestructibleAlert";
|
||||
import BackgroundWrapper from "@/components/BackgroundWrapper";
|
||||
@ -18,47 +18,46 @@ interface Metadata {
|
||||
};
|
||||
}
|
||||
|
||||
export default function PretestPage() {
|
||||
function PretestPageContent() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const [examData, setExamData] = useState<Exam>();
|
||||
const { startExam, setCurrentExam } = useExam();
|
||||
|
||||
// Get params from URL search params
|
||||
const name = searchParams.get("name") || "";
|
||||
const id = searchParams.get("id") || "";
|
||||
const title = searchParams.get("title") || "";
|
||||
const rating = searchParams.get("rating") || "";
|
||||
|
||||
const [metadata, setMetadata] = useState<Metadata | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
async function fetchQuestions() {
|
||||
if (!id) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const questionResponse = await fetch(`${API_URL}/mock/${id}`, {
|
||||
method: "GET",
|
||||
});
|
||||
if (!questionResponse.ok) {
|
||||
throw new Error("Failed to fetch questions");
|
||||
}
|
||||
const data = await questionResponse.json();
|
||||
const fetchedMetadata: Metadata = data;
|
||||
|
||||
setExamData(data);
|
||||
setMetadata(fetchedMetadata);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
setError(error instanceof Error ? error.message : "An error occurred");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
const [error, setError] = useState<string>();
|
||||
console.log(loading);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchQuestions() {
|
||||
if (!id) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const questionResponse = await fetch(`${API_URL}/mock/${id}`, {
|
||||
method: "GET",
|
||||
});
|
||||
if (!questionResponse.ok) {
|
||||
throw new Error("Failed to fetch questions");
|
||||
}
|
||||
const data = await questionResponse.json();
|
||||
const fetchedMetadata: Metadata = data;
|
||||
|
||||
setExamData(data);
|
||||
setMetadata(fetchedMetadata);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
setError(error instanceof Error ? error.message : "An error occurred");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
if (id) {
|
||||
fetchQuestions();
|
||||
}
|
||||
@ -74,15 +73,16 @@ export default function PretestPage() {
|
||||
</button>
|
||||
<DestructibleAlert text={error} extraStyles="" />
|
||||
</div>
|
||||
{/* <CustomBackHandler fallbackRoute="paper" /> */}
|
||||
</div>
|
||||
</BackgroundWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
function handleStartExam() {
|
||||
if (!examData) return;
|
||||
|
||||
setCurrentExam(examData);
|
||||
startExam(examData); // Pass examData directly
|
||||
startExam(examData);
|
||||
router.push(`/exam/${id}?time=${metadata?.metadata.duration}`);
|
||||
}
|
||||
return (
|
||||
@ -192,3 +192,22 @@ export default function PretestPage() {
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
"use client";
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useExam, useExamResults } from "@/context/ExamContext";
|
||||
import { useExam } from "@/context/ExamContext";
|
||||
import { useEffect, useState } from "react";
|
||||
import React from "react";
|
||||
import { ArrowLeft } from "lucide-react";
|
||||
import SlidingGallery from "@/components/SlidingGallery";
|
||||
import QuestionItem from "@/components/QuestionItem";
|
||||
import { getResultViews } from "@/lib/gallery-views";
|
||||
import { Question } from "@/types/exam";
|
||||
|
||||
export default function ResultsPage() {
|
||||
const router = useRouter();
|
||||
@ -58,15 +59,15 @@ export default function ResultsPage() {
|
||||
|
||||
const apiResponse = getApiResponse();
|
||||
|
||||
const timeTaken =
|
||||
currentAttempt.endTime && currentAttempt.startTime
|
||||
? Math.round(
|
||||
(currentAttempt.endTime.getTime() -
|
||||
currentAttempt.startTime.getTime()) /
|
||||
1000 /
|
||||
60
|
||||
)
|
||||
: 0;
|
||||
// const timeTaken =
|
||||
// currentAttempt.endTime && currentAttempt.startTime
|
||||
// ? Math.round(
|
||||
// (currentAttempt.endTime.getTime() -
|
||||
// currentAttempt.startTime.getTime()) /
|
||||
// 1000 /
|
||||
// 60
|
||||
// )
|
||||
// : 0;
|
||||
|
||||
const views = getResultViews(currentAttempt);
|
||||
|
||||
@ -98,11 +99,13 @@ export default function ResultsPage() {
|
||||
Solutions
|
||||
</h3>
|
||||
<div className="flex flex-col gap-7">
|
||||
{apiResponse.questions.map((question) => (
|
||||
{apiResponse.questions.map((question: Question) => (
|
||||
<QuestionItem
|
||||
key={question.id}
|
||||
question={question}
|
||||
selectedAnswer={currentAttempt.answers[question.id - 1]}
|
||||
selectedAnswer={
|
||||
currentAttempt.answers[parseInt(question.id) - 1]
|
||||
}
|
||||
mode="result"
|
||||
/>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user