generated from muhtadeetaron/nextjs-template
fix(ui): refactor results page for exam results logic
This commit is contained in:
shafin-r
@ -1,136 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React, { createContext, useContext, useState, useEffect } from "react";
|
||||
import { useRouter, usePathname } from "next/navigation";
|
||||
import { UserData } from "@/types/auth";
|
||||
import { API_URL } from "@/lib/auth";
|
||||
|
||||
interface AuthContextType {
|
||||
token: string | null;
|
||||
setToken: (token: string | null) => void;
|
||||
logout: () => void;
|
||||
isLoading: boolean;
|
||||
user: UserData | null;
|
||||
fetchUser: () => Promise<void>;
|
||||
}
|
||||
|
||||
const AuthContext = createContext<AuthContextType | undefined>(undefined);
|
||||
|
||||
// Cookie utility functions
|
||||
const getCookie = (name: string): string | null => {
|
||||
if (typeof document === "undefined") return null;
|
||||
|
||||
const value = `; ${document.cookie}`;
|
||||
const parts = value.split(`; ${name}=`);
|
||||
if (parts.length === 2) {
|
||||
return parts.pop()?.split(";").shift() || null;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const setCookie = (
|
||||
name: string,
|
||||
value: string | null,
|
||||
days: number = 7
|
||||
): void => {
|
||||
if (typeof document === "undefined") return;
|
||||
|
||||
if (value === null) {
|
||||
document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; SameSite=Strict; Secure`;
|
||||
} else {
|
||||
const expires = new Date();
|
||||
expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
|
||||
document.cookie = `${name}=${value}; expires=${expires.toUTCString()}; path=/; SameSite=Strict; Secure`;
|
||||
}
|
||||
};
|
||||
|
||||
export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
|
||||
children,
|
||||
}) => {
|
||||
const [token, setTokenState] = useState<string | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [user, setUser] = useState<UserData | null>(null);
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
const setToken = (newToken: string | null) => {
|
||||
setTokenState(newToken);
|
||||
setCookie("authToken", newToken);
|
||||
};
|
||||
|
||||
// Fetch user info from API
|
||||
const fetchUser = async () => {
|
||||
if (!token) return;
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/me/profile/`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error("Failed to fetch user info");
|
||||
}
|
||||
const data: UserData = await res.json();
|
||||
setUser(data);
|
||||
} catch (error) {
|
||||
console.error("Error fetching user:", error);
|
||||
setUser(null);
|
||||
logout();
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const initializeAuth = async () => {
|
||||
const storedToken = getCookie("authToken");
|
||||
|
||||
if (storedToken) {
|
||||
setTokenState(storedToken);
|
||||
|
||||
if (
|
||||
pathname === "/" ||
|
||||
pathname === "/login" ||
|
||||
pathname === "/register"
|
||||
) {
|
||||
router.replace("/home");
|
||||
}
|
||||
|
||||
// Fetch user info when token is found
|
||||
await fetchUser();
|
||||
} else {
|
||||
const publicPages = ["/", "/login", "/register"];
|
||||
if (!publicPages.includes(pathname)) {
|
||||
router.replace("/");
|
||||
}
|
||||
}
|
||||
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
initializeAuth();
|
||||
}, [pathname, router]);
|
||||
|
||||
const logout = () => {
|
||||
setTokenState(null);
|
||||
setUser(null);
|
||||
setCookie("authToken", null);
|
||||
router.replace("/login");
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthContext.Provider
|
||||
value={{ token, setToken, logout, isLoading, user, fetchUser }}
|
||||
>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useAuth = () => {
|
||||
const context = useContext(AuthContext);
|
||||
if (!context) {
|
||||
throw new Error("useAuth must be used within an AuthProvider");
|
||||
}
|
||||
return context;
|
||||
};
|
||||
@ -1,100 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React, { createContext, useContext, useState } from "react";
|
||||
import { Test, Answer } from "@/types/exam";
|
||||
import { API_URL } from "@/lib/auth";
|
||||
import { getToken } from "@/lib/auth";
|
||||
|
||||
interface ExamContextType {
|
||||
test: Test | null;
|
||||
answers: Answer[];
|
||||
startExam: (testType: string, testId: string) => Promise<void>;
|
||||
setAnswer: (questionIndex: number, answer: Answer) => void;
|
||||
submitExam: () => Promise<void>;
|
||||
cancelExam: () => void;
|
||||
}
|
||||
|
||||
const ExamContext = createContext<ExamContextType | undefined>(undefined);
|
||||
|
||||
export const ExamProvider: React.FC<{ children: React.ReactNode }> = ({
|
||||
children,
|
||||
}) => {
|
||||
const [test, setTest] = useState<Test | null>(null);
|
||||
const [answers, setAnswers] = useState<Answer[]>([]);
|
||||
|
||||
// start exam
|
||||
const startExam = async (testType: string, testId: string) => {
|
||||
try {
|
||||
const token = await getToken(); // if needed
|
||||
const res = await fetch(`${API_URL}/tests/${testType}/${testId}`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (!res.ok) throw new Error(`Failed to fetch test: ${res.status}`);
|
||||
const data: Test = await res.json();
|
||||
setTest(data);
|
||||
setAnswers(Array(data.questions.length).fill(null));
|
||||
} catch (err) {
|
||||
console.error("startExam error:", err);
|
||||
}
|
||||
};
|
||||
|
||||
// update answer
|
||||
const setAnswer = (questionIndex: number, answer: Answer) => {
|
||||
setAnswers((prev) => {
|
||||
const updated = [...prev];
|
||||
updated[questionIndex] = answer;
|
||||
return updated;
|
||||
});
|
||||
};
|
||||
|
||||
// submit exam
|
||||
const submitExam = async () => {
|
||||
if (!test) return;
|
||||
const token = await getToken();
|
||||
try {
|
||||
const { type, test_id, attempt_id } = test.metadata;
|
||||
const res = await fetch(
|
||||
`${API_URL}/tests/${type}/${test_id}/${attempt_id}`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({ answers }),
|
||||
}
|
||||
);
|
||||
if (!res.ok) throw new Error("Failed to submit exam");
|
||||
|
||||
// clear
|
||||
setTest(null);
|
||||
setAnswers([]);
|
||||
} catch (err) {
|
||||
console.error("Failed to submit exam. Reason:", err);
|
||||
}
|
||||
};
|
||||
|
||||
// cancel exam
|
||||
const cancelExam = () => {
|
||||
setTest(null);
|
||||
setAnswers([]);
|
||||
};
|
||||
|
||||
return (
|
||||
<ExamContext.Provider
|
||||
value={{ test, answers, startExam, setAnswer, submitExam, cancelExam }}
|
||||
>
|
||||
{children}
|
||||
</ExamContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useExam = (): ExamContextType => {
|
||||
const ctx = useContext(ExamContext);
|
||||
if (!ctx) throw new Error("useExam must be used inside ExamProvider");
|
||||
return ctx;
|
||||
};
|
||||
@ -1,88 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React, {
|
||||
createContext,
|
||||
useContext,
|
||||
useState,
|
||||
useEffect,
|
||||
useRef,
|
||||
} from "react";
|
||||
|
||||
interface TimerContextType {
|
||||
timeRemaining: number;
|
||||
resetTimer: (duration: number) => void;
|
||||
stopTimer: () => void;
|
||||
setInitialTime: (duration: number) => void;
|
||||
}
|
||||
|
||||
const TimerContext = createContext<TimerContextType | undefined>(undefined);
|
||||
|
||||
export const TimerProvider: React.FC<{ children: React.ReactNode }> = ({
|
||||
children,
|
||||
}) => {
|
||||
const [timeRemaining, setTimeRemaining] = useState<number>(0);
|
||||
const timerRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
// Effect: run interval whenever timeRemaining is set > 0
|
||||
useEffect(() => {
|
||||
if (timeRemaining > 0 && !timerRef.current) {
|
||||
timerRef.current = setInterval(() => {
|
||||
setTimeRemaining((prev) => {
|
||||
if (prev <= 1) {
|
||||
clearInterval(timerRef.current!);
|
||||
timerRef.current = null;
|
||||
return 0;
|
||||
}
|
||||
return prev - 1;
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (timerRef.current && timeRemaining <= 0) {
|
||||
clearInterval(timerRef.current);
|
||||
timerRef.current = null;
|
||||
}
|
||||
};
|
||||
}, [timeRemaining]); // 👈 depend on timeRemaining
|
||||
|
||||
const resetTimer = (duration: number) => {
|
||||
if (timerRef.current) {
|
||||
clearInterval(timerRef.current);
|
||||
timerRef.current = null;
|
||||
}
|
||||
setTimeRemaining(duration);
|
||||
};
|
||||
|
||||
const stopTimer = () => {
|
||||
if (timerRef.current) {
|
||||
clearInterval(timerRef.current);
|
||||
timerRef.current = null;
|
||||
}
|
||||
setTimeRemaining(0);
|
||||
};
|
||||
|
||||
const setInitialTime = (duration: number) => {
|
||||
if (timerRef.current) {
|
||||
clearInterval(timerRef.current);
|
||||
timerRef.current = null;
|
||||
}
|
||||
setTimeRemaining(duration);
|
||||
};
|
||||
|
||||
return (
|
||||
<TimerContext.Provider
|
||||
value={{ timeRemaining, resetTimer, stopTimer, setInitialTime }}
|
||||
>
|
||||
{children}
|
||||
</TimerContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useTimer = (): TimerContextType => {
|
||||
const context = useContext(TimerContext);
|
||||
if (!context) {
|
||||
throw new Error("useTimer must be used within a TimerProvider");
|
||||
}
|
||||
return context;
|
||||
};
|
||||
Reference in New Issue
Block a user