May have solved a bug made in the writing and speaking evaluation

src/components/Solutions/Speaking.tsx

@@ -9,10 +9,12 @@ import {speakingReverseMarking} from "@/utils/score";
 
 const Waveform = dynamic(() => import("../Waveform"), {ssr: false});
 
-export default function Speaking({id, type, title, text, prompts, userSolutions, onNext, onBack}: SpeakingExercise & CommonProps) {
+export default function Speaking({id, type, title, video_url, text, prompts, userSolutions, onNext, onBack}: SpeakingExercise & CommonProps) {
 	const [solutionURL, setSolutionURL] = useState<string>();
 
 	useEffect(() => {
+		console.log(userSolutions);
+
 		if (userSolutions && userSolutions.length > 0) {
 			axios.post(`/api/speaking`, {path: userSolutions[0].solution}, {responseType: "arraybuffer"}).then(({data}) => {
 				const blob = new Blob([data], {type: "audio/wav"});
@@ -26,9 +28,10 @@ export default function Speaking({id, type, title, text, prompts, userSolutions,
 	return (
 		<>
 			<div className="flex flex-col h-full w-full gap-8 mb-20">
-				<div className="flex flex-col w-full gap-14 bg-mti-gray-smoke rounded-xl py-8 pb-12 px-16">
+				<div className="flex flex-col w-full gap-2 bg-mti-gray-smoke rounded-xl py-8 px-16">
 					<div className="flex flex-col gap-3">
 						<span className="font-semibold">{title}</span>
+						{!video_url && (
 							<span className="font-regular">
 								{text.split("\\n").map((line, index) => (
 									<Fragment key={index}>
@@ -37,7 +40,17 @@ export default function Speaking({id, type, title, text, prompts, userSolutions,
 									</Fragment>
 								))}
 							</span>
+						)}
 					</div>
+					<div className="flex gap-6">
+						{video_url && (
+							<div className="flex flex-col gap-4 w-full items-center">
+								<video key={id} autoPlay controls className="max-w-3xl rounded-xl">
+									<source src={video_url} />
+								</video>
+							</div>
+						)}
+						{prompts && prompts.length > 0 && (
 							<div className="flex flex-col gap-4">
 								<span className="font-bold">You should talk about the following things:</span>
 								<div className="flex flex-col gap-1 ml-4">
@@ -48,6 +61,8 @@ export default function Speaking({id, type, title, text, prompts, userSolutions,
 									))}
 								</div>
 							</div>
+						)}
+					</div>
 				</div>
 
 				<div className="w-full h-full flex flex-col gap-8">

src/pages/(exam)/ExamPage.tsx

@@ -46,6 +46,9 @@ export default function ExamPage({page}: Props) {
 	const router = useRouter();
 
 	useEffect(() => setSessionId(uuidv4()), []);
+	useEffect(() => {
+		console.log({userSolutions});
+	}, [userSolutions]);
 
 	useEffect(() => {
 		selectedModules.length > 0 && timeSpent === 0 && !showSolutions;
@@ -134,21 +137,19 @@ export default function ExamPage({page}: Props) {
 
 			Promise.all(
 				exam.exercises.map(async (exercise) => {
-					if (exercise.type === "writing")
+					if (exercise.type === "writing") {
-						return evaluateWritingAnswer(exercise, solutions.find((x) => x.exercise === exercise.id)!).then((response) => {
+						return await evaluateWritingAnswer(exercise, solutions.find((x) => x.exercise === exercise.id)!);
-							if (response) {
-								setUserSolutions([...userSolutions.filter((x) => x.exercise !== exercise.id), response]);
 					}
-						});
 
-					if (exercise.type === "interactiveSpeaking" || exercise.type === "speaking")
+					if (exercise.type === "interactiveSpeaking" || exercise.type === "speaking") {
-						return evaluateSpeakingAnswer(exercise, solutions.find((x) => x.exercise === exercise.id)!).then((response) => {
+						return await evaluateSpeakingAnswer(exercise, solutions.find((x) => x.exercise === exercise.id)!);
-							if (response) {
-								setUserSolutions([...userSolutions.filter((x) => x.exercise !== exercise.id), response]);
 					}
-						});
 				}),
-			).finally(() => {
+			)
+				.then((responses) => {
+					setUserSolutions([...userSolutions, ...responses.filter((x) => !!x)] as any);
+				})
+				.finally(() => {
 					setIsEvaluationLoading(false);
 					setHasBeenUploaded(false);
 				});