Blog and Sanity: fixes and refactoring

frontend/actions/quiz.ts

@@ -1,5 +1,6 @@
 'use server';
 
+import { and, eq, inArray } from 'drizzle-orm';
 import { eq, inArray } from 'drizzle-orm';
 
 import { db } from '@/db';

frontend/app/[locale]/blog/[slug]/PostDetails.tsx

@@ -84,7 +84,6 @@ function renderPortableTextSpans(
     const text = child?.text || '';
     if (!text) return null;
     const marks = child?.marks || [];
-    const linkKey = marks.find(mark => linkMap.has(mark));
 
     let node: React.ReactNode = marks.length === 0 ? linkifyText(text) : text;
 
@@ -280,11 +279,14 @@ function renderPortableText(
 
     if (block?._type === 'image' && block?.url) {
       nodes.push(
-        <img
+        <Image
           key={block._key || `image-${i}`}
           src={block.url}
           alt={postTitle || 'Post image'}
-          className="my-6 rounded-xl border border-gray-200"
+          width={1200}
+          height={800}
+          sizes="100vw"
+          className="my-6 h-auto w-full rounded-xl border border-gray-200"
         />
       );
       i += 1;

frontend/components/blog/BlogFilters.tsx

@@ -192,7 +192,6 @@ export default function BlogFilters({
     name: string;
     norm: string;
   } | null>(null);
-  const [currentPage, setCurrentPage] = useState(1);
   const lastFiltersRef = useRef<{
     author: string;
     category: string;
@@ -327,11 +326,6 @@ export default function BlogFilters({
     didClearSearchRef.current = true;
   }, [pathname, router, searchParams, searchQuery]);
 
-  useEffect(() => {
-    if (currentPage === parsedPage) return;
-    setCurrentPage(parsedPage);
-  }, [currentPage, parsedPage]);
-
   const resolvedAuthor = useMemo(() => {
     const normParam = normalizeAuthor(authorParam);
     if (!normParam) return selectedAuthor;
@@ -363,12 +357,11 @@ export default function BlogFilters({
       prevFilters.query !== nextFilters.query;
     if (!hasChanged) return;
     lastFiltersRef.current = nextFilters;
-    if (currentPage !== 1) {
-      setCurrentPage(1);
+    if (parsedPage !== 1) {
       updatePageParam(1);
     }
   }, [
-    currentPage,
+    parsedPage,
     resolvedAuthor?.norm,
     resolvedCategory?.norm,
     searchQueryNormalized,
@@ -402,7 +395,7 @@ export default function BlogFilters({
   }, [locale, resolvedAuthor?.name]);
 
   useEffect(() => {
-    if (!resolvedAuthor) return;
+    if (!resolvedAuthor?.norm) return;
     const frame = window.requestAnimationFrame(() => {
       authorHeadingRef.current?.scrollIntoView({
         behavior: 'smooth',
@@ -446,6 +439,7 @@ export default function BlogFilters({
     1,
     Math.ceil(filteredPosts.length / POSTS_PER_PAGE)
   );
+  const currentPage = Math.min(parsedPage, totalPages);
   const paginatedPosts = useMemo(() => {
     const start = (currentPage - 1) * POSTS_PER_PAGE;
     return filteredPosts.slice(start, start + POSTS_PER_PAGE);
@@ -462,10 +456,9 @@ export default function BlogFilters({
   }, [selectedAuthorData]);
 
   useEffect(() => {
-    if (currentPage <= totalPages) return;
-    setCurrentPage(totalPages);
+    if (parsedPage <= totalPages) return;
     updatePageParam(totalPages);
-  }, [currentPage, totalPages, updatePageParam]);
+  }, [parsedPage, totalPages, updatePageParam]);
 
   const scrollToCategoryFilters = useCallback(() => {
     const target = categoryFiltersRef.current || postsGridRef.current;
@@ -494,11 +487,14 @@ export default function BlogFilters({
                 href={`/blog/${featuredPost.slug.current}`}
                 className="group block"
               >
-                <div className="h-[300px] overflow-hidden rounded-3xl border-0 shadow-[0_12px_30px_rgba(0,0,0,0.12)] sm:h-[340px] md:h-full md:min-h-[400px] lg:min-h-[440px]">
-                  <img
+                <div className="relative h-[300px] overflow-hidden rounded-3xl border-0 shadow-[0_12px_30px_rgba(0,0,0,0.12)] sm:h-[340px] md:h-full md:min-h-[400px] lg:min-h-[440px]">
+                  <Image
                     src={featuredPost.mainImage}
                     alt={featuredPost.title}
-                    className="block h-full w-full scale-[1.02] border-0 object-cover transition-transform duration-300 group-hover:scale-[1.05]"
+                    fill
+                    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 60vw, 720px"
+                    className="scale-[1.02] object-cover transition-transform duration-300 group-hover:scale-[1.05]"
+                    priority
                   />
                 </div>
               </Link>
@@ -689,7 +685,6 @@ export default function BlogFilters({
           totalPages={totalPages}
           onPageChange={page => {
             pendingScrollRef.current = true;
-            setCurrentPage(page);
             updatePageParam(page);
           }}
           accentColor="var(--accent-primary)"

frontend/components/blog/BlogHeaderSearch.tsx

@@ -95,7 +95,7 @@ export function BlogHeaderSearch() {
     return () => {
       active = false;
     };
-  }, [open, items.length, isLoading]);
+  }, [open, items.length, isLoading, locale]);
 
   useEffect(() => {
     if (!open) return;

frontend/components/quiz/QuizContainer.tsx

@@ -1,5 +1,10 @@
 'use client';
+<<<<<<< HEAD
+
+import { AlertTriangle, Ban, Clock, FileText } from 'lucide-react';
+=======
 import { Ban, Clock, FileText, TriangleAlert } from 'lucide-react';
+>>>>>>> develop
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useLocale, useTranslations } from 'next-intl';
 import {

frontend/components/tests/blog/blog-card.test.tsx

@@ -7,7 +7,8 @@ import type { Author, Post } from '@/components/blog/BlogFilters';
 
 vi.mock('next/image', () => ({
   __esModule: true,
-  default: (props: any) => <img {...props} />,
+  // eslint-disable-next-line @next/next/no-img-element
+  default: (props: any) => <img alt={props.alt ?? ''} {...props} />,
 }));
 
 vi.mock('next/link', () => ({

frontend/components/tests/blog/blog-filters.test.tsx

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 import { render, screen, waitFor } from '@testing-library/react';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import type { Author, Post } from '@/components/blog/BlogFilters';
 import BlogFilters from '@/components/blog/BlogFilters';

frontend/components/tests/blog/blog-header-search.test.tsx

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import { BlogHeaderSearch } from '@/components/blog/BlogHeaderSearch';
 

frontend/lib/tests/quiz/quiz-crypto.test.ts

@@ -0,0 +1,162 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import {
+  createEncryptedAnswersBlob,
+  decryptAnswers,
+  encryptAnswers,
+} from '@/lib/quiz/quiz-crypto';
+
+import {
+  createCorrectAnswersMap,
+  createMockQuestions,
+  resetFactoryCounters,
+} from '../factories/quiz/quiz';
+import { cleanupQuizTestEnv, setupQuizTestEnv } from './setup';
+
+describe('quiz-crypto', () => {
+  // Setup: set encryption key before each test
+  beforeEach(() => {
+    setupQuizTestEnv();
+    resetFactoryCounters();
+  });
+
+  // Cleanup: remove encryption key after each test
+  afterEach(() => {
+    cleanupQuizTestEnv();
+  });
+
+  describe('encryptAnswers', () => {
+    it('returns a base64 string', () => {
+      const answers = { 'q-1': 'a-1' };
+
+      const result = encryptAnswers(answers);
+
+      // Base64 pattern: letters, numbers, +, /, ends with optional =
+      expect(result).toMatch(/^[A-Za-z0-9+/]+=*$/);
+    });
+
+    it('returns different output for same input (random IV)', () => {
+      const answers = { 'q-1': 'a-1' };
+
+      const result1 = encryptAnswers(answers);
+      const result2 = encryptAnswers(answers);
+
+      // Each encryption uses random IV, so outputs differ
+      expect(result1).not.toBe(result2);
+    });
+
+    it('handles empty object', () => {
+      const result = encryptAnswers({});
+
+      expect(result).toBeDefined();
+      expect(typeof result).toBe('string');
+    });
+
+    it('handles multiple questions', () => {
+      const answers = {
+        'q-1': 'a-1',
+        'q-2': 'a-2',
+        'q-3': 'a-3',
+      };
+
+      const result = encryptAnswers(answers);
+
+      expect(result).toBeDefined();
+      expect(result.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('decryptAnswers', () => {
+    it('decrypts back to original data', () => {
+      const original = { 'q-1': 'a-1', 'q-2': 'a-2' };
+
+      const encrypted = encryptAnswers(original);
+      const decrypted = decryptAnswers(encrypted);
+
+      expect(decrypted).toEqual(original);
+    });
+
+    it('returns null for tampered data', () => {
+      const original = { 'q-1': 'a-1' };
+      const encrypted = encryptAnswers(original);
+
+      // Tamper: change last 5 characters
+      const tampered = encrypted.slice(0, -5) + 'XXXXX';
+
+      const result = decryptAnswers(tampered);
+
+      expect(result).toBeNull();
+    });
+
+    it('returns null for invalid base64', () => {
+      const result = decryptAnswers('not-valid-base64!!!');
+
+      expect(result).toBeNull();
+    });
+
+    it('returns null for empty string', () => {
+      const result = decryptAnswers('');
+
+      expect(result).toBeNull();
+    });
+
+    it('returns null for truncated data', () => {
+      const original = { 'q-1': 'a-1' };
+      const encrypted = encryptAnswers(original);
+
+      // Truncate: remove half of the data
+      const truncated = encrypted.slice(0, encrypted.length / 2);
+
+      const result = decryptAnswers(truncated);
+
+      expect(result).toBeNull();
+    });
+  });
+
+  describe('createEncryptedAnswersBlob', () => {
+    it('creates encrypted blob from questions', () => {
+      const questions = createMockQuestions(3);
+
+      const blob = createEncryptedAnswersBlob(questions);
+
+      expect(blob).toBeDefined();
+      expect(typeof blob).toBe('string');
+      expect(blob.length).toBeGreaterThan(0);
+    });
+
+    it('encrypted blob decrypts to correct answers map', () => {
+      const questions = createMockQuestions(3);
+      const expectedMap = createCorrectAnswersMap(questions);
+
+      const blob = createEncryptedAnswersBlob(questions);
+      const decrypted = decryptAnswers(blob);
+
+      expect(decrypted).toEqual(expectedMap);
+    });
+
+    it('handles questions with no correct answer', () => {
+      const questions = [
+        {
+          id: 'q-no-correct',
+          answers: [
+            { id: 'a-1', isCorrect: false },
+            { id: 'a-2', isCorrect: false },
+          ],
+        },
+      ];
+
+      const blob = createEncryptedAnswersBlob(questions);
+      const decrypted = decryptAnswers(blob);
+
+      // Question with no correct answer is not included in map
+      expect(decrypted).toEqual({});
+    });
+
+    it('handles empty questions array', () => {
+      const blob = createEncryptedAnswersBlob([]);
+      const decrypted = decryptAnswers(blob);
+
+      expect(decrypted).toEqual({});
+    });
+  });
+});

frontend/lib/tests/quiz/setup.ts

@@ -1,3 +1,8 @@
+<<<<<<< HEAD
+import { afterEach, beforeEach, vi } from 'vitest';
+
+=======
+>>>>>>> develop
 /**
  * 32-byte hex key for AES-256 (64 hex characters)
  * Only used in tests — not a real secret

frontend/lib/tests/quiz/verify-answer.test.ts

@@ -1,8 +1,20 @@
 import { NextRequest } from 'next/server';
+<<<<<<< HEAD
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+=======
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+>>>>>>> develop
 
 import { POST } from '@/app/api/quiz/verify-answer/route';
 
+<<<<<<< HEAD
+import {
+  createCorrectAnswersMap,
+  createMockQuestions,
+  resetFactoryCounters,
+} from '../factories/quiz/quiz';
+import { cleanupQuizTestEnv, setupQuizTestEnv } from './setup';
+=======
 // Mock the Redis module
 vi.mock('@/lib/quiz/quiz-answers-redis', () => ({
   getCorrectAnswer: vi.fn(),
@@ -11,6 +23,7 @@ vi.mock('@/lib/quiz/quiz-answers-redis', () => ({
 import { getCorrectAnswer } from '@/lib/quiz/quiz-answers-redis';
 
 const mockGetCorrectAnswer = vi.mocked(getCorrectAnswer);
+>>>>>>> develop
 
 function createVerifyRequest(body: unknown): NextRequest {
   return new NextRequest('http://localhost/api/quiz/verify-answer', {