(
);
export default function ResultsPage() {
+ // All hooks at the top - no conditional calls
const router = useRouter();
const { clearExam, isExamCompleted, getApiResponse } = useExam();
- let examResults;
+ // Add a ref to track if we're in cleanup mode
+ const isCleaningUp = useRef(false);
+
+ // Conditionally call useExamResults based on cleanup state
+ const examResults = !isCleaningUp.current ? useExamResults() : null;
+
+ // State to control component behavior
+ const [componentState, setComponentState] = useState<
+ "loading" | "redirecting" | "ready"
+ >("loading");
+
+ // Single useEffect to handle all initialization logic
useEffect(() => {
- if (!isExamCompleted()) {
- router.push("/unit");
- return;
- }
- }, [isExamCompleted, router]);
+ let mounted = true;
+
+ const initializeComponent = async () => {
+ // Allow time for all hooks to initialize
+ await new Promise((resolve) => setTimeout(resolve, 50));
+
+ if (!mounted) return;
+
+ // Check if exam is completed
+ if (!isExamCompleted()) {
+ setComponentState("redirecting");
+ // Small delay before redirect to prevent hook order issues
+ setTimeout(() => {
+ if (mounted) {
+ router.push("/unit");
+ }
+ }, 100);
+ return;
+ }
+
+ // Check if we have exam results
+ if (!examResults || !examResults.answers) {
+ // Keep loading state
+ return;
+ }
+
+ // Everything is ready
+ setComponentState("ready");
+ };
+
+ initializeComponent();
+
+ return () => {
+ mounted = false;
+ };
+ }, [isExamCompleted, router, examResults]);
+
+ // Always render loading screen for non-ready states
+ if (componentState !== "ready") {
+ const loadingText =
+ componentState === "redirecting" ? "Redirecting..." : "Loading...";
- try {
- examResults = useExamResults();
- console.log(examResults);
- } catch (error) {
- // Handle case where there's no completed exam
return (
-
Loading...
+
{loadingText}
);
}
- // Get API response data
+ // At this point, we know examResults exists and component is ready
const apiResponse = getApiResponse();
const handleBackToHome = () => {
- clearExam();
+ // Set cleanup flag to prevent useExamResults from running
+ isCleaningUp.current = true;
- // Give time for state to fully reset before pushing new route
+ clearExam();
setTimeout(() => {
router.push("/unit");
- }, 400); // 50–100ms is usually enough
+ }, 400);
};
const timeTaken =
- examResults.endTime && examResults.startTime
+ examResults?.endTime && examResults?.startTime
? Math.round(
(examResults.endTime.getTime() - examResults.startTime.getTime()) /
1000 /
@@ -149,10 +193,12 @@ export default function ResultsPage() {
height={60}
/>
- {(
- (examResults.score / examResults.totalQuestions) *
- 100
- ).toFixed(1)}
+ {examResults
+ ? (
+ (examResults.score / examResults.totalQuestions) *
+ 100
+ ).toFixed(1)
+ : "0"}
%