Added sound effects to the exam generation

src/pages/(generation)/LevelGeneration.tsx

@@ -1,6 +1,7 @@
 import {LevelExam, MultipleChoiceExercise} from "@/interfaces/exam";
 import useExamStore from "@/stores/examStore";
 import {getExamById} from "@/utils/exams";
+import {playSound} from "@/utils/sound";
 import {Tab} from "@headlessui/react";
 import axios from "axios";
 import clsx from "clsx";
@@ -18,6 +19,7 @@ const TaskTab = ({exam, setExam}: {exam?: LevelExam; setExam: (exam: LevelExam)
 		axios
 			.get(`/api/exam/level/generate/level`)
 			.then((result) => {
+				playSound("check");
 				console.log(result.data);
 				setExam(result.data);
 			})
@@ -135,6 +137,7 @@ const LevelGeneration = () => {
 		axios
 			.post(`/api/exam/level`, exam)
 			.then((result) => {
+				playSound("sent");
 				console.log(`Generated Exam ID: ${result.data.id}`);
 				toast.success("This new exam has been generated successfully! Check the ID in our browser's console.");
 				setResultingExam(result.data);

src/pages/(generation)/ListeningGeneration.tsx

@@ -2,7 +2,7 @@ import Input from "@/components/Low/Input";
 import {Exercise, ListeningExam} from "@/interfaces/exam";
 import useExamStore from "@/stores/examStore";
 import {getExamById} from "@/utils/exams";
-import {checkSound} from "@/utils/sound";
+import {playSound} from "@/utils/sound";
 import {convertCamelCaseToReadable} from "@/utils/string";
 import {Tab} from "@headlessui/react";
 import axios from "axios";
@@ -26,7 +26,7 @@ const PartTab = ({part, types, index, setPart}: {part?: ListeningPart; types: st
 		axios
 			.get(`/api/exam/listening/generate/listening_section_${index}${topic || types ? `?${url.toString()}` : ""}`)
 			.then((result) => {
-				checkSound();
+				playSound("check");
 				setPart(result.data);
 			})
 			.catch((error) => {
@@ -136,8 +136,15 @@ const ListeningGeneration = () => {
 		axios
 			.post(`/api/exam/listening/generate/listening`, {parts: [part1, part2, part3, part4]})
 			.then((result) => {
-				checkSound();
+				playSound("sent");
+				console.log(`Generated Exam ID: ${result.data.id}`);
+				toast.success("This new exam has been generated successfully! Check the ID in our browser's console.");
 				setResultingExam(result.data);
+
+				setPart1(undefined);
+				setPart2(undefined);
+				setPart3(undefined);
+				setTypes([]);
 			})
 			.catch((error) => {
 				console.log(error);

src/pages/(generation)/ReadingGeneration.tsx

@@ -2,6 +2,7 @@ import Input from "@/components/Low/Input";
 import {ReadingExam, ReadingPart} from "@/interfaces/exam";
 import useExamStore from "@/stores/examStore";
 import {getExamById} from "@/utils/exams";
+import {playSound} from "@/utils/sound";
 import {convertCamelCaseToReadable} from "@/utils/string";
 import {Tab} from "@headlessui/react";
 import axios from "axios";
@@ -25,7 +26,10 @@ const PartTab = ({part, types, index, setPart}: {part?: ReadingPart; types: stri
 		setIsLoading(true);
 		axios
 			.get(`/api/exam/reading/generate/reading_passage_${index}${topic || types ? `?${url.toString()}` : ""}`)
-			.then((result) => setPart(result.data))
+			.then((result) => {
+				playSound("check");
+				setPart(result.data);
+			})
 			.catch((error) => {
 				console.log(error);
 				toast.error("Something went wrong!");
@@ -136,6 +140,7 @@ const ReadingGeneration = () => {
 		axios
 			.post(`/api/exam/reading`, exam)
 			.then((result) => {
+				playSound("sent");
 				console.log(`Generated Exam ID: ${result.data.id}`);
 				toast.success("This new exam has been generated successfully! Check the ID in our browser's console.");
 				setResultingExam(result.data);

src/pages/(generation)/WritingGeneration.tsx

@@ -2,6 +2,7 @@ import Input from "@/components/Low/Input";
 import {WritingExam} from "@/interfaces/exam";
 import useExamStore from "@/stores/examStore";
 import {getExamById} from "@/utils/exams";
+import {playSound} from "@/utils/sound";
 import {Tab} from "@headlessui/react";
 import axios from "axios";
 import clsx from "clsx";
@@ -18,7 +19,10 @@ const TaskTab = ({task, index, setTask}: {task?: string; index: number; setTask:
 		setIsLoading(true);
 		axios
 			.get(`/api/exam/writing/generate/writing_task${index}_general`)
-			.then((result) => setTask(result.data.question))
+			.then((result) => {
+				playSound("check");
+				setTask(result.data.question);
+			})
 			.catch((error) => {
 				console.log(error);
 				toast.error("Something went wrong!");
@@ -132,6 +136,7 @@ const WritingGeneration = () => {
 			.post(`/api/exam/writing`, exam)
 			.then((result) => {
 				console.log(`Generated Exam ID: ${result.data.id}`);
+				playSound("sent");
 				toast.success("This new exam has been generated successfully! Check the ID in our browser's console.");
 				setResultingExam(result.data);
 

src/utils/sound.ts

@@ -1,8 +1,9 @@
 import {Howl, Howler} from "howler";
 
-export const checkSound = () => {
+export type Sound = "check" | "sent";
+export const playSound = (path: Sound) => {
 	const sound = new Howl({
-		src: ["audio/check.mp3"],
+		src: [`audio/${path}.mp3`],
 	});
 
 	sound.play();