From 53dbf99fba82a91ac0073015ae9b95fae2ebca22 Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Tue, 18 Jun 2024 22:16:31 +0100
Subject: [PATCH] Fixed some more issues with the Speaking

---
 src/components/Exercises/InteractiveSpeaking.tsx |  3 +++
 src/components/Exercises/Speaking.tsx            | 10 +++-------
 src/exams/Speaking.tsx                           | 10 +++++++++-
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/Exercises/InteractiveSpeaking.tsx b/src/components/Exercises/InteractiveSpeaking.tsx
index b1a02924..f397dee1 100644
--- a/src/components/Exercises/InteractiveSpeaking.tsx
+++ b/src/components/Exercises/InteractiveSpeaking.tsx
@@ -60,13 +60,16 @@ export default function InteractiveSpeaking({
 		setIsLoading(true);
 
 		const answer = await saveAnswer(questionIndex);
+		console.log(questionIndex + 1 < prompts.length, questionIndex, prompts.length);
 		if (questionIndex + 1 < prompts.length) {
 			setQuestionIndex(questionIndex + 1);
 			setIsLoading(false);
 
 			return;
 		}
+
 		setIsLoading(false);
+		setQuestionIndex(0);
 
 		onNext({
 			exercise: id,
diff --git a/src/components/Exercises/Speaking.tsx b/src/components/Exercises/Speaking.tsx
index 11786660..4a35458a 100644
--- a/src/components/Exercises/Speaking.tsx
+++ b/src/components/Exercises/Speaking.tsx
@@ -95,7 +95,7 @@ export default function Speaking({id, title, text, video_url, type, prompts, suf
 
 	return (
 		<div className="flex flex-col h-full w-full gap-9">
-			<Modal className="!w-96 aspect-square" isOpen={isPromptsModalOpen} onClose={() => setIsPromptsModalOpen(false)}>
+			<Modal title="Prompts" className="!w-96 aspect-square" isOpen={isPromptsModalOpen} onClose={() => setIsPromptsModalOpen(false)}>
 				<div className="flex flex-col items-center justify-center gap-4 w-full h-full">
 					<div className="flex flex-col gap-1 ml-4">
 						{prompts.map((x, index) => (
@@ -126,7 +126,7 @@ export default function Speaking({id, title, text, video_url, type, prompts, suf
 						</span>
 					)}
 				</div>
-				<div className="flex gap-6 items-center">
+				<div className="flex flex-col gap-6 items-center">
 					{video_url && (
 						<div className="flex flex-col gap-4 w-full items-center">
 							<video key={id} autoPlay controls className="max-w-3xl rounded-xl">
@@ -134,11 +134,7 @@ export default function Speaking({id, title, text, video_url, type, prompts, suf
 							</video>
 						</div>
 					)}
-					{prompts && prompts.length > 0 && (
-						<div className="w-full aspect-square bg-white shadow rounded-xl flex items-center justify-center">
-							<Button onClick={() => setIsPromptsModalOpen(true)}>View Prompts</Button>
-						</div>
-					)}
+					{prompts && prompts.length > 0 && <Button onClick={() => setIsPromptsModalOpen(true)}>View Prompts</Button>}
 				</div>
 			</div>
 
diff --git a/src/exams/Speaking.tsx b/src/exams/Speaking.tsx
index 7d6271db..81a85e21 100644
--- a/src/exams/Speaking.tsx
+++ b/src/exams/Speaking.tsx
@@ -20,6 +20,8 @@ interface Props {
 }
 
 export default function Speaking({exam, showSolutions = false, onFinish}: Props) {
+	const [speakingPromptsDone, setSpeakingPromptsDone] = useState<{id: string; amount: number}[]>([]);
+
 	const {userSolutions, setUserSolutions} = useExamStore((state) => state);
 	const {questionIndex, setQuestionIndex} = useExamStore((state) => state);
 	const {hasExamEnded, setHasExamEnded} = useExamStore((state) => state);
@@ -33,6 +35,12 @@ export default function Speaking({exam, showSolutions = false, onFinish}: Props)
 			setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), {...solution, module: "speaking", exam: exam.id}]);
 		}
 
+		if (questionIndex > 0) {
+			const exercise = getExercise();
+			setSpeakingPromptsDone((prev) => [...prev.filter((x) => x.id !== exercise.id), {id: exercise.id, amount: questionIndex}]);
+		}
+		setQuestionIndex(0);
+
 		if (exerciseIndex + 1 < exam.exercises.length) {
 			setExerciseIndex(exerciseIndex + 1);
 			return;
@@ -75,7 +83,7 @@ export default function Speaking({exam, showSolutions = false, onFinish}: Props)
 				<ModuleTitle
 					label={convertCamelCaseToReadable(exam.exercises[exerciseIndex].type)}
 					minTimer={exam.minTimer}
-					exerciseIndex={exerciseIndex + 1 + questionIndex}
+					exerciseIndex={exerciseIndex + 1 + questionIndex + speakingPromptsDone.reduce((acc, curr) => acc + curr.amount, 0)}
 					module="speaking"
 					totalExercises={countExercises(exam.exercises)}
 					disableTimer={showSolutions}