428 lines
19 KiB
TypeScript
428 lines
19 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { X, Trash2, Play, BrainCircuit, PenTool, Loader2, Calendar, FileDown, FileUp, Check, ListChecks, Share2, Link2Off, Copy } from 'lucide-react';
|
|
import { QuizListItem } from '../types';
|
|
import { useBodyScrollLock } from '../hooks/useBodyScrollLock';
|
|
import toast from 'react-hot-toast';
|
|
|
|
interface QuizLibraryProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
quizzes: QuizListItem[];
|
|
loading: boolean;
|
|
loadingQuizId: string | null;
|
|
deletingQuizId: string | null;
|
|
sharingQuizId: string | null;
|
|
exporting: boolean;
|
|
error: string | null;
|
|
onLoadQuiz: (id: string) => void;
|
|
onDeleteQuiz: (id: string) => void;
|
|
onShareQuiz: (id: string) => Promise<string>;
|
|
onUnshareQuiz: (id: string) => Promise<void>;
|
|
onExportQuizzes: (ids: string[]) => Promise<void>;
|
|
onImportClick: () => void;
|
|
onRetry: () => void;
|
|
}
|
|
|
|
export const QuizLibrary: React.FC<QuizLibraryProps> = ({
|
|
isOpen,
|
|
onClose,
|
|
quizzes,
|
|
loading,
|
|
loadingQuizId,
|
|
deletingQuizId,
|
|
sharingQuizId,
|
|
exporting,
|
|
error,
|
|
onLoadQuiz,
|
|
onDeleteQuiz,
|
|
onShareQuiz,
|
|
onUnshareQuiz,
|
|
onExportQuizzes,
|
|
onImportClick,
|
|
onRetry,
|
|
}) => {
|
|
const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
|
|
const [selectMode, setSelectMode] = useState(false);
|
|
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
|
|
const isAnyOperationInProgress = loading || !!loadingQuizId || !!deletingQuizId || !!sharingQuizId || exporting;
|
|
|
|
useBodyScrollLock(isOpen);
|
|
|
|
const toggleSelectMode = () => {
|
|
if (selectMode) {
|
|
setSelectedIds(new Set());
|
|
}
|
|
setSelectMode(!selectMode);
|
|
};
|
|
|
|
const toggleQuizSelection = (e: React.MouseEvent, id: string) => {
|
|
e.stopPropagation();
|
|
const newSelected = new Set(selectedIds);
|
|
if (newSelected.has(id)) {
|
|
newSelected.delete(id);
|
|
} else {
|
|
newSelected.add(id);
|
|
}
|
|
setSelectedIds(newSelected);
|
|
};
|
|
|
|
const toggleSelectAll = () => {
|
|
if (selectedIds.size === quizzes.length) {
|
|
setSelectedIds(new Set());
|
|
} else {
|
|
setSelectedIds(new Set(quizzes.map(q => q.id)));
|
|
}
|
|
};
|
|
|
|
const handleExport = async () => {
|
|
await onExportQuizzes(Array.from(selectedIds));
|
|
setSelectMode(false);
|
|
setSelectedIds(new Set());
|
|
};
|
|
|
|
const handleDeleteClick = (e: React.MouseEvent, id: string) => {
|
|
e.stopPropagation();
|
|
setConfirmDeleteId(id);
|
|
};
|
|
|
|
const handleShareClick = async (e: React.MouseEvent, quiz: QuizListItem) => {
|
|
e.stopPropagation();
|
|
if (quiz.isShared && quiz.shareToken) {
|
|
const shareUrl = `${window.location.origin}/shared/${quiz.shareToken}`;
|
|
await navigator.clipboard.writeText(shareUrl);
|
|
toast.success('Link copied to clipboard!');
|
|
} else {
|
|
const token = await onShareQuiz(quiz.id);
|
|
const shareUrl = `${window.location.origin}/shared/${token}`;
|
|
await navigator.clipboard.writeText(shareUrl);
|
|
}
|
|
};
|
|
|
|
const handleUnshareClick = async (e: React.MouseEvent, id: string) => {
|
|
e.stopPropagation();
|
|
await onUnshareQuiz(id);
|
|
};
|
|
|
|
const confirmDelete = async (e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
if (confirmDeleteId) {
|
|
try {
|
|
await onDeleteQuiz(confirmDeleteId);
|
|
setConfirmDeleteId(null);
|
|
} catch {
|
|
setConfirmDeleteId(null);
|
|
}
|
|
}
|
|
};
|
|
|
|
const cancelDelete = (e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
setConfirmDeleteId(null);
|
|
};
|
|
|
|
const formatDate = (dateString: string) => {
|
|
try {
|
|
return new Date(dateString).toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
});
|
|
} catch (e) {
|
|
return dateString;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{isOpen && (
|
|
<>
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
onClick={onClose}
|
|
className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
|
|
>
|
|
<motion.div
|
|
initial={{ scale: 0.9, opacity: 0, y: 20 }}
|
|
animate={{ scale: 1, opacity: 1, y: 0 }}
|
|
exit={{ scale: 0.9, opacity: 0, y: 20 }}
|
|
transition={{ type: "spring", bounce: 0.4 }}
|
|
onClick={(e) => e.stopPropagation()}
|
|
className="bg-white w-full max-w-2xl max-h-[80vh] flex flex-col rounded-[2rem] shadow-[0_10px_0_rgba(0,0,0,0.1)] border-4 border-white/50 relative overflow-hidden"
|
|
>
|
|
<div className="p-6 border-b-2 border-gray-100 flex justify-between items-center bg-white sticky top-0 z-10">
|
|
<div>
|
|
<h2 className="text-3xl font-black text-gray-900 tracking-tight">My Library</h2>
|
|
<p className="text-gray-500 font-bold text-sm">
|
|
{selectMode
|
|
? `${selectedIds.size} of ${quizzes.length} selected`
|
|
: 'Select a quiz to play'
|
|
}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{!loading && quizzes.length > 0 && (
|
|
<>
|
|
<button
|
|
onClick={onImportClick}
|
|
disabled={isAnyOperationInProgress}
|
|
className="p-2 rounded-xl hover:bg-gray-100 transition-colors text-gray-400 hover:text-theme-primary disabled:opacity-50"
|
|
title="Import quizzes"
|
|
>
|
|
<FileUp size={20} strokeWidth={2.5} />
|
|
</button>
|
|
<button
|
|
onClick={toggleSelectMode}
|
|
disabled={isAnyOperationInProgress}
|
|
className={`p-2 rounded-xl transition-colors disabled:opacity-50 ${
|
|
selectMode
|
|
? 'bg-theme-primary/10 text-theme-primary'
|
|
: 'hover:bg-gray-100 text-gray-400 hover:text-theme-primary'
|
|
}`}
|
|
title={selectMode ? 'Cancel selection' : 'Select for export'}
|
|
>
|
|
<ListChecks size={20} strokeWidth={2.5} />
|
|
</button>
|
|
</>
|
|
)}
|
|
<button
|
|
onClick={onClose}
|
|
className="p-2 rounded-xl hover:bg-gray-100 transition-colors text-gray-400 hover:text-gray-600"
|
|
>
|
|
<X size={24} strokeWidth={3} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto p-6 space-y-4 bg-gray-50">
|
|
{loading && (
|
|
<div className="flex flex-col items-center justify-center py-12 text-gray-400">
|
|
<Loader2 size={48} className="animate-spin mb-4 text-theme-primary" />
|
|
<p className="font-bold">Loading your quizzes...</p>
|
|
</div>
|
|
)}
|
|
|
|
{!loading && 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>
|
|
)}
|
|
|
|
{!loading && !error && quizzes.length === 0 && (
|
|
<div className="text-center py-12 space-y-4">
|
|
<div className="bg-gray-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<BrainCircuit size={40} className="text-gray-300" />
|
|
</div>
|
|
<h3 className="text-xl font-black text-gray-400">No saved quizzes yet</h3>
|
|
<p className="text-gray-400 font-medium">Create or generate a quiz to save it here!</p>
|
|
<button
|
|
onClick={onImportClick}
|
|
className="inline-flex items-center gap-2 bg-theme-primary text-white px-4 py-2 rounded-xl font-bold hover:bg-theme-primary-dark transition-colors"
|
|
>
|
|
<FileUp size={18} /> Import Quizzes
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{selectMode && quizzes.length > 0 && (
|
|
<div className="flex items-center justify-between mb-2">
|
|
<button
|
|
onClick={toggleSelectAll}
|
|
disabled={isAnyOperationInProgress}
|
|
className="text-sm font-bold text-theme-primary hover:underline disabled:opacity-50"
|
|
>
|
|
{selectedIds.size === quizzes.length ? 'Deselect All' : 'Select All'}
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{!loading && !error && quizzes.map((quiz) => (
|
|
<motion.div
|
|
key={quiz.id}
|
|
layout
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className={`group bg-white p-4 rounded-2xl border-2 transition-all relative overflow-hidden ${
|
|
selectMode && selectedIds.has(quiz.id)
|
|
? 'border-theme-primary shadow-md'
|
|
: 'border-gray-100 hover:border-theme-primary hover:shadow-md'
|
|
} ${isAnyOperationInProgress ? 'cursor-not-allowed opacity-70' : 'cursor-pointer'}`}
|
|
onClick={(e) => {
|
|
if (isAnyOperationInProgress) return;
|
|
if (selectMode) {
|
|
toggleQuizSelection(e, quiz.id);
|
|
} else {
|
|
onLoadQuiz(quiz.id);
|
|
}
|
|
}}
|
|
>
|
|
<div className="flex justify-between items-start">
|
|
{selectMode && (
|
|
<div className="flex items-center mr-4">
|
|
<div className={`w-6 h-6 rounded-lg border-2 flex items-center justify-center flex-shrink-0 transition-all ${
|
|
selectedIds.has(quiz.id)
|
|
? 'bg-theme-primary border-theme-primary'
|
|
: 'border-gray-300'
|
|
}`}>
|
|
{selectedIds.has(quiz.id) && (
|
|
<Check size={16} className="text-white" strokeWidth={3} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
{quiz.source === 'ai_generated' ? (
|
|
<span className="bg-purple-100 text-purple-600 px-2 py-1 rounded-lg text-xs font-black uppercase tracking-wider flex items-center gap-1">
|
|
<BrainCircuit size={12} /> AI
|
|
</span>
|
|
) : (
|
|
<span className="bg-blue-100 text-blue-600 px-2 py-1 rounded-lg text-xs font-black uppercase tracking-wider flex items-center gap-1">
|
|
<PenTool size={12} /> Manual
|
|
</span>
|
|
)}
|
|
{quiz.isShared && (
|
|
<span className="bg-green-100 text-green-600 px-2 py-1 rounded-lg text-xs font-black uppercase tracking-wider flex items-center gap-1">
|
|
<Share2 size={12} /> Shared
|
|
</span>
|
|
)}
|
|
<span className="text-gray-400 text-xs font-bold flex items-center gap-1">
|
|
<Calendar size={12} /> {formatDate(quiz.createdAt)}
|
|
</span>
|
|
</div>
|
|
|
|
<h3 className="text-xl font-black text-gray-800 mb-1 group-hover:text-theme-primary transition-colors">
|
|
{quiz.title}
|
|
</h3>
|
|
|
|
<p className="text-gray-500 font-medium text-sm">
|
|
{quiz.questionCount} question{quiz.questionCount !== 1 ? 's' : ''}
|
|
{quiz.aiTopic && <span className="text-gray-400"> • Topic: {quiz.aiTopic}</span>}
|
|
</p>
|
|
</div>
|
|
|
|
{!selectMode && (
|
|
<div className="flex items-center gap-2 pl-4">
|
|
{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>
|
|
) : sharingQuizId === quiz.id ? (
|
|
<div className="p-3">
|
|
<Loader2 size={24} className="animate-spin text-theme-primary" />
|
|
</div>
|
|
) : confirmDeleteId === quiz.id ? (
|
|
<div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
|
|
<button
|
|
onClick={confirmDelete}
|
|
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}
|
|
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>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{quiz.isShared ? (
|
|
<div className="flex items-center gap-1">
|
|
<button
|
|
onClick={(e) => handleShareClick(e, quiz)}
|
|
disabled={isAnyOperationInProgress}
|
|
className="p-2.5 rounded-xl bg-green-50 text-green-600 hover:bg-green-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
|
title="Copy share link"
|
|
>
|
|
<Copy size={18} />
|
|
</button>
|
|
<button
|
|
onClick={(e) => handleUnshareClick(e, quiz.id)}
|
|
disabled={isAnyOperationInProgress}
|
|
className="p-2.5 rounded-xl text-gray-300 hover:bg-orange-50 hover:text-orange-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
|
title="Stop sharing"
|
|
>
|
|
<Link2Off size={18} />
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<button
|
|
onClick={(e) => handleShareClick(e, quiz)}
|
|
disabled={isAnyOperationInProgress}
|
|
className="p-2.5 rounded-xl text-gray-300 hover:bg-theme-primary/10 hover:text-theme-primary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
|
title="Share quiz"
|
|
>
|
|
<Share2 size={18} />
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={(e) => handleDeleteClick(e, quiz.id)}
|
|
disabled={isAnyOperationInProgress}
|
|
className="p-2.5 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={18} />
|
|
</button>
|
|
<div className="bg-theme-primary/10 p-3 rounded-xl text-theme-primary group-hover:bg-theme-primary group-hover:text-white transition-all">
|
|
<Play size={24} fill="currentColor" />
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
{selectMode && (
|
|
<div className="p-6 border-t-2 border-gray-100 bg-white flex gap-3">
|
|
<button
|
|
onClick={toggleSelectMode}
|
|
disabled={exporting}
|
|
className="px-6 py-3 rounded-xl font-bold text-gray-600 bg-gray-100 hover:bg-gray-200 transition-colors disabled:opacity-50"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={handleExport}
|
|
disabled={exporting || selectedIds.size === 0}
|
|
className="flex-1 bg-theme-primary text-white px-6 py-3 rounded-xl font-bold shadow-[0_4px_0_var(--theme-primary-dark)] active:shadow-none active:translate-y-[4px] transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
|
>
|
|
{exporting ? (
|
|
<>
|
|
<Loader2 size={20} className="animate-spin" />
|
|
Exporting...
|
|
</>
|
|
) : (
|
|
<>
|
|
<FileDown size={20} />
|
|
Export {selectedIds.size} Quiz{selectedIds.size !== 1 ? 'zes' : ''}
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
</motion.div>
|
|
</>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
};
|