refactor files
This commit is contained in:
227
src/features/toeic/components/TestResult.tsx
Normal file
227
src/features/toeic/components/TestResult.tsx
Normal file
@@ -0,0 +1,227 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { useNavigate } from '@tanstack/react-router'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { useTestStore } from '@/store/test-store'
|
||||
import { useRequireAuth } from '@/hooks/use-require-auth'
|
||||
import { useAuthStore } from '@/store/auth-store'
|
||||
import { saveTestResult } from '@/lib/progress-service'
|
||||
import { useAwardActivity } from '@/hooks/use-gamification'
|
||||
import { XP_REWARDS } from '@/lib/gamification-service'
|
||||
|
||||
function formatTime(s: number) {
|
||||
const m = Math.floor(s / 60)
|
||||
const sec = s % 60
|
||||
if (m === 0) return `${sec}s`
|
||||
return `${m}m ${sec}s`
|
||||
}
|
||||
|
||||
export function TestResult() {
|
||||
const navigate = useNavigate()
|
||||
const { partId, partName, questions, answers, timeUsed, reset } = useTestStore()
|
||||
const { isAuthenticated, isLoading } = useRequireAuth()
|
||||
const user = useAuthStore((s) => s.user)
|
||||
const savedRef = useRef(false)
|
||||
const { mutate: awardActivity } = useAwardActivity()
|
||||
|
||||
useEffect(() => {
|
||||
if (isLoading) return
|
||||
if (!isAuthenticated) navigate({ to: '/toeic' })
|
||||
}, [isLoading, isAuthenticated, navigate])
|
||||
|
||||
// Save test result once when page mounts (fire-and-forget)
|
||||
useEffect(() => {
|
||||
if (!user || savedRef.current || questions.length === 0) return
|
||||
savedRef.current = true
|
||||
awardActivity({ xp: XP_REWARDS.test })
|
||||
saveTestResult(user.id, {
|
||||
partId,
|
||||
partName,
|
||||
score: answers.filter((a, i) => a === questions[i]?.correctAnswer).length,
|
||||
total: questions.length,
|
||||
timeUsed,
|
||||
answers: questions.map((q, i) => ({
|
||||
questionId: q.id,
|
||||
selected: answers[i],
|
||||
correct: answers[i] === q.correctAnswer,
|
||||
})),
|
||||
})
|
||||
}, [user, questions, answers, partId, partName, timeUsed])
|
||||
|
||||
const correct = answers.filter((a, i) => a === questions[i]?.correctAnswer).length
|
||||
const wrong = answers.filter((a, i) => a !== null && a !== questions[i]?.correctAnswer).length
|
||||
const skipped = answers.filter((a) => a === null).length
|
||||
const total = questions.length
|
||||
const percent = total > 0 ? Math.round((correct / total) * 100) : 0
|
||||
|
||||
const circumference = 2 * Math.PI * 52
|
||||
const offset = circumference - (percent / 100) * circumference
|
||||
|
||||
function handleRetry() {
|
||||
navigate({ to: '/toeic/session' })
|
||||
}
|
||||
|
||||
function handleHome() {
|
||||
reset()
|
||||
navigate({ to: '/' })
|
||||
}
|
||||
|
||||
if (questions.length === 0) {
|
||||
return (
|
||||
<div className="px-6 py-8 max-w-6xl mx-auto text-center">
|
||||
<p className="text-slate-500 mb-4">Không có dữ liệu bài thi.</p>
|
||||
<button
|
||||
onClick={() => navigate({ to: '/toeic' })}
|
||||
className="bg-blue-600 text-white px-6 py-2.5 rounded-xl font-semibold text-sm hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
Chọn Part để luyện thi
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="px-4 lg:px-6 py-6 max-w-6xl mx-auto page-enter">
|
||||
{/* Score header */}
|
||||
<div className="bg-white rounded-2xl p-6 border border-slate-200 mb-5">
|
||||
<div className="flex flex-col lg:flex-row items-center gap-6">
|
||||
{/* Circle */}
|
||||
<div className="flex-shrink-0 relative w-32 h-32">
|
||||
<svg className="w-full h-full -rotate-90" viewBox="0 0 120 120">
|
||||
<circle cx="60" cy="60" r="52" fill="none" stroke="#e2e8f0" strokeWidth="8" />
|
||||
<circle
|
||||
cx="60"
|
||||
cy="60"
|
||||
r="52"
|
||||
fill="none"
|
||||
stroke={percent >= 70 ? '#16a34a' : percent >= 50 ? '#2563eb' : '#dc2626'}
|
||||
strokeWidth="8"
|
||||
strokeLinecap="round"
|
||||
strokeDasharray={circumference}
|
||||
strokeDashoffset={offset}
|
||||
className="transition-all duration-700"
|
||||
/>
|
||||
</svg>
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center">
|
||||
<span className="text-3xl font-extrabold text-slate-800">{correct}/{total}</span>
|
||||
<span className="text-xs text-slate-400 font-medium">điểm</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="flex-1 text-center lg:text-left">
|
||||
<div className="text-2xl font-extrabold text-slate-800 mb-1">
|
||||
{percent >= 80 ? 'Xuất sắc!' : percent >= 60 ? 'Hoàn thành!' : 'Cố gắng hơn nhé!'}
|
||||
</div>
|
||||
<div className="text-sm text-slate-400 mb-4">
|
||||
Part {partId} — {partName}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-3 justify-center lg:justify-start">
|
||||
<div className="bg-green-50 border border-green-100 rounded-xl px-4 py-2 text-center">
|
||||
<div className="text-xl font-extrabold text-green-600">{correct}</div>
|
||||
<div className="text-xs text-slate-400">Đúng</div>
|
||||
</div>
|
||||
<div className="bg-red-50 border border-red-100 rounded-xl px-4 py-2 text-center">
|
||||
<div className="text-xl font-extrabold text-red-600">{wrong}</div>
|
||||
<div className="text-xs text-slate-400">Sai</div>
|
||||
</div>
|
||||
<div className="bg-slate-50 border border-slate-200 rounded-xl px-4 py-2 text-center">
|
||||
<div className="text-xl font-extrabold text-slate-500">{skipped}</div>
|
||||
<div className="text-xs text-slate-400">Bỏ qua</div>
|
||||
</div>
|
||||
<div className="bg-blue-50 border border-blue-100 rounded-xl px-4 py-2 text-center">
|
||||
<div className="text-xl font-extrabold text-blue-600">{formatTime(timeUsed)}</div>
|
||||
<div className="text-xs text-slate-400">Thời gian</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex lg:flex-col gap-3 flex-shrink-0">
|
||||
<button
|
||||
onClick={handleRetry}
|
||||
className="flex items-center gap-2 px-5 py-2.5 bg-blue-600 text-white rounded-xl text-sm font-semibold hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
<span className="material-symbols-outlined" style={{ fontSize: 18 }}>replay</span>
|
||||
Làm lại
|
||||
</button>
|
||||
<button
|
||||
onClick={handleHome}
|
||||
className="flex items-center gap-2 px-5 py-2.5 border border-slate-200 text-slate-600 rounded-xl text-sm font-semibold hover:bg-slate-50 transition-colors"
|
||||
>
|
||||
<span className="material-symbols-outlined" style={{ fontSize: 18 }}>home</span>
|
||||
Về trang chủ
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Answer review */}
|
||||
<div className="bg-white rounded-2xl border border-slate-200 p-6">
|
||||
<h2 className="text-base font-bold text-slate-800 mb-4">Xem lại đáp án</h2>
|
||||
<div className="space-y-4">
|
||||
{questions.map((q, i) => {
|
||||
const userAnswer = answers[i]
|
||||
const isCorrect = userAnswer === q.correctAnswer
|
||||
const isSkipped = userAnswer === null
|
||||
|
||||
return (
|
||||
<div
|
||||
key={q.id}
|
||||
className={cn(
|
||||
'rounded-xl border p-4',
|
||||
isCorrect ? 'border-green-100 bg-green-50/50' : isSkipped ? 'border-slate-100 bg-slate-50/50' : 'border-red-100 bg-red-50/50',
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<span
|
||||
className={cn(
|
||||
'w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5',
|
||||
isCorrect ? 'bg-green-600 text-white' : isSkipped ? 'bg-slate-400 text-white' : 'bg-red-600 text-white',
|
||||
)}
|
||||
>
|
||||
{i + 1}
|
||||
</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-slate-800 mb-2">{q.text}</p>
|
||||
<div className="flex flex-wrap gap-2 mb-2">
|
||||
{q.options.map((opt, j) => (
|
||||
<span
|
||||
key={j}
|
||||
className={cn(
|
||||
'text-xs px-2.5 py-1 rounded-lg font-medium',
|
||||
j === q.correctAnswer
|
||||
? 'bg-green-100 text-green-700 border border-green-200'
|
||||
: j === userAnswer && !isCorrect
|
||||
? 'bg-red-100 text-red-700 border border-red-200 line-through'
|
||||
: 'bg-slate-100 text-slate-500',
|
||||
)}
|
||||
>
|
||||
{['A', 'B', 'C', 'D'][j]}. {opt}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
{q.explanation && (
|
||||
<p className="text-xs text-slate-500 bg-white rounded-lg px-3 py-2 border border-slate-100">
|
||||
<span className="font-semibold text-slate-600">Giải thích: </span>
|
||||
{q.explanation}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<span className="flex-shrink-0">
|
||||
{isCorrect ? (
|
||||
<span className="material-symbols-outlined text-green-600" style={{ fontSize: 20 }}>check_circle</span>
|
||||
) : isSkipped ? (
|
||||
<span className="material-symbols-outlined text-slate-400" style={{ fontSize: 20 }}>remove_circle</span>
|
||||
) : (
|
||||
<span className="material-symbols-outlined text-red-500" style={{ fontSize: 20 }}>cancel</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user