update flash card, test

src/features/toeic/components/TestResult.tsx

@@ -8,6 +8,8 @@ import { saveTestResult } from '@/lib/progress-service'
 import { useAwardActivity } from '@/hooks/use-gamification'
 import { XP_REWARDS } from '@/lib/gamification-service'
 
+const ANSWER_LABELS = ['A', 'B', 'C', 'D']
+
 function formatTime(s: number) {
   const m = Math.floor(s / 60)
   const sec = s % 60
@@ -17,89 +19,72 @@ function formatTime(s: number) {
 
 export function TestResult() {
   const navigate = useNavigate()
-  const { partId, partName, questions, answers, timeUsed, reset } = useTestStore()
+  const { testId, testName, parts, answers, timeUsed, reset } = useTestStore()
   const { isAuthenticated, isLoading } = useRequireAuth()
   const user = useAuthStore((s) => s.user)
   const savedRef = useRef(false)
   const { mutate: awardActivity } = useAwardActivity()
 
+  // Flatten all questions across parts
+  const allQuestions = parts.flatMap(p => p.questions)
+
   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
+    if (!user || savedRef.current || allQuestions.length === 0) return
     savedRef.current = true
+    const correct = allQuestions.filter(q => answers[q.id] === q.correctAnswer).length
     awardActivity({ xp: XP_REWARDS.test })
     saveTestResult(user.id, {
-      partId,
-      partName,
-      score: answers.filter((a, i) => a === questions[i]?.correctAnswer).length,
-      total: questions.length,
+      testId,
+      selectedParts: parts.map(p => p.partNumber),
+      score: correct,
+      total: allQuestions.length,
       timeUsed,
-      answers: questions.map((q, i) => ({
+      answers: allQuestions.map(q => ({
         questionId: q.id,
-        selected: answers[i],
-        correct: answers[i] === q.correctAnswer,
+        selected: answers[q.id] ?? null,
+        correct: answers[q.id] === q.correctAnswer,
       })),
     })
-  }, [user, questions, answers, partId, partName, timeUsed])
+  }, [user, allQuestions.length])
 
-  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) {
+  if (allQuestions.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 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 đề thi
         </button>
       </div>
     )
   }
 
+  const correct = allQuestions.filter(q => answers[q.id] === q.correctAnswer).length
+  const wrong = allQuestions.filter(q => answers[q.id] !== null && answers[q.id] !== undefined && answers[q.id] !== q.correctAnswer).length
+  const skipped = allQuestions.filter(q => answers[q.id] === null || answers[q.id] === undefined).length
+  const total = allQuestions.length
+  const percent = total > 0 ? Math.round((correct / total) * 100) : 0
+  const circumference = 2 * Math.PI * 52
+  const offset = circumference - (percent / 100) * circumference
+
   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"
+              <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"
-              />
+                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>
@@ -107,121 +92,92 @@ export function TestResult() {
             </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="text-sm text-slate-400 mb-4">{testName}</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>
+              {[
+                { label: 'Đúng', value: correct, cls: 'bg-green-50 border-green-100 text-green-600' },
+                { label: 'Sai', value: wrong, cls: 'bg-red-50 border-red-100 text-red-600' },
+                { label: 'Bỏ qua', value: skipped, cls: 'bg-slate-50 border-slate-200 text-slate-500' },
+                { label: 'Thời gian', value: formatTime(timeUsed), cls: 'bg-blue-50 border-blue-100 text-blue-600' },
+              ].map(({ label, value, cls }) => (
+                <div key={label} className={cn('border rounded-xl px-4 py-2 text-center', cls)}>
+                  <div className="text-xl font-extrabold">{value}</div>
+                  <div className="text-xs text-slate-400">{label}</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 onClick={() => navigate({ to: '/toeic/session' })}
+              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 onClick={() => { reset(); navigate({ to: '/toeic' }) }}
+              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(
+      {/* Answer review grouped by part */}
+      {parts.map(part => (
+        <div key={part.partNumber} className="bg-white rounded-2xl border border-slate-200 p-6 mb-4">
+          <h2 className="text-base font-bold text-slate-800 mb-4">Part {part.partNumber} — {part.partName}</h2>
+          <div className="space-y-4">
+            {part.questions.map((q, i) => {
+              const userAnswer = answers[q.id] ?? null
+              const isCorrect = userAnswer === q.correctAnswer
+              const isSkipped = userAnswer === null || userAnswer === undefined
+              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(
+                )}>
+                  <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(
+                    )}>{i + 1}</span>
+                    <div className="flex-1 min-w-0">
+                      {q.text && <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'
+                            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>
-                      ))}
+                          )}>
+                            {ANSWER_LABELS[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>
-                    {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>
-                    )}
+                    <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>
-                  <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>
+      ))}
     </div>
   )
 }