I’m building a website where users can create, edit, and share quizzes using unique links. Creator of quiz have the option to edit quiz questions or delete them as per their requirements. However, I’m encountering two issues related to handling these features with my Supabase database:
Issue 1: Duplicates When Updating Questions
When a quiz question is updated, the changes are saved in the database, but the updated question gets duplicated instead of replacing the original. I suspect this might be due to how I’m handling updates in the database.
Issue 2: Questions Not Deleting Properly
When I try to delete a quiz question, it doesn’t actually get removed from the database. There are no errors in the console, so I’m having difficulty identifying the root cause of the problem.
I’ve tried debugging and searching for solutions but haven’t been able to fix either issue. Below is the relevant code I’m using to handle updates and deletions:
const QuizCreator = ({ quizId, onCancel }: QuizCreatorProps) => {
const [quizTitle, setQuizTitle] = useState("");
const [questions, setQuestions] = useState<Question[]>([]);
const { toast } = useToast();
const { theme, isDark } = useTheme();
const [deletedQuestions, setDeletedQuestions] = useState<Set<string>>(new Set());
useEffect(() => {
const fetchQuizData = async () => {
if (!quizId) return;
try {
const { data: quiz, error: quizError } = await supabase
.from("quizzes")
.select("*")
.eq("id", quizId)
.single();
if (quizError) throw quizError;
setQuizTitle(quiz.title);
const { data: questionData, error: questionsError } = await supabase
.from("questions")
.select("*")
.eq("quiz_id", quizId);
if (questionsError) throw questionsError;
if (questionData) {
const formattedQuestions: Question[] = questionData.map((q) => ({
id: q.id,
question: q.question,
imageUrl: q.image_url,
options: jsonToQuizOptions(q.options),
correctAnswer: q.correct_answer,
answerExplanation: q.answer_description,
}));
setQuestions(formattedQuestions);
}
} catch (error) {
console.error("Error fetching quiz:", error);
toast({
title: "Error",
description: "Failed to load quiz data",
variant: "destructive",
});
}
};
fetchQuizData();
}, [quizId, toast]);
const handleSubmit = async (e: React.FormEvent, isDraft: boolean = false) => {
e.preventDefault();
try {
const { data: { user } } = await supabase.auth.getUser();
if (!user) {
toast({
title: "Error",
description: "You must be logged in to create a quiz",
variant: "destructive",
});
return;
}
const processedQuestions = questions.map((q) => ({
id: q.id,
...q,
options: quizOptionsToJson(q.options),
correctAnswer: q.correctAnswer.toUpperCase(),
}));
let quizData;
if (quizId) {
const { data: quiz, error: quizError } = await supabase
.from("quizzes")
.update({ title: quizTitle, is_draft: isDraft })
.eq("id", quizId)
.select()
.single();
if (quizError) throw quizError;
quizData = quiz;
} else {
const { data: quiz, error: quizError } = await supabase
.from("quizzes")
.insert({ title: quizTitle, is_draft: isDraft, creator_id: user.id })
.select()
.single();
if (quizError) throw quizError;
quizData = quiz;
}
// Delete removed questions
if (deletedQuestions.size > 0) {
const { error: deleteError } = await supabase
.from("questions")
.delete()
.in("id", Array.from(deletedQuestions));
if (deleteError) throw deleteError;
}
// Update existing questions
const updatedQuestions = processedQuestions.filter(q => q.id);
if (updatedQuestions.length > 0) {
const { error: updateError } = await supabase
.from("questions")
.upsert(updatedQuestions.map(q => ({
id: q.id,
quiz_id: quizData.id,
question: q.question,
options: q.options,
correct_answer: q.correctAnswer,
answer_description: q.answerExplanation,
image_url: q.imageUrl || null,
})));
if (updateError) throw updateError;
}
// Insert new questions
const newQuestions = processedQuestions.filter(q => !q.id);
if (newQuestions.length > 0) {
const { error: insertError } = await supabase
.from("questions")
.insert(newQuestions.map(q => ({
quiz_id: quizData.id,
question: q.question,
options: q.options,
correct_answer: q.correctAnswer,
answer_description: q.answerExplanation,
image_url: q.imageUrl || null,
})));
if (insertError) throw insertError;
}
toast({
title: isDraft ? "Draft Saved" : quizId ? "Quiz Updated!" : "Quiz Created!",
description: isDraft
? "Your quiz has been saved as a draft."
: "Quiz link copied to clipboard.",
});
if (!isDraft) {
navigator.clipboard.writeText(`${window.location.origin}/quiz/${quizData.id}`);
}
onCancel();
} catch (error) {
console.error("Error saving quiz:", error);
toast({
title: "Error",
description: "Failed to save the quiz.",
variant: "destructive",
});
}
};
const removeQuestion = (index: number) => {
const question = questions[index];
if (question.id) {
setDeletedQuestions(prev => new Set([...prev, question.id]));
}
setQuestions(questions.filter((_, i) => i !== index));
};
return (
<div className={`min-h-screen ${isDark ? 'bg-dark' : 'bg-light'} py-8`}>
<div className="max-w-3xl mx-auto px-4">
<Button onClick={onCancel} className="mb-6 shadow-lg">
<ArrowLeft className="h-4 w-4 mr-2" />
Back to Dashboard
</Button>
<form onSubmit={(e) => handleSubmit(e, false)} className="space-y-8">
<Card className="p-6 rounded-2xl shadow-lg">
<QuizTitleInput value={quizTitle} onChange={setQuizTitle} />
{questions.map((question, index) => (
!deletedQuestions.has(question.id) && (
<QuestionForm
key={question.id || index}
question={question}
index={index}
onQuestionChange={handleQuestionChange}
onRemoveQuestion={() => removeQuestion(index)}
totalQuestions={questions.length}
onImageUpload={(index: number, event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0];
if (file) {
const reader = new FileReader();
reader.onloadend = () => {
const updatedQuestions = [...questions];
updatedQuestions[index].imageUrl = reader.result as string;
setQuestions(updatedQuestions);
};
reader.readAsDataURL(file);
}
}}
onRemoveImage={() => {
const updatedQuestions = [...questions];
updatedQuestions[index].imageUrl = null;
setQuestions(updatedQuestions);
}}
/>
)
))}
<Button type="button" onClick={addQuestion} className="mt-4 w-full shadow-md">
Add Question
</Button>
<QuizActionButtons
onSaveDraft={(e) => handleSubmit(e, true)}
isEditing={!!quizId}
/>
</Card>
</form>
</div>
</div>
);
};
export default QuizCreator;