converted from normal toast to promises

src/routes/kahootclone/create/logic/GenerateOptionsUsingAI.js

@@ -8,33 +8,36 @@ export function GenerateOptionsUsingAI(index) {
 		return;
 	}
 
-	fetch("https://ai.hackclub.com/chat/completions", {
+	const fetchOptions = async () => {
-		method: "POST",
+		const response = await fetch("https://ai.hackclub.com/chat/completions", {
-		headers: {
+			method: "POST",
-			"Content-Type": "application/json",
+			headers: {
-		},
+				"Content-Type": "application/json",
-		body: JSON.stringify({
+			},
-			messages: [
+			body: JSON.stringify({
-				{
+				messages: [
-					role: "user",
+					{
-					content: AiPrompts.GenerateOptionsUsingAI.replace(
+						role: "user",
-						"[question]",
+						content: AiPrompts.GenerateOptionsUsingAI.replace(
-						questions.v[index].name,
+							"[question]",
-					),
+							questions.v[index].name,
-				},
+						),
-			],
+					},
-		}),
+				],
-	})
+			}),
-		.then((response) => response.json())
-		.then((data) => {
-			let question = questions.v[index].name;
-			questions.v[index] = JSON.parse(data.choices[0].message.content);
-			questions.v[index].name = question;
-		})
-		.catch((error) => {
-			toast.error("Error:" + error);
-			return;
 		});
+		const data = await response.json();
+		let question = questions.v[index].name;
+		questions.v[index] = JSON.parse(data.choices[0].message.content);
+		questions.v[index].name = question;
+	};
 
-	toast.success("added!");
+	toast.promise(
+		fetchOptions(),
+		{
+			loading: "Generating options...",
+			success: "Options generated!",
+			error: (err) => "Error: " + (err?.message || err),
+		}
+	);
 }

src/routes/kahootclone/create/logic/GenerateQuestionsUsingAI.js

@@ -11,28 +11,31 @@ export function GenerateQuestionsUsingAI() {
 		return;
 	}
 
-	fetch("https://ai.hackclub.com/chat/completions", {
+	const fetchQuestions = async () => {
-		method: "POST",
+		const response = await fetch("https://ai.hackclub.com/chat/completions", {
-		headers: {
+			method: "POST",
-			"Content-Type": "application/json",
+			headers: {
-		},
+				"Content-Type": "application/json",
-		body: JSON.stringify({
+			},
-			messages: [
+			body: JSON.stringify({
-				{
+				messages: [
-					role: "user",
+					{
-					content: AiPrompts.GenerateQuestionsUsingAI.replace("[topic]", topic),
+						role: "user",
-				},
+						content: AiPrompts.GenerateQuestionsUsingAI.replace("[topic]", topic),
-			],
+					},
-		}),
+				],
-	})
+			}),
-		.then((response) => response.json())
-		.then((data) => {
-			questions.v = JSON.parse(data.choices[0].message.content);
-		})
-		.catch((error) => {
-			toast.error("Error:" + error);
-			return;
 		});
+		const data = await response.json();
+		questions.v = JSON.parse(data.choices[0].message.content);
+	};
 
-	toast.success("added!");
+	toast.promise(
+		fetchQuestions(),
+		{
+			loading: "Generating questions...",
+			success: "Questions added!",
+			error: (err) => "Error: " + err.message || err,
+		}
+	);
 }

src/routes/kahootclone/create/logic/InsertGameInDB.js

@@ -1,22 +1,30 @@
 import { supabase } from "$lib/supabase";
 import toast from "svelte-5-french-toast";
-
+import { Wait } from "./GameCreateData.svelte.js";
 
 export async function createGame(questions, gamePin) {
-	const { data: gameData, error: gameError } = await supabase.from("games").insert({
+	// Insert game
+	const insertGamePromise = supabase.from("games").insert({
 		creator: "anonymous",
 		creationdate: new Date().toISOString(),
 		status: "lobby",
 		gamepin: gamePin,
 	});
 
+	const { data: gameData, error: gameError } = await toast.promise(insertGamePromise, {
+		loading: "Creating game...",
+		success: "Game created!",
+		error: (err) =>
+			"Failed to create game: " + (err?.message || "Unknown error") + "\n\nPlease try again.",
+	});
+
 	if (gameError) {
-		toast.error("Failed to create game: " + gameError.message + "\n\nPlease try again.");
 		return;
+		Wait.v = false;
 	}
 
 	// Prepare questions and answers for batch insertion
-	const questionsData = questions.map((q, index) => ({
+	const questionsData = questions.map((q) => ({
 		gameid: gamePin,
 		questionstext: q.name,
 		correctanswer: q.correctAnswer,
@@ -24,19 +32,28 @@ export async function createGame(questions, gamePin) {
 		media: q.media || null,
 	}));
 
-	const { data: questionsResult, error: questionsError } = await supabase
+	const insertQuestionsPromise = supabase.from("questions").insert(questionsData).select("id");
-		.from("questions")
+
-		.insert(questionsData)
+	const { data: questionsResult, error: questionsError } = await toast.promise(
-		.select("id");
+		insertQuestionsPromise,
+		{
+			loading: "Inserting questions...",
+			success: "Questions inserted!",
+			error: (err) =>
+				"Failed to insert questions: " +
+				(err?.message || "Unknown error") +
+				"\n\nPlease try again.",
+		},
+	);
 
 	if (questionsError) {
-		toast.error("Failed to insert questions: " + questionsError.message + "\n\nPlease try again.");
 		return;
+		Wait.v = false;
 	}
 
 	const answersData = [];
 	questionsResult.forEach((question, index) => {
-		questions[index].answers.forEach((answer, answerIndex) => {
+		questions[index].answers.forEach((answer) => {
 			answersData.push({
 				questionid: question.id,
 				content: answer,
@@ -44,11 +61,18 @@ export async function createGame(questions, gamePin) {
 		});
 	});
 
-	const { error: answersError } = await supabase.from("answers").insert(answersData);
+	const insertAnswersPromise = supabase.from("answers").insert(answersData);
+
+	const { error: answersError } = await toast.promise(insertAnswersPromise, {
+		loading: "Inserting answers...",
+		success: "Answers inserted!",
+		error: (err) =>
+			"Failed to insert answers: " + (err?.message || "Unknown error") + "\n\nPlease try again.",
+	});
 
 	if (answersError) {
-		toast.error("Failed to insert answers: " + answersError.message + "\n\nPlease try again.");
 		return;
+		Wait.v = false;
 	}
 
 	window.location.href = `/kahootclone/host?gamepin=${gamePin}`;