update flash card, test

src/features/flash-card/components/FlashCardLearnPage.tsx

@@ -0,0 +1,301 @@
+import { useState, useCallback } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { useNavigate } from '@tanstack/react-router'
+import { cn } from '@/lib/utils'
+import { useAuthStore } from '@/store/auth-store'
+import { fetchFlashcardTerms, fetchUserProgress, upsertTermProgress } from '../api/flashcard-api'
+import type { FlashcardTerm, UserProgress } from '../api/flashcard-api'
+
+const EASE = {
+  ignored: -1,
+  hard: 0.1,
+  easy: 0.65,
+  known: 1.0,
+} as const
+
+type EaseKey = keyof typeof EASE
+
+interface Props {
+  listId: number
+}
+
+export function FlashCardLearnPage({ listId }: Props) {
+  const navigate = useNavigate()
+  const user = useAuthStore(s => s.user)
+  const queryClient = useQueryClient()
+
+  const [isFlipped, setIsFlipped] = useState(false)
+  const [currentIdx, setCurrentIdx] = useState(0)
+  const [sessionStats, setSessionStats] = useState({ known: 0, learning: 0, ignored: 0 })
+  const [isDone, setIsDone] = useState(false)
+
+  const { data: terms = [], isLoading: loadingTerms } = useQuery({
+    queryKey: ['flashcard-terms', listId],
+    queryFn: () => fetchFlashcardTerms(listId),
+  })
+
+  const { data: progress = [] } = useQuery({
+    queryKey: ['flashcard-progress', user?.id, listId],
+    queryFn: () => fetchUserProgress(user!.id, listId),
+    enabled: !!user,
+  })
+
+  const progressMap: Record<number, UserProgress> = {}
+  progress.forEach(p => { progressMap[p.term_id] = p })
+
+  // Prioritize: new + learning terms first, then known
+  const sessionTerms: FlashcardTerm[] = [
+    ...terms.filter(t => {
+      const s = progressMap[t.id]?.status ?? 'new'
+      return s === 'new' || s === 'learning'
+    }),
+    ...terms.filter(t => progressMap[t.id]?.status === 'known'),
+  ]
+
+  const { mutate: saveProgress } = useMutation({
+    mutationFn: ({ termId, status, easeFactor }: { termId: number; status: UserProgress['status']; easeFactor: number }) =>
+      upsertTermProgress(user!.id, termId, listId, status, easeFactor),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['flashcard-progress', user?.id, listId] })
+    },
+  })
+
+  const handleAnswer = useCallback((key: EaseKey) => {
+    const term = sessionTerms[currentIdx]
+    if (!term || !user) return
+
+    const easeFactor = EASE[key]
+    const status: UserProgress['status'] =
+      key === 'known' ? 'known' :
+      key === 'ignored' ? 'ignored' :
+      'learning'
+
+    saveProgress({ termId: term.id, status, easeFactor })
+
+    setSessionStats(prev => ({
+      known: prev.known + (key === 'known' ? 1 : 0),
+      learning: prev.learning + (key === 'easy' || key === 'hard' ? 1 : 0),
+      ignored: prev.ignored + (key === 'ignored' ? 1 : 0),
+    }))
+
+    if (currentIdx + 1 >= sessionTerms.length) {
+      setIsDone(true)
+    } else {
+      setCurrentIdx(i => i + 1)
+      setIsFlipped(false)
+    }
+  }, [currentIdx, sessionTerms, user, saveProgress])
+
+  const total = sessionTerms.length
+  const progressPct = total > 0 ? Math.round((currentIdx / total) * 100) : 0
+  const current = sessionTerms[currentIdx]
+
+  if (loadingTerms) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="w-8 h-8 border-2 border-blue-100 border-t-blue-600 rounded-full animate-spin" />
+      </div>
+    )
+  }
+
+  if (sessionTerms.length === 0) {
+    return (
+      <div className="min-h-screen flex flex-col items-center justify-center gap-4 px-4">
+        <span className="material-symbols-outlined text-slate-300" style={{ fontSize: 56, fontVariationSettings: "'FILL' 1" }}>check_circle</span>
+        <h2 className="text-xl font-bold text-slate-700">Không có thẻ nào để học!</h2>
+        <p className="text-slate-400 text-sm text-center">Bộ thẻ này chưa có từ nào. Vui lòng thêm từ trước.</p>
+        <button
+          onClick={() => navigate({ to: '/flash-card/$listId', params: { listId: String(listId) } })}
+          className="mt-2 px-6 py-2.5 bg-blue-600 text-white rounded-xl text-sm font-semibold hover:bg-blue-700 transition-colors"
+        >
+          Quay lại
+        </button>
+      </div>
+    )
+  }
+
+  if (isDone) {
+    return (
+      <div className="min-h-screen flex flex-col items-center justify-center gap-6 px-4">
+        <div className="text-center">
+          <span className="material-symbols-outlined text-emerald-500 block mb-3" style={{ fontSize: 64, fontVariationSettings: "'FILL' 1" }}>celebration</span>
+          <h2 className="text-2xl font-extrabold text-slate-800 mb-1">Hoàn thành phiên học!</h2>
+          <p className="text-slate-500">Bạn đã ôn xong {total} thẻ trong phiên này</p>
+        </div>
+        <div className="flex gap-4">
+          <div className="text-center px-5 py-3 bg-emerald-50 rounded-xl border border-emerald-100">
+            <div className="text-2xl font-extrabold text-emerald-600">{sessionStats.known}</div>
+            <div className="text-xs text-slate-400 mt-0.5">Đã biết</div>
+          </div>
+          <div className="text-center px-5 py-3 bg-blue-50 rounded-xl border border-blue-100">
+            <div className="text-2xl font-extrabold text-blue-600">{sessionStats.learning}</div>
+            <div className="text-xs text-slate-400 mt-0.5">Đang học</div>
+          </div>
+          <div className="text-center px-5 py-3 bg-slate-50 rounded-xl border border-slate-200">
+            <div className="text-2xl font-extrabold text-slate-500">{sessionStats.ignored}</div>
+            <div className="text-xs text-slate-400 mt-0.5">Bỏ qua</div>
+          </div>
+        </div>
+        <div className="flex gap-3">
+          <button
+            onClick={() => {
+              setCurrentIdx(0)
+              setIsFlipped(false)
+              setIsDone(false)
+              setSessionStats({ known: 0, learning: 0, ignored: 0 })
+            }}
+            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>
+            Học lại
+          </button>
+          <button
+            onClick={() => navigate({ to: '/flash-card/$listId', params: { listId: String(listId) } })}
+            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 }}>list</span>
+            Xem danh sách
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen flex flex-col bg-slate-50">
+      {/* Header */}
+      <header className="sticky top-0 z-10 bg-white/80 backdrop-blur-xl border-b border-slate-100">
+        <div className="max-w-3xl mx-auto px-6 py-3.5 flex items-center justify-between">
+          <span className="text-base font-bold text-slate-800">Phiên học từ vựng</span>
+          <div className="flex items-center gap-4">
+            <span className="text-sm text-slate-500 font-medium">{currentIdx + 1} / {total} từ</span>
+            <button
+              onClick={() => navigate({ to: '/flash-card/$listId', params: { listId: String(listId) } })}
+              className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-slate-100 transition-colors"
+            >
+              <span className="material-symbols-outlined text-slate-500" style={{ fontSize: 20 }}>close</span>
+            </button>
+          </div>
+        </div>
+        {/* Progress bar */}
+        <div className="w-full bg-slate-100 h-1 overflow-hidden">
+          <div
+            className="h-full bg-blue-600 transition-all duration-500"
+            style={{ width: `${progressPct}%` }}
+          />
+        </div>
+      </header>
+
+      <main className="flex-1 max-w-3xl mx-auto w-full px-4 py-10 flex flex-col items-center">
+        {/* Session stats pills */}
+        <div className="flex items-center gap-3 mb-10">
+          <div className="px-4 py-1.5 rounded-full bg-emerald-50 text-emerald-700 text-sm font-semibold flex items-center gap-2">
+            <span className="w-2 h-2 rounded-full bg-emerald-500" />
+            {sessionStats.known} biết
+          </div>
+          <div className="px-4 py-1.5 rounded-full bg-blue-50 text-blue-700 text-sm font-semibold flex items-center gap-2">
+            <span className="w-2 h-2 rounded-full bg-blue-500" />
+            {sessionStats.learning} đang học
+          </div>
+          <div className="px-4 py-1.5 rounded-full bg-slate-100 text-slate-500 text-sm font-semibold flex items-center gap-2">
+            <span className="w-2 h-2 rounded-full bg-slate-400" />
+            {sessionStats.ignored} bỏ qua
+          </div>
+        </div>
+
+        {/* Flashcard */}
+        {current && (
+          <div className="relative group w-full max-w-xl">
+            <div className="absolute -inset-4 bg-blue-600/5 blur-3xl rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-700" />
+            <div
+              className="relative w-full min-h-[280px] bg-white rounded-2xl shadow-lg border border-slate-200/60 flex flex-col items-center justify-between py-8 px-8 cursor-pointer hover:scale-[1.01] hover:border-blue-200 transition-all duration-300 select-none"
+              onClick={() => setIsFlipped(v => !v)}
+              role="button"
+              aria-label={isFlipped ? 'Nhấp để xem từ' : 'Nhấp để xem nghĩa'}
+            >
+              {!isFlipped ? (
+                <>
+                  <div className="text-xs font-bold tracking-widest text-slate-400 uppercase">TIẾNG ANH</div>
+                  <div className="flex flex-col items-center gap-2 text-center">
+                    <h1 className="text-5xl font-extrabold tracking-tight text-blue-600">{current.word}</h1>
+                    {current.phonetic && (
+                      <span className="text-slate-500 italic font-light text-lg">{current.phonetic}</span>
+                    )}
+                    {current.part_of_speech && (
+                      <span className="mt-3 px-3 py-1 bg-blue-50 text-blue-600 text-[11px] font-bold uppercase tracking-wider rounded-lg">
+                        {current.part_of_speech}
+                      </span>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-2 text-slate-400 hover:text-slate-600 transition-colors">
+                    <span className="material-symbols-outlined" style={{ fontSize: 18 }}>flip</span>
+                    <span className="text-sm font-medium">Nhấp để xem nghĩa</span>
+                  </div>
+                </>
+              ) : (
+                <>
+                  <div className="text-xs font-bold tracking-widest text-slate-400 uppercase">NGHĨA</div>
+                  <div className="flex flex-col items-center gap-3 text-center">
+                    <p className="text-2xl font-bold text-slate-800">{current.definition ?? '—'}</p>
+                    {current.example && (
+                      <p className="text-sm text-slate-500 italic bg-slate-50 rounded-xl px-4 py-2.5 border border-slate-100 max-w-sm">
+                        "{current.example}"
+                      </p>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-2 text-slate-400 hover:text-slate-600 transition-colors">
+                    <span className="material-symbols-outlined" style={{ fontSize: 18 }}>flip</span>
+                    <span className="text-sm font-medium">Nhấp để xem từ</span>
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Action buttons */}
+        <div className="mt-12 flex flex-col items-center gap-4 w-full max-w-xl">
+          <div className={cn(
+            'flex items-stretch gap-3 w-full h-14 transition-all duration-300',
+            !isFlipped && 'opacity-40 pointer-events-none',
+          )}>
+            <button
+              onClick={() => handleAnswer('ignored')}
+              className="flex-1 flex items-center justify-center gap-2 rounded-2xl border-2 border-slate-200 text-slate-500 font-bold text-sm hover:bg-slate-100 transition-all"
+            >
+              <span className="material-symbols-outlined" style={{ fontSize: 18 }}>close</span>
+              Bỏ qua
+            </button>
+            <button
+              onClick={() => handleAnswer('hard')}
+              className="flex-1 flex items-center justify-center gap-2 rounded-2xl bg-amber-500 text-white font-bold text-sm shadow-md shadow-amber-500/20 hover:bg-amber-600 transition-all"
+            >
+              <span className="material-symbols-outlined" style={{ fontSize: 18 }}>warning</span>
+              Khó
+            </button>
+            <button
+              onClick={() => handleAnswer('easy')}
+              className="flex-1 flex items-center justify-center gap-2 rounded-2xl bg-blue-600 text-white font-bold text-sm shadow-md shadow-blue-600/20 hover:bg-blue-700 transition-all"
+            >
+              <span className="material-symbols-outlined" style={{ fontSize: 18, fontVariationSettings: "'FILL' 1" }}>thumb_up</span>
+              Dễ
+            </button>
+            <button
+              onClick={() => handleAnswer('known')}
+              className="flex-1 flex items-center justify-center gap-2 rounded-2xl bg-emerald-600 text-white font-bold text-sm shadow-md shadow-emerald-600/20 hover:bg-emerald-700 transition-all"
+            >
+              <span className="material-symbols-outlined" style={{ fontSize: 18, fontVariationSettings: "'FILL' 1" }}>check_circle</span>
+              Đã biết
+            </button>
+          </div>
+          {!isFlipped && (
+            <p className="text-sm text-slate-400 font-medium">Lật thẻ trước khi đánh giá</p>
+          )}
+          {isFlipped && (
+            <p className="text-sm text-slate-400 font-medium">Còn {total - currentIdx - 1} thẻ trong phiên này</p>
+          )}
+        </div>
+      </main>
+    </div>
+  )
+}