(SP: 2) [Frontend] Quiz results dashboard, review cache fix, UX improvements (#317)

Author: LesiaUKR

frontend/app/[locale]/dashboard/page.tsx

@@ -3,6 +3,7 @@ import { getTranslations } from 'next-intl/server';
 import { PostAuthQuizSync } from '@/components/auth/PostAuthQuizSync';
 import { ExplainedTermsCard } from '@/components/dashboard/ExplainedTermsCard';
 import { ProfileCard } from '@/components/dashboard/ProfileCard';
+import { QuizResultsSection } from '@/components/dashboard/QuizResultsSection';
 import { QuizSavedBanner } from '@/components/dashboard/QuizSavedBanner';
 import { StatsCard } from '@/components/dashboard/StatsCard';
 import { DynamicGridBackground } from '@/components/shared/DynamicGridBackground';
@@ -116,6 +117,9 @@ export default async function DashboardPage({
           <div className="mt-8">
             <ExplainedTermsCard />
           </div>
+          <div className="mt-8">
+            <QuizResultsSection attempts={lastAttempts} locale={locale} />
+          </div>
         </main>
       </DynamicGridBackground>
     </div>

frontend/app/[locale]/quiz/[slug]/page.tsx

@@ -5,10 +5,10 @@ import { getTranslations } from 'next-intl/server';
 
 import { QuizContainer } from '@/components/quiz/QuizContainer';
 import { categoryTabStyles } from '@/data/categoryStyles';
-import { cn } from '@/lib/utils';
 import { stripCorrectAnswers } from '@/db/queries/quiz';
 import { getQuizBySlug, getQuizQuestionsRandomized } from '@/db/queries/quiz';
 import { getCurrentUser } from '@/lib/auth';
+import { cn } from '@/lib/utils';
 
 type MetadataProps = { params: Promise<{ locale: string; slug: string }> };
 
@@ -52,9 +52,10 @@ export default async function QuizPage({
     notFound();
   }
 
-  const categoryStyle = quiz.categorySlug
-    ? categoryTabStyles[quiz.categorySlug as keyof typeof categoryTabStyles]
-    : null;
+  const categoryStyle =
+    quiz.categorySlug && quiz.categorySlug in categoryTabStyles
+      ? categoryTabStyles[quiz.categorySlug as keyof typeof categoryTabStyles]
+      : null;
 
   const parsedSeed = seedParam ? Number.parseInt(seedParam, 10) : Number.NaN;
   const seed = Number.isFinite(parsedSeed)

frontend/components/quiz/QuizQuestion.tsx

@@ -1,7 +1,7 @@
 'use client';
-
 import { BookOpen, Check, Lightbulb, X } from 'lucide-react';
 import { useTranslations } from 'next-intl';
+import { useEffect, useRef } from 'react';
 
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { QuizQuestionClient } from '@/db/queries/quiz';
@@ -36,6 +36,14 @@ export function QuizQuestion({
 
   const isCorrectAnswer = isRevealed && isCorrect;
 
+    const nextButtonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (isRevealed) {
+      nextButtonRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  }, [isRevealed]);
+
   return (
     <div className="flex flex-col gap-6">
       <div className="text-xl font-medium text-gray-900 dark:text-gray-100">
@@ -130,6 +138,7 @@ export function QuizQuestion({
       )}
       {isRevealed && (
         <button
+          ref={nextButtonRef}
           onClick={onNext}
           disabled={isLoading}
           className="group animate-in fade-in slide-in-from-bottom-2 relative mt-2 w-full overflow-hidden rounded-xl border px-6 py-3 text-center text-base font-semibold transition-all duration-300 disabled:opacity-50"

frontend/db/queries/quiz.ts

@@ -4,8 +4,8 @@ import { cache } from 'react';
 
 import { getOrCreateQuestionsCache } from '@/lib/quiz/quiz-answers-redis';
 import type {
-  AttemptReview,
   AttemptQuestionDetail,
+  AttemptReview,
   QuizQuestionWithAnswers,
   UserLastAttempt,
 } from '@/types/quiz';
@@ -22,14 +22,7 @@ import {
   quizTranslations,
   quizzes,
 } from '../schema/quiz';
-export type {
-  AttemptReview,
-  AttemptQuestionDetail,
-  QuizAnswer,
-  QuizQuestion,
-  QuizQuestionWithAnswers,
-  UserLastAttempt,
-} from '@/types/quiz';
+export type { QuizAnswer, QuizQuestion, QuizQuestionWithAnswers } from '@/types/quiz';
 
 export interface Quiz {
   id: string;
@@ -61,23 +54,25 @@ export interface QuizQuestionClient {
 
 const attemptReviewCache = new Map<string, AttemptReview>();
 
-function getAttemptReviewCacheKey(attemptId: string, locale: string) {
-  return `${attemptId}:${locale}`;
+function getAttemptReviewCacheKey(attemptId: string, userId: string, locale: string) {
+  return `${attemptId}:${userId}:${locale}`;
 }
 
 async function getCachedAttemptReview(
   attemptId: string,
+  userId: string,
   locale: string
 ): Promise<AttemptReview | null> {
-  return attemptReviewCache.get(getAttemptReviewCacheKey(attemptId, locale)) ?? null;
+  return attemptReviewCache.get(getAttemptReviewCacheKey(attemptId, userId, locale)) ?? null;
 }
 
 async function cacheAttemptReview(
   attemptId: string,
+  userId: string,
   locale: string,
   review: AttemptReview
 ): Promise<void> {
-  attemptReviewCache.set(getAttemptReviewCacheKey(attemptId, locale), review);
+  attemptReviewCache.set(getAttemptReviewCacheKey(attemptId, userId, locale), review);
 }
 
 export function stripCorrectAnswers(
@@ -491,7 +486,7 @@ export async function getAttemptReviewDetails(
   userId: string,
   locale: string = 'uk'
 ): Promise<AttemptReview | null> {
-  const cached = await getCachedAttemptReview(attemptId, locale);
+  const cached = await getCachedAttemptReview(attemptId, userId, locale);
   if (cached) return cached;
 
   const attemptRow = await db
@@ -552,7 +547,7 @@ export async function getAttemptReviewDetails(
       completedAt: attempt.completedAt,
       incorrectQuestions: [],
     };
-    await cacheAttemptReview(attemptId, locale, review);
+    await cacheAttemptReview(attemptId, userId, locale, review);
     return review;
   }
 
@@ -635,6 +630,6 @@ export async function getAttemptReviewDetails(
     incorrectQuestions,
   };
 
-  await cacheAttemptReview(attemptId, locale, review);
+  await cacheAttemptReview(attemptId, userId, locale, review);
   return review;
 }

frontend/lib/quiz/quiz-answers-redis.ts

@@ -7,7 +7,7 @@ import {
   quizQuestionContent,
   quizQuestions} from '@/db/schema/quiz';
 import { getRedisClient } from '@/lib/redis';
-import type { QuizQuestionWithAnswers } from '@/types/quiz';
+import type { QuizQuestionWithAnswers, AttemptReview} from '@/types/quiz';
 
 interface QuizAnswersCache {
   quizId: string;
@@ -283,3 +283,43 @@ export async function clearVerifiedQuestions(
     console.warn('Failed to clear verified questions:', err);
   }
 }
+
+const ATTEMPT_REVIEW_TTL = 48 * 60 * 60; // 48 hours
+
+function getAttemptReviewCacheKey(attemptId: string, userId: string | undefined, locale: string): string {
+  return `quiz:attempt-review:${attemptId}:${userId}:${locale}`;
+}
+
+export async function getCachedAttemptReview(
+  attemptId: string,
+  userId: string | undefined,
+  locale: string
+): Promise<AttemptReview | null> {
+  const redis = getRedisClient();
+  if (!redis) return null;
+
+  try {
+    return await redis.get<AttemptReview>(getAttemptReviewCacheKey(attemptId, userId, locale));
+  } catch (err) {
+    console.warn('Redis attempt review cache read failed:', err);
+    return null;
+  }
+}
+
+export async function cacheAttemptReview(
+  attemptId: string,
+  userId: string | undefined,
+  locale: string,
+  data: AttemptReview
+): Promise<void> {
+  const redis = getRedisClient();
+  if (!redis) return;
+
+  try {
+    await redis.set(getAttemptReviewCacheKey(attemptId, userId, locale), data, {
+      ex: ATTEMPT_REVIEW_TTL,
+    });
+  } catch (err) {
+    console.warn('Redis attempt review cache write failed:', err);
+  }
+}

frontend/messages/en.json

@@ -931,6 +931,37 @@
       "viewLeaderboard": "View leaderboard",
       "tryAgain": "Try again"
     },
+    "quizResults": {
+      "title": "Quiz Results",
+      "noAttempts": "You haven't taken any quizzes yet",
+      "startQuiz": "Try one",
+      "score": "Score",
+      "integrity": "Integrity",
+      "points": "Points",
+      "scoreHint": "Number of correct answers out of total questions",
+      "integrityHint": "Fair play score (no violations detected)",
+      "pointsHint": "Points earned for improving your previous result",
+      "timeAgo": "{value} ago",
+      "mastered": "Mastered",
+      "needsReview": "Review",
+      "study": "Study",
+      "date": "Date",
+      "status": "Status"
+    },
+    "quizReview": {
+      "title": "Error Analysis",
+      "subtitle": "{incorrect} of {total} — incorrect",
+      "allCorrect": "All answers are correct!",
+      "allCorrectHint": "You answered all questions correctly",
+      "yourAnswer": "Your answer",
+      "correctAnswer": "Correct answer",
+      "explanation": "Explanation",
+      "retakeQuiz": "Retake Quiz",
+      "backToDashboard": "Back to Dashboard",
+      "notFound": "Attempt not found",
+      "expandAll": "Expand all",
+      "collapseAll": "Collapse all"
+    },
     "explainedTerms": {
       "title": "Learned Terms",
       "subtitle": "AI explanations you've saved",

frontend/messages/pl.json

@@ -958,6 +958,37 @@
       "viewLeaderboard": "Zobacz ranking",
       "tryAgain": "Spróbuj ponownie"
     },
+    "quizResults": {
+      "title": "Wyniki quizów",
+      "noAttempts": "Nie przeszedłeś jeszcze żadnego quizu",
+      "startQuiz": "Spróbuj",
+      "score": "Wynik",
+      "integrity": "Czystość",
+      "points": "Punkty",
+      "scoreHint": "Liczba poprawnych odpowiedzi z ogólnej liczby",
+      "integrityHint": "Wskaźnik uczciwego przejścia (bez naruszeń)",
+      "pointsHint": "Punkty przyznane za poprawę wyniku",
+      "timeAgo": "{value} temu",
+      "mastered": "Opanowane",
+      "needsReview": "Powtórka",
+      "study": "Nauka",
+      "date": "Data",
+      "status": "Status"
+    },
+    "quizReview": {
+      "title": "Analiza błędów",
+      "subtitle": "{incorrect} z {total} — niepoprawnie",
+      "allCorrect": "Wszystkie odpowiedzi poprawne!",
+      "allCorrectHint": "Odpowiedziałeś poprawnie na wszystkie pytania",
+      "yourAnswer": "Twoja odpowiedź",
+      "correctAnswer": "Poprawna odpowiedź",
+      "explanation": "Wyjaśnienie",
+      "retakeQuiz": "Rozwiąż ponownie",
+      "backToDashboard": "Wróć do panelu",
+      "notFound": "Nie znaleziono próby",
+      "expandAll": "Rozwiń wszystko",
+      "collapseAll": "Zwiń wszystko"
+    },
     "explainedTerms": {
       "title": "Nauczone Terminy",
       "subtitle": "Wyjaśnienia AI, które zapisałeś",

frontend/messages/uk.json

@@ -934,6 +934,37 @@
       "viewLeaderboard": "Переглянути рейтинг",
       "tryAgain": "Пройти ще раз"
     },
+    "quizResults": {
+      "title": "Результати квізів",
+      "noAttempts": "Ви ще не проходили жодного квізу",
+      "startQuiz": "Спробувати",
+      "score": "Результат",
+      "integrity": "Чистота",
+      "points": "Балів",
+      "scoreHint": "Кількість правильних відповідей з загальної кількості",
+      "integrityHint": "Показник чесного проходження (без порушень)",
+      "pointsHint": "Бали, нараховані за покращення результату",
+      "timeAgo": "{value} тому",
+      "mastered": "Засвоєно",
+      "needsReview": "Повторити",
+      "study": "Вивчити",
+      "date": "Дата",
+      "status": "Статус"
+    },
+    "quizReview": {
+      "title": "Аналіз помилок",
+      "subtitle": "{incorrect} з {total} — неправильно",
+      "allCorrect": "Всі відповіді правильні!",
+      "allCorrectHint": "Ви відповіли на всі питання вірно",
+      "yourAnswer": "Ваша відповідь",
+      "correctAnswer": "Правильна відповідь",
+      "explanation": "Пояснення",
+      "retakeQuiz": "Пройти ще раз",
+      "backToDashboard": "Назад до кабінету",
+      "notFound": "Спроба не знайдена",
+      "expandAll": "Розгорнути все",
+      "collapseAll": "Згорнути все"
+    },
     "explainedTerms": {
       "title": "Вивчені терміни",
       "subtitle": "AI-пояснення, які ви зберегли",