jyapayne/kaboot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Phase 6 complete

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2026-01-13 16:52:57 -07:00
commit 3a22b42492
No known key found for this signature in database
GPG key ID: 6BFE655FA5ABD1E1
11 changed files with 735 additions and 103 deletions
Download patch file Download diff file Expand all files Collapse all files

58
components/QuizLibrary.tsx
View file

@ -8,9 +8,12 @@ interface QuizLibraryProps {
onClose: () => void;
quizzes: QuizListItem[];
loading: boolean;
loadingQuizId: string | null;
deletingQuizId: string | null;
error: string | null;
onLoadQuiz: (id: string) => void;
onDeleteQuiz: (id: string) => void;
onRetry: () => void;
}
export const QuizLibrary: React.FC<QuizLibraryProps> = ({
@ -18,28 +21,36 @@ export const QuizLibrary: React.FC<QuizLibraryProps> = ({
onClose,
quizzes,
loading,
loadingQuizId,
deletingQuizId,
error,
onLoadQuiz,
onDeleteQuiz,
onRetry,
}) => {
const [deletingId, setDeletingId] = useState<string | null>(null);
const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
const isAnyOperationInProgress = loading || !!loadingQuizId || !!deletingQuizId;
const handleDeleteClick = (e: React.MouseEvent, id: string) => {
e.stopPropagation();
setDeletingId(id);
setConfirmDeleteId(id);
};
const confirmDelete = (e: React.MouseEvent) => {
const confirmDelete = async (e: React.MouseEvent) => {
e.stopPropagation();
if (deletingId) {
onDeleteQuiz(deletingId);
setDeletingId(null);
if (confirmDeleteId) {
try {
await onDeleteQuiz(confirmDeleteId);
setConfirmDeleteId(null);
} catch {
setConfirmDeleteId(null);
}
}
};
const cancelDelete = (e: React.MouseEvent) => {
e.stopPropagation();
setDeletingId(null);
setConfirmDeleteId(null);
};
const formatDate = (dateString: string) => {
@ -95,8 +106,14 @@ export const QuizLibrary: React.FC<QuizLibraryProps> = ({
)}
{!loading && error && (
<div className="bg-red-50 border-2 border-red-100 p-4 rounded-2xl text-red-500 font-bold text-center">
{error}
<div className="bg-red-50 border-2 border-red-100 p-4 rounded-2xl text-center">
<p className="text-red-500 font-bold mb-3">{error}</p>
<button
onClick={onRetry}
className="bg-red-500 text-white px-4 py-2 rounded-xl text-sm font-bold hover:bg-red-600 transition-colors"
>
Try Again
</button>
</div>
)}
@ -116,8 +133,8 @@ export const QuizLibrary: React.FC<QuizLibraryProps> = ({
layout
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
className="group bg-white p-4 rounded-2xl border-2 border-gray-100 hover:border-theme-primary hover:shadow-md transition-all cursor-pointer relative overflow-hidden"
onClick={() => onLoadQuiz(quiz.id)}
className={`group bg-white p-4 rounded-2xl border-2 border-gray-100 hover:border-theme-primary hover:shadow-md transition-all relative overflow-hidden ${isAnyOperationInProgress ? 'cursor-not-allowed opacity-70' : 'cursor-pointer'}`}
onClick={() => !isAnyOperationInProgress && onLoadQuiz(quiz.id)}
>
<div className="flex justify-between items-start">
<div className="flex-1">
@ -147,17 +164,27 @@ export const QuizLibrary: React.FC<QuizLibraryProps> = ({
</div>
<div className="flex items-center gap-3 pl-4">
{deletingId === quiz.id ? (
{loadingQuizId === quiz.id ? (
<div className="p-3">
<Loader2 size={24} className="animate-spin text-theme-primary" />
</div>
) : deletingQuizId === quiz.id ? (
<div className="p-3">
<Loader2 size={24} className="animate-spin text-red-500" />
</div>
) : confirmDeleteId === quiz.id ? (
<div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
<button
onClick={confirmDelete}
className="bg-red-500 text-white px-3 py-2 rounded-xl text-sm font-bold shadow-[0_3px_0_#991b1b] active:shadow-none active:translate-y-[3px] transition-all"
disabled={isAnyOperationInProgress}
className="bg-red-500 text-white px-3 py-2 rounded-xl text-sm font-bold shadow-[0_3px_0_#991b1b] active:shadow-none active:translate-y-[3px] transition-all disabled:opacity-50"
>
Confirm
</button>
<button
onClick={cancelDelete}
className="bg-gray-200 text-gray-600 px-3 py-2 rounded-xl text-sm font-bold hover:bg-gray-300 transition-all"
disabled={isAnyOperationInProgress}
className="bg-gray-200 text-gray-600 px-3 py-2 rounded-xl text-sm font-bold hover:bg-gray-300 transition-all disabled:opacity-50"
>
Cancel
</button>
@ -166,7 +193,8 @@ export const QuizLibrary: React.FC<QuizLibraryProps> = ({
<>
<button
onClick={(e) => handleDeleteClick(e, quiz.id)}
className="p-3 rounded-xl text-gray-300 hover:bg-red-50 hover:text-red-500 transition-colors"
disabled={isAnyOperationInProgress}
className="p-3 rounded-xl text-gray-300 hover:bg-red-50 hover:text-red-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
title="Delete quiz"
>
<Trash2 size={20} />