Navigation rework, added prompt edit to components that were missing

src/components/Medium/ModuleTitle/MCQuestionGrid.tsx

@@ -1,7 +1,7 @@
 import Button from "@/components/Low/Button";
 import Modal from "@/components/Modal";
 import { Exam, LevelExam, MultipleChoiceExercise, ShuffleMap } from "@/interfaces/exam";
-import useExamStore from "@/stores/examStore";
+import useExamStore, { usePersistentExamStore } from "@/stores/exam";
 import clsx from "clsx";
 import { useMemo, useState } from "react";
 import { BsFillGrid3X3GapFill } from "react-icons/bs";
@@ -10,16 +10,20 @@ interface Props {
 	exam: LevelExam
 	showSolutions: boolean;
 	runOnClick: ((index: number) => void) | undefined;
+	preview: boolean,
 }
 
-const MCQuestionGrid: React.FC<Props> = ({ exam, showSolutions, runOnClick }) => {
+const MCQuestionGrid: React.FC<Props> = ({ exam, showSolutions, runOnClick, preview }) => {
 	const [isOpen, setIsOpen] = useState(false);
 
+	const examState = useExamStore((state) => state);
+	const persistentExamState = usePersistentExamStore((state) => state);
+	
 	const {
 		userSolutions,
 		partIndex: sectionIndex,
 		exerciseIndex,
-	} = useExamStore((state) => state);
+	} = !preview ? examState : persistentExamState;
 
 	const currentExercise = useMemo(() => (exam as LevelExam).parts[sectionIndex!].exercises[exerciseIndex] as MultipleChoiceExercise, [exam, exerciseIndex, sectionIndex])
 	const userSolution = useMemo(() => userSolutions!.find((x) => x.exercise.toString() == currentExercise.id.toString())!, [currentExercise.id, userSolutions])

src/components/Medium/ModuleTitle/index.tsx

@@ -6,7 +6,7 @@ import { BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen } from "react-ico
 import ProgressBar from "../../Low/ProgressBar";
 import Timer from "../Timer";
 import { Exercise, LevelExam } from "@/interfaces/exam";
-import useExamStore from "@/stores/examStore";
+import useExamStore, { usePersistentExamStore } from "@/stores/exam";
 import React from "react";
 import MCQuestionGrid from "./MCQuestionGrid";
 
@@ -23,7 +23,8 @@ interface Props {
 	showSolutions?: boolean;
 	currentExercise?: Exercise;
 	runOnClick?: ((questionIndex: number) => void) | undefined;
-	indexLabel?: string
+	indexLabel?: string,
+	preview: boolean,
 }
 
 export default function ModuleTitle({
@@ -38,9 +39,13 @@ export default function ModuleTitle({
 	showTimer = true,
 	showSolutions = false,
 	runOnClick = undefined,
-	indexLabel = "Question"
+	indexLabel = "Question",
+	preview,
 }: Props) {
-	const { exam, partIndex, exerciseIndex: examExerciseIndex, userSolutions } = useExamStore((state) => state);
+	const examState = useExamStore((state) => state);
+	const persistentExamState = usePersistentExamStore((state) => state);
+	
+	const { exam, partIndex, exerciseIndex: examExerciseIndex, userSolutions } = !preview ? examState : persistentExamState;
 
 	const moduleIcon: { [key in Module]: ReactNode } = {
 		reading: <BsBook className="text-ielts-reading w-6 h-6" />,
@@ -52,7 +57,6 @@ export default function ModuleTitle({
 
 	const showGrid = useMemo(() =>
 		exam?.module === "level"
-		&& partIndex > -1
 		&& exam.parts[partIndex].exercises[examExerciseIndex].type === "multipleChoice"
 		&& !!userSolutions,
 		[exam, examExerciseIndex, partIndex, userSolutions]
@@ -95,7 +99,7 @@ export default function ModuleTitle({
 						</div>
 						<ProgressBar color={module} label="" percentage={(exerciseIndex * 100) / totalExercises} className="h-2 w-full" />
 					</div>
-					{showGrid && <MCQuestionGrid exam={exam as LevelExam} showSolutions={showSolutions} runOnClick={runOnClick} />}
+					{showGrid && <MCQuestionGrid exam={exam as LevelExam} showSolutions={showSolutions} runOnClick={runOnClick} preview={preview}/>}
 				</div>
 			</div>
 		</>

src/components/Medium/SessionCard.tsx

@@ -1,5 +1,4 @@
 import {Session} from "@/hooks/useSessions";
-import useExamStore from "@/stores/examStore";
 import {sortByModuleName} from "@/utils/moduleUtils";
 import axios from "axios";
 import clsx from "clsx";

src/components/Medium/StatGridItem.tsx

@@ -11,10 +11,10 @@ import { uuidv4 } from "@firebase/util";
 import { useRouter } from "next/router";
 import { uniqBy } from "lodash";
 import { sortByModule } from "@/utils/moduleUtils";
-import { convertToUserSolutions } from "@/utils/stats";
 import { getExamById } from "@/utils/exams";
 import { Exam, UserSolution } from "@/interfaces/exam";
 import ModuleBadge from "../ModuleBadge";
+import useExamStore from "@/stores/exam";
 
 const formatTimestamp = (timestamp: string | number) => {
 	const time = typeof timestamp === "string" ? parseInt(timestamp) : timestamp;
@@ -81,12 +81,6 @@ interface StatsGridItemProps {
 	selectedTrainingExams?: string[];
 	maxTrainingExams?: number;
 	setSelectedTrainingExams?: React.Dispatch<React.SetStateAction<string[]>>;
-	setExams: (exams: Exam[]) => void;
-	setShowSolutions: (show: boolean) => void;
-	setUserSolutions: (solutions: UserSolution[]) => void;
-	setSelectedModules: (modules: Module[]) => void;
-	setInactivity: (inactivity: number) => void;
-	setTimeSpent: (time: number) => void;
 	renderPdfIcon: (session: string, color: string, textColor: string) => React.ReactNode;
 }
 
@@ -100,12 +94,6 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
 	selectedTrainingExams,
 	gradingSystem,
 	setSelectedTrainingExams,
-	setExams,
-	setShowSolutions,
-	setUserSolutions,
-	setSelectedModules,
-	setInactivity,
-	setTimeSpent,
 	renderPdfIcon,
 	width = undefined,
 	height = undefined,
@@ -113,6 +101,8 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
 	maxTrainingExams = undefined,
 }) => {
 	const router = useRouter();
+	const dispatch = useExamStore((s) => s.dispatch);
+
 	const correct = stats.reduce((accumulator, current) => accumulator + current.score.correct, 0);
 	const total = stats.reduce((accumulator, current) => accumulator + current.score.total, 0);
 	const aggregatedScores = aggregateScoresByModule(stats).filter((x) => x.total > 0);
@@ -171,17 +161,18 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
 
 			Promise.all(examPromises).then((exams) => {
 				if (exams.every((x) => !!x)) {
-					if (!!timeSpent) setTimeSpent(timeSpent);
-					if (!!inactivity) setInactivity(inactivity);
-					setUserSolutions(convertToUserSolutions(stats));
-					setShowSolutions(true);
-					setExams(exams.map((x) => x!).sort(sortByModule));
-					setSelectedModules(
-						exams
-							.map((x) => x!)
-							.sort(sortByModule)
-							.map((x) => x!.module),
-					);
+					dispatch({
+						type: 'INIT_SOLUTIONS', payload: {
+							exams: exams.map((x) => x!).sort(sortByModule),
+							modules: exams
+								.map((x) => x!)
+								.sort(sortByModule)
+								.map((x) => x!.module),
+							stats,
+							timeSpent,
+							inactivity
+						}
+					});
 					router.push("/exam");
 				}
 			});

src/components/Medium/Timer.tsx

@@ -1,4 +1,4 @@
-import useExamStore from "@/stores/examStore";
+import useExamStore from "@/stores/exam";
 import {useEffect, useState} from "react";
 import {motion} from "framer-motion";
 import TimerEndedModal from "../TimerEndedModal";
@@ -16,10 +16,7 @@ const Timer: React.FC<Props> = ({minTimer, disableTimer, standalone = false}) =>
 	const [showModal, setShowModal] = useState(false);
 	const [warningMode, setWarningMode] = useState(false);
 
-	const setHasExamEnded = useExamStore((state) => state.setHasExamEnded);
-	const {timeSpent} = useExamStore((state) => state);
-
-	useEffect(() => setTimer((prev) => prev - timeSpent), [timeSpent]);
+	const setTimeIsUp = useExamStore((state) => state.setTimeIsUp);
 
 	useEffect(() => {
 		if (!disableTimer) {
@@ -44,7 +41,7 @@ const Timer: React.FC<Props> = ({minTimer, disableTimer, standalone = false}) =>
 			<TimerEndedModal
 				isOpen={showModal}
 				onClose={() => {
-					setHasExamEnded(true);
+					setTimeIsUp(true);
 					setShowModal(false);
 				}}
 			/>