Add useQuizProgress hook for managing quiz state and progress, including saving and loading functionality

Author: Joacohbc

src/components/quizz/QuizResults.jsx

@@ -175,9 +175,9 @@ const QuizResults = ({ results, activeSetName, onRetry, shuffledQuestions }) =>
                 <button
                     id="retry-button"
                     onClick={onRetry}
-                    className="flex items-center bg-indigo-100 text-indigo-700 hover:bg-indigo-200 font-medium py-2 px-6 rounded-lg transition-all duration-200"
+                    className="flex items-center gap-2 bg-indigo-100 text-indigo-700 hover:bg-indigo-200 font-medium py-2 px-6 rounded-lg transition-all duration-200"
                 >
-                    <RefreshIcon className="mr-2" />
+                    <RefreshIcon/>
                     Intentar de Nuevo
                 </button>
             </div>

src/constants/localStorage.js

@@ -48,6 +48,7 @@ export const defaultQuizData = [
 // LocalStorage keys for quizzes
 export const QUIZ_SETS_KEY = 'quizSetsReactGeneric';
 export const QUIZ_ACTIVE_SET_KEY = 'activeQuizSetNameReactGeneric';
+export const QUIZ_PROGRESS_KEY = 'quizProgressReactGeneric'; // Key for quiz progress
 
 // --- Flashcard Constants ---
 

src/hooks/useQuizProgress.js

@@ -0,0 +1,81 @@
+import { useState, useEffect, useCallback } from 'react';
+import { saveQuizProgress, loadQuizProgress, clearQuizProgress } from '../services/storageManager';
+import { shuffleArray } from '../utils/helpers';
+
+export const useQuizProgress = (activeQuizSetName, originalQuestions, isShuffleEnabled, isSubmitted) => {
+    const [answers, setAnswers] = useState({});
+    const [initialLoadedQuestionOrder, setInitialLoadedQuestionOrder] = useState(null);
+    const [processedQuestions, setProcessedQuestions] = useState([]);
+
+    // Effect to load progress when the active quiz set name changes
+    useEffect(() => {
+        if (activeQuizSetName) {
+            console.log(`useQuizProgress: Attempting to load progress for ${activeQuizSetName}`);
+            const savedProgress = loadQuizProgress(activeQuizSetName);
+            if (savedProgress && savedProgress.questionOrder) {
+                setAnswers(savedProgress.answers || {});
+                setInitialLoadedQuestionOrder(savedProgress.questionOrder);
+                // console.log(`useQuizProgress: Loaded progress for ${activeQuizSetName}. Answers:`, savedProgress.answers, "Order:", savedProgress.questionOrder);
+            } else {
+                setAnswers({}); // Reset if no progress found or order is missing
+                setInitialLoadedQuestionOrder(null);
+                // console.log(`useQuizProgress: No valid progress found for ${activeQuizSetName}, resetting answers and order.`);
+            }
+        } else {
+            setAnswers({}); // Reset if no active quiz set name
+            setInitialLoadedQuestionOrder(null);
+            // console.log("useQuizProgress: No activeQuizSetName, resetting answers and order.");
+        }
+    }, [activeQuizSetName]);
+
+    // Effect to determine and set the order of questions
+    useEffect(() => {
+        if (!originalQuestions || originalQuestions.length === 0) {
+            setProcessedQuestions([]);
+            return;
+        }
+
+        if (initialLoadedQuestionOrder && initialLoadedQuestionOrder.length > 0) {
+            // console.log("useQuizProgress: Using initial loaded question order", initialLoadedQuestionOrder);
+            setProcessedQuestions(initialLoadedQuestionOrder);
+        } else if (isShuffleEnabled) {
+            // console.log("useQuizProgress: Shuffling original questions", originalQuestions);
+            setProcessedQuestions(shuffleArray(originalQuestions));
+        } else {
+            // console.log("useQuizProgress: Using original question order", originalQuestions);
+            setProcessedQuestions(originalQuestions);
+        }
+    }, [originalQuestions, initialLoadedQuestionOrder, isShuffleEnabled]);
+
+
+    // Effect to save progress when answers or processedQuestions change,
+    // if the quiz is active and not submitted.
+    useEffect(() => {
+        // Save progress if we have an active set, it's not submitted, and there are processed questions.
+        if (activeQuizSetName && !isSubmitted && processedQuestions && processedQuestions.length > 0) {
+            // console.log(`useQuizProgress: Saving progress for ${activeQuizSetName}. Answers:`, answers, "Order:", processedQuestions);
+            saveQuizProgress(activeQuizSetName, { answers, questionOrder: processedQuestions });
+        } else if (activeQuizSetName && !isSubmitted && (!processedQuestions || processedQuestions.length === 0)) {
+            // This case might occur if a quiz is loaded that has no questions.
+            // We probably don't want to save progress for an empty quiz or if the order is somehow lost.
+            // console.log(`useQuizProgress: Not saving progress for ${activeQuizSetName} due to empty/invalid processed questions.`);
+        }
+    }, [answers, processedQuestions, activeQuizSetName, isSubmitted]);
+
+    const clearCurrentSavedProgress = useCallback(() => {
+        if (activeQuizSetName) {
+            // console.log(`useQuizProgress: Clearing saved progress for ${activeQuizSetName}`);
+            clearQuizProgress(activeQuizSetName);
+            setAnswers({});
+            setInitialLoadedQuestionOrder(null); // This will trigger re-evaluation of processedQuestions
+        }
+    }, [activeQuizSetName]);
+
+    // Function to explicitly discard loaded order, e.g., when user toggles shuffle ON
+    const discardLoadedOrderAndShuffle = useCallback(() => {
+        setInitialLoadedQuestionOrder(null);
+        // The useEffect for processedQuestions will then re-shuffle if isShuffleEnabled is true
+    }, []);
+
+    return { answers, setAnswers, processedQuestions, clearCurrentSavedProgress, discardLoadedOrderAndShuffle };
+};

src/services/storageManager.js

@@ -6,7 +6,8 @@ import {
     FLASHCARD_SETS_KEY,
     FLASHCARD_ACTIVE_SET_KEY,
     QUIZ_SETS_KEY,
-    QUIZ_ACTIVE_SET_KEY
+    QUIZ_ACTIVE_SET_KEY,
+    QUIZ_PROGRESS_KEY // Import the new key
 } from '../constants/localStorage';
 
 // --- Generic LocalStorage Interaction ---
@@ -145,6 +146,76 @@ export const saveActiveSetName = (activeSetKey, name) => {
     saveToLocalStorage(activeSetKey, name);
 };
 
+// --- Quiz Progress Management ---
+
+/**
+ * Saves the current quiz progress (e.g., answers and question order) to localStorage.
+ * @param {string} quizSetName - The name of the quiz set for which progress is being saved.
+ * @param {object} progressData - The progress data to save (e.g., { answers: {...}, questionOrder: [] }).
+ */
+export const saveQuizProgress = (quizSetName, progressData) => {
+    if (!quizSetName) {
+        console.error("Cannot save quiz progress without a quizSetName.");
+        return;
+    }
+    const allProgress = loadFromLocalStorage(QUIZ_PROGRESS_KEY, {});
+    // Ensure progressData contains answers and questionOrder
+    if (!progressData || typeof progressData.answers === 'undefined' || typeof progressData.questionOrder === 'undefined') {
+        console.error("Attempted to save progress without answers or questionOrder:", progressData);
+        // Potentially clear progress if it's in an invalid state or just return
+        // For now, let's prevent saving incomplete progress data.
+        return;
+    }
+    allProgress[quizSetName] = progressData;
+    saveToLocalStorage(QUIZ_PROGRESS_KEY, allProgress);
+    console.log(`Progress for quiz '${quizSetName}' saved with answers and question order.`);
+};
+
+/**
+ * Loads the quiz progress (answers and question order) for a specific quiz set from localStorage.
+ * @param {string} quizSetName - The name of the quiz set to load progress for.
+ * @returns {object|null} The saved progress data { answers, questionOrder }, or null if not found or error.
+ */
+export const loadQuizProgress = (quizSetName) => {
+    if (!quizSetName) {
+        console.warn("Cannot load quiz progress without a quizSetName.");
+        return null;
+    }
+    const allProgress = loadFromLocalStorage(QUIZ_PROGRESS_KEY, {});
+    if (allProgress && allProgress[quizSetName]) {
+        // Validate that the loaded progress has the expected structure
+        if (typeof allProgress[quizSetName].answers !== 'undefined' && Array.isArray(allProgress[quizSetName].questionOrder)) {
+            console.log(`Progress for quiz '${quizSetName}' loaded (includes answers and questionOrder).`);
+            return allProgress[quizSetName];
+        } else {
+            console.warn(`Loaded progress for quiz '${quizSetName}' has incorrect structure. Discarding.`);
+            // Optionally, clear this malformed progress
+            // delete allProgress[quizSetName];
+            // saveToLocalStorage(QUIZ_PROGRESS_KEY, allProgress);
+            return null;
+        }
+    }
+    console.log(`No saved progress found for quiz '${quizSetName}'.`);
+    return null;
+};
+
+/**
+ * Clears the quiz progress for a specific quiz set from localStorage.
+ * @param {string} quizSetName - The name of the quiz set to clear progress for.
+ */
+export const clearQuizProgress = (quizSetName) => {
+    if (!quizSetName) {
+        console.warn("Cannot clear quiz progress without a quizSetName.");
+        return;
+    }
+    const allProgress = loadFromLocalStorage(QUIZ_PROGRESS_KEY, {});
+    if (allProgress && allProgress[quizSetName]) {
+        delete allProgress[quizSetName];
+        saveToLocalStorage(QUIZ_PROGRESS_KEY, allProgress);
+        console.log(`Progress for quiz '${quizSetName}' cleared.`);
+    }
+};
+
 /**
  * Gets the appropriate default data based on type.
  * @param {string} type - 'quiz' or 'flashcard'