update flash card, test
This commit is contained in:
151
src/features/toeic/components/ToeicTestDetail.tsx
Normal file
151
src/features/toeic/components/ToeicTestDetail.tsx
Normal file
@@ -0,0 +1,151 @@
|
||||
import { useState } from 'react'
|
||||
import { useNavigate } from '@tanstack/react-router'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { fetchTestWithParts } from '@/features/toeic/api/test-list-api'
|
||||
import { fetchQuestionsForTest } from '@/hooks/use-questions'
|
||||
import { useTestStore } from '@/store/test-store'
|
||||
import { useRequireAuth } from '@/hooks/use-require-auth'
|
||||
|
||||
interface Props { testId: number }
|
||||
|
||||
export function ToeicTestDetail({ testId }: Props) {
|
||||
const navigate = useNavigate()
|
||||
const { startExam } = useTestStore()
|
||||
const { requireAuth } = useRequireAuth()
|
||||
const [selectedParts, setSelectedParts] = useState<number[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['test-detail', testId],
|
||||
queryFn: () => fetchTestWithParts(testId),
|
||||
})
|
||||
|
||||
function togglePart(partNumber: number) {
|
||||
setSelectedParts(prev =>
|
||||
prev.includes(partNumber) ? prev.filter(p => p !== partNumber) : [...prev, partNumber]
|
||||
)
|
||||
}
|
||||
|
||||
async function handleStart(mode: 'full' | 'parts') {
|
||||
if (!requireAuth()) return
|
||||
if (mode === 'parts' && selectedParts.length === 0) return
|
||||
if (!data) return
|
||||
setLoading(true)
|
||||
try {
|
||||
const partNumbers = mode === 'full' ? undefined : selectedParts
|
||||
const parts = await fetchQuestionsForTest(testId, partNumbers)
|
||||
const totalSeconds = mode === 'full'
|
||||
? data.test.durationMinutes * 60
|
||||
: selectedParts.length * 10 * 60
|
||||
startExam({ testId, testName: data.test.title, parts, totalSeconds })
|
||||
navigate({ to: '/toeic/session' })
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="px-6 py-8 max-w-5xl mx-auto">
|
||||
<div className="h-8 w-64 bg-slate-200 rounded animate-pulse mb-8" />
|
||||
<div className="grid grid-cols-2 gap-5">
|
||||
<div className="h-80 bg-slate-100 rounded-2xl animate-pulse" />
|
||||
<div className="h-80 bg-slate-100 rounded-2xl animate-pulse" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!data) return null
|
||||
const { test, parts } = data
|
||||
|
||||
return (
|
||||
<div className="px-6 py-8 max-w-5xl mx-auto page-enter">
|
||||
{/* Back + title */}
|
||||
<div className="flex items-center gap-3 mb-1">
|
||||
<button
|
||||
onClick={() => navigate({ to: '/toeic' })}
|
||||
className="w-8 h-8 rounded-full border border-slate-200 flex items-center justify-center hover:bg-slate-50 transition-colors"
|
||||
>
|
||||
<span className="material-symbols-outlined text-slate-600" style={{ fontSize: 18 }}>arrow_back</span>
|
||||
</button>
|
||||
<h1 className="text-2xl font-extrabold text-slate-800">{test.title}</h1>
|
||||
</div>
|
||||
<p className="text-slate-400 text-sm ml-11 mb-8">{test.totalQuestions} câu · {test.durationMinutes} phút</p>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
|
||||
{/* Full test card */}
|
||||
<div
|
||||
className="rounded-2xl p-6 flex flex-col text-white relative overflow-hidden"
|
||||
style={{ background: 'linear-gradient(135deg, #2563EB, #1d4ed8)' }}
|
||||
>
|
||||
<div className="absolute -top-4 -right-4 opacity-10">
|
||||
<span className="material-symbols-outlined" style={{ fontSize: 100 }}>military_tech</span>
|
||||
</div>
|
||||
<span className="material-symbols-outlined mb-4" style={{ fontSize: 32 }}>military_tech</span>
|
||||
<h2 className="text-2xl font-extrabold mb-1">Thi Toàn Bộ</h2>
|
||||
<p className="text-blue-100 text-sm mb-2">{test.totalQuestions} câu · {test.durationMinutes} phút · Toàn bộ {parts.length} parts</p>
|
||||
<p className="text-blue-100 text-xs mb-8">Mô phỏng bài thi TOEIC thực tế với giới hạn thời gian.</p>
|
||||
<button
|
||||
onClick={() => handleStart('full')}
|
||||
disabled={loading}
|
||||
className="mt-auto py-3 bg-white text-blue-600 rounded-xl font-bold text-sm hover:bg-blue-50 transition-colors disabled:opacity-60 flex items-center justify-center gap-2"
|
||||
>
|
||||
{loading ? <span className="w-4 h-4 border-2 border-blue-300 border-t-blue-600 rounded-full animate-spin" /> : (
|
||||
<><span className="material-symbols-outlined" style={{ fontSize: 18 }}>play_arrow</span>Bắt đầu thi</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Part selection card */}
|
||||
<div className="bg-white rounded-2xl border border-slate-200 p-6 flex flex-col">
|
||||
<span className="material-symbols-outlined text-blue-600 mb-4" style={{ fontSize: 32 }}>checklist</span>
|
||||
<h2 className="text-xl font-extrabold text-slate-800 mb-1">Chọn Part Luyện Tập</h2>
|
||||
<p className="text-slate-400 text-sm mb-4">Chọn các part muốn luyện tập</p>
|
||||
|
||||
<div className="space-y-2 flex-1">
|
||||
{parts.map((part) => {
|
||||
const checked = selectedParts.includes(part.partNumber)
|
||||
return (
|
||||
<button
|
||||
key={part.partNumber}
|
||||
onClick={() => togglePart(part.partNumber)}
|
||||
className={cn(
|
||||
'w-full flex items-center gap-3 px-3 py-2.5 rounded-xl border-2 transition-all text-left',
|
||||
checked
|
||||
? 'border-blue-600 bg-blue-50'
|
||||
: 'border-slate-100 hover:border-slate-200 bg-slate-50/50',
|
||||
)}
|
||||
>
|
||||
<span className={cn(
|
||||
'w-5 h-5 rounded flex items-center justify-center border-2 flex-shrink-0',
|
||||
checked ? 'bg-blue-600 border-blue-600' : 'border-slate-300',
|
||||
)}>
|
||||
{checked && <span className="material-symbols-outlined text-white" style={{ fontSize: 14 }}>check</span>}
|
||||
</span>
|
||||
<span className="flex-1 text-sm font-semibold text-slate-700">
|
||||
Part {part.partNumber} — {part.title}
|
||||
</span>
|
||||
<span className="text-xs text-slate-400 bg-slate-100 px-2 py-0.5 rounded-full flex-shrink-0">
|
||||
{part.questionCount} câu
|
||||
</span>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => handleStart('parts')}
|
||||
disabled={loading || selectedParts.length === 0}
|
||||
className="mt-4 w-full py-3 bg-blue-600 text-white rounded-xl font-bold text-sm hover:bg-blue-700 transition-colors disabled:opacity-40 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||
>
|
||||
{loading ? <span className="w-4 h-4 border-2 border-blue-200 border-t-white rounded-full animate-spin" /> : (
|
||||
<><span className="material-symbols-outlined" style={{ fontSize: 18 }}>play_arrow</span>Bắt đầu luyện tập</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user