343 lines
13 KiB
JavaScript
343 lines
13 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
||
import { BookOpen, CheckCircle, Loader, ArrowRight, Plus, Search, ChevronLeft, MessageSquare } from 'lucide-react';
|
||
import { motion, AnimatePresence } from 'framer-motion';
|
||
import { Link } from 'react-router-dom';
|
||
import Card from '../components/ui/Card';
|
||
import Button from '../components/ui/Button';
|
||
import Tag from '../components/ui/Tag';
|
||
import Input from '../components/ui/Input';
|
||
import LearningContentViewer from '../components/ui/LearningContentViewer';
|
||
import { useApp } from '../store/AppContext';
|
||
import { getAssignedTopic, generateLearningContent, getCachedContent, generateCustomTopic } from '../lib/learningService';
|
||
import * as db from '../lib/db';
|
||
|
||
const Leren = () => {
|
||
const { state } = useApp();
|
||
const [assignedTopic, setAssignedTopic] = useState(null);
|
||
const [allTopics, setAllTopics] = useState([]);
|
||
|
||
// View state
|
||
const [view, setView] = useState('overview'); // overview, detail, creating
|
||
const [activeTopic, setActiveTopic] = useState(null);
|
||
const [content, setContent] = useState(null);
|
||
|
||
// Loading & Error
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
const [error, setError] = useState(null);
|
||
|
||
// Custom Topic
|
||
const [customTopicQuery, setCustomTopicQuery] = useState('');
|
||
|
||
// Weekly status
|
||
const [weeklyDone, setWeeklyDone] = useState(false);
|
||
const [sessionDone, setSessionDone] = useState(false);
|
||
|
||
// Feedback
|
||
const [showFeedbackModal, setShowFeedbackModal] = useState(false);
|
||
const [feedbackText, setFeedbackText] = useState('');
|
||
const [feedbackPrompted, setFeedbackPrompted] = useState(false);
|
||
|
||
useEffect(() => {
|
||
if (state.currentUser) {
|
||
const load = async () => {
|
||
const [assigned, topics, done] = await Promise.all([
|
||
getAssignedTopic(state.currentUser.id, state.weekNumber),
|
||
db.getTopics(),
|
||
db.getLearnDone(state.currentUser.id, state.weekNumber),
|
||
]);
|
||
setAssignedTopic(assigned);
|
||
setAllTopics(topics);
|
||
if (done) setWeeklyDone(true);
|
||
};
|
||
load();
|
||
}
|
||
}, [state.currentUser, state.weekNumber]);
|
||
|
||
const handleOpenTopic = (topic) => {
|
||
setActiveTopic(topic);
|
||
setView('detail');
|
||
setSessionDone(false);
|
||
setError(null);
|
||
setFeedbackText('');
|
||
setFeedbackPrompted(false);
|
||
const cached = getCachedContent(topic.id);
|
||
if (cached) {
|
||
setContent(cached);
|
||
} else {
|
||
setContent(null);
|
||
}
|
||
};
|
||
|
||
const loadContent = async () => {
|
||
if (!activeTopic) return;
|
||
setIsLoading(true);
|
||
setError(null);
|
||
try {
|
||
const generated = await generateLearningContent(activeTopic);
|
||
setContent(generated);
|
||
} catch (e) {
|
||
setError(e.message);
|
||
} finally {
|
||
setIsLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleCreateCustom = async (e) => {
|
||
e.preventDefault();
|
||
if (!customTopicQuery.trim()) return;
|
||
|
||
setIsLoading(true);
|
||
setView('creating');
|
||
setError(null);
|
||
try {
|
||
const newTopic = await generateCustomTopic(customTopicQuery);
|
||
setAllTopics(await db.getTopics());
|
||
setCustomTopicQuery('');
|
||
handleOpenTopic(newTopic);
|
||
} catch (e) {
|
||
setError(e.message);
|
||
setView('overview');
|
||
} finally {
|
||
setIsLoading(false);
|
||
}
|
||
};
|
||
|
||
const doComplete = async () => {
|
||
setSessionDone(true);
|
||
if (!weeklyDone) {
|
||
setWeeklyDone(true);
|
||
await db.setLearnDone(state.currentUser.id, state.weekNumber);
|
||
}
|
||
};
|
||
|
||
const handleComplete = () => {
|
||
if (!feedbackPrompted) {
|
||
setFeedbackPrompted(true);
|
||
setShowFeedbackModal(true);
|
||
return;
|
||
}
|
||
doComplete();
|
||
};
|
||
|
||
const handleSubmitFeedback = async () => {
|
||
if (feedbackText.trim()) {
|
||
await db.setSetting(
|
||
`feedback:${state.currentUser.id}:${activeTopic.id}:${state.weekNumber}`,
|
||
feedbackText.trim()
|
||
);
|
||
}
|
||
setShowFeedbackModal(false);
|
||
doComplete();
|
||
};
|
||
|
||
const handleSkipFeedback = () => {
|
||
setShowFeedbackModal(false);
|
||
doComplete();
|
||
};
|
||
|
||
// ── Detail View ──────────────────────────────────────────
|
||
if (view === 'detail' && activeTopic) {
|
||
if (sessionDone) {
|
||
return (
|
||
<div className="p-4 md:p-8 max-w-2xl mx-auto text-center py-20">
|
||
<motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ type: 'spring', stiffness: 200 }}>
|
||
<CheckCircle size={80} className="mx-auto text-teal mb-6" />
|
||
</motion.div>
|
||
<h1 className="text-3xl font-bold mb-4">Learning session complete!</h1>
|
||
<p className="text-fg-muted mb-8">
|
||
You have successfully reviewed "<strong>{activeTopic.label}</strong>".
|
||
{weeklyDone && ' Your weekly minimum is met.'}
|
||
</p>
|
||
<div className="flex justify-center gap-4">
|
||
<Button variant="outline" onClick={() => setView('overview')}>Learn Another</Button>
|
||
<Link to="/test">
|
||
<Button>Start Weekly Test <ArrowRight size={18} className="ml-2" /></Button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="p-4 md:p-8 max-w-4xl mx-auto pb-24 md:pb-8">
|
||
<AnimatePresence>
|
||
{showFeedbackModal && (
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
className="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||
style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
|
||
>
|
||
<motion.div
|
||
initial={{ scale: 0.95, opacity: 0, y: 16 }}
|
||
animate={{ scale: 1, opacity: 1, y: 0 }}
|
||
exit={{ scale: 0.95, opacity: 0, y: 16 }}
|
||
transition={{ type: 'spring', stiffness: 300, damping: 24 }}
|
||
className="w-full max-w-lg"
|
||
>
|
||
<Card className="border border-bg-warm shadow-xl">
|
||
<div className="flex items-center gap-3 mb-2">
|
||
<div className="w-10 h-10 rounded-full bg-teal/10 flex items-center justify-center flex-shrink-0">
|
||
<MessageSquare size={20} className="text-teal" />
|
||
</div>
|
||
<h2 className="text-xl font-bold">How was this content?</h2>
|
||
</div>
|
||
<p className="text-fg-muted text-sm mb-5">
|
||
Your feedback helps improve future learning content. This is optional — you can skip if you prefer.
|
||
</p>
|
||
<textarea
|
||
autoFocus
|
||
value={feedbackText}
|
||
onChange={e => setFeedbackText(e.target.value)}
|
||
placeholder="What was clear? What could be improved? Anything missing?"
|
||
rows={4}
|
||
className="w-full rounded-[var(--r-sm)] border border-bg-warm bg-bg p-3 text-sm resize-none focus:outline-none focus:border-teal transition-colors"
|
||
/>
|
||
<div className="flex justify-end gap-3 mt-4">
|
||
<Button variant="outline" onClick={handleSkipFeedback}>Skip</Button>
|
||
<Button onClick={handleSubmitFeedback}>Submit Feedback</Button>
|
||
</div>
|
||
</Card>
|
||
</motion.div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
|
||
<button onClick={() => setView('overview')} className="flex items-center gap-2 text-fg-muted hover:text-teal mb-6 transition-colors">
|
||
<ChevronLeft size={16} /> Back to overview
|
||
</button>
|
||
|
||
<div className="mb-8">
|
||
<div className="flex items-center gap-3 mb-2">
|
||
<Tag variant="dark" className="font-mono text-xs">{activeTopic.type}</Tag>
|
||
{activeTopic.id === assignedTopic?.id && <Tag variant="accent">Weekly Required</Tag>}
|
||
</div>
|
||
<h1 className="text-3xl md:text-4xl font-bold text-teal">{activeTopic.label}</h1>
|
||
<p className="text-fg-muted mt-2">{activeTopic.description}</p>
|
||
</div>
|
||
|
||
{!content && !isLoading && (
|
||
<Card className="border border-bg-warm text-center py-16">
|
||
<BookOpen size={48} className="mx-auto text-teal/30 mb-4" />
|
||
<p className="text-fg-muted mb-6">Click the button to generate personalized AI learning content for this topic.</p>
|
||
<Button onClick={loadContent}>Generate Learning Content</Button>
|
||
</Card>
|
||
)}
|
||
|
||
{isLoading && (
|
||
<Card className="border border-bg-warm text-center py-16">
|
||
<Loader size={48} className="mx-auto text-teal animate-spin mb-4" />
|
||
<p className="font-medium">AI is generating your learning module...</p>
|
||
<p className="text-fg-muted text-sm mt-2">This may take 10–30 seconds.</p>
|
||
</Card>
|
||
)}
|
||
|
||
{error && (
|
||
<Card className="border border-red-200 bg-red-50 text-red-900 p-6">
|
||
<p className="font-bold mb-1">Generation failed</p>
|
||
<p className="text-sm">{error}</p>
|
||
<Button onClick={loadContent} variant="outline" className="mt-4 border-red-300 text-red-700">Try again</Button>
|
||
</Card>
|
||
)}
|
||
|
||
{content && <LearningContentViewer content={content} topic={activeTopic} />}
|
||
|
||
{content && (
|
||
<div className="mt-10 pt-6 border-t border-bg-warm flex justify-end">
|
||
<Button onClick={handleComplete}>
|
||
<CheckCircle size={18} className="mr-2" /> Complete Session
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ── Creating Topic Loading ─────────────────────────────────
|
||
if (view === 'creating') {
|
||
return (
|
||
<div className="p-4 md:p-8 max-w-2xl mx-auto text-center py-20">
|
||
<Loader size={48} className="mx-auto text-teal animate-spin mb-4" />
|
||
<h1 className="text-2xl font-bold text-teal mb-2">Architecting New Topic</h1>
|
||
<p className="text-fg-muted">The AI is creating a structure for "{customTopicQuery}"...</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ── Overview ──────────────────────────────────────────────
|
||
const otherTopics = allTopics.filter(t => t.id !== assignedTopic?.id && t.type !== 'fact');
|
||
|
||
return (
|
||
<div className="p-4 md:p-8 max-w-5xl mx-auto pb-24 md:pb-8 animate-in fade-in duration-300">
|
||
<div className="mb-10">
|
||
<h1 className="text-3xl md:text-4xl font-bold text-teal mb-3">Learning Station</h1>
|
||
<p className="text-fg-muted text-lg">
|
||
You must complete at least 1 topic per week. Feel free to explore more from the library!
|
||
</p>
|
||
</div>
|
||
|
||
{error && (
|
||
<div className="mb-6 bg-red-50 text-red-800 p-4 rounded-[var(--r-sm)] border border-red-200">
|
||
{error}
|
||
</div>
|
||
)}
|
||
|
||
{/* Required Topic */}
|
||
{assignedTopic && (
|
||
<div className="mb-12">
|
||
<h2 className="text-xl font-bold mb-4 flex items-center gap-2">
|
||
Weekly Assignment {weeklyDone && <CheckCircle size={20} className="text-teal" />}
|
||
</h2>
|
||
<Card
|
||
hoverable
|
||
className={`border-2 cursor-pointer transition-all ${weeklyDone ? 'border-teal/30 bg-teal/5' : 'border-teal shadow-md'}`}
|
||
onClick={() => handleOpenTopic(assignedTopic)}
|
||
>
|
||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||
<div>
|
||
<Tag variant={weeklyDone ? 'success' : 'accent'} className="mb-2">
|
||
{weeklyDone ? 'Completed' : 'Required'}
|
||
</Tag>
|
||
<h3 className="text-2xl font-bold text-teal">{assignedTopic.label}</h3>
|
||
<p className="text-fg-muted mt-1">{assignedTopic.description}</p>
|
||
</div>
|
||
<Button className="whitespace-nowrap flex-shrink-0">
|
||
{weeklyDone ? 'Review' : 'Start Learning'} <ArrowRight size={18} className="ml-2" />
|
||
</Button>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
)}
|
||
|
||
|
||
|
||
{/* Other Available Topics */}
|
||
{otherTopics.length > 0 && (
|
||
<div>
|
||
<h2 className="text-xl font-bold mb-4">Knowledge Base Library</h2>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
{otherTopics.map(topic => (
|
||
<Card
|
||
key={topic.id}
|
||
hoverable
|
||
className="border border-bg-warm cursor-pointer flex flex-col h-full"
|
||
onClick={() => handleOpenTopic(topic)}
|
||
>
|
||
<Tag variant="dark" className="self-start text-[10px] mb-2">{topic.type}</Tag>
|
||
<h3 className="font-bold text-lg mb-1">{topic.label}</h3>
|
||
<p className="text-sm text-fg-muted line-clamp-2 mb-4 flex-1">{topic.description}</p>
|
||
<div className="flex items-center text-teal font-medium text-sm mt-auto group">
|
||
Learn <ArrowRight size={14} className="ml-1 transition-transform group-hover:translate-x-1" />
|
||
</div>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Leren;
|