Fix: Language switch takes effect immediately (React Context)

Replaced localStorage-only hook with React Context Provider.
Layout and page components now share the same state — switching
language in the dropdown instantly updates all text on screen
without requiring a page reload.

NativeLanguageProvider added to root layout.tsx.
useNativeLanguage() re-exported from Context for backward compat.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
2026-04-27 14:45:53 +02:00
parent 5012699aaf
commit 9f21bd070a
3 changed files with 67 additions and 43 deletions

View File

@@ -1,44 +1,4 @@
'use client'
import { useState, useEffect, useCallback } from 'react'
import { exerciseT, type ExerciseKey } from './exerciseTranslations'
const STORAGE_KEY = 'bp_native_language'
/**
* Hook for native language state + translations.
* Persists to localStorage. Can be changed at any time (e.g. parent switches language).
*/
export function useNativeLanguage() {
const [nativeLang, setNativeLangState] = useState('de')
useEffect(() => {
const stored = localStorage.getItem(STORAGE_KEY)
if (stored) setNativeLangState(stored)
}, [])
/** Change native language (persists to localStorage) */
const setNativeLang = useCallback((lang: string) => {
setNativeLangState(lang)
localStorage.setItem(STORAGE_KEY, lang)
}, [])
const isThirdLanguage = nativeLang !== 'de' && nativeLang !== 'en'
/** Get translated exercise UI text */
const t = (key: ExerciseKey): string => {
const entry = exerciseT[key]
if (!entry) return key
return (entry as Record<string, string>)[nativeLang] || entry.de || key
}
/** Get native translation of a vocab word from translations JSONB */
const wordInNative = (translations?: Record<string, any>): string => {
if (!translations || !isThirdLanguage) return ''
const entry = translations[nativeLang]
if (!entry) return ''
return typeof entry === 'string' ? entry : entry.text || ''
}
return { nativeLang, setNativeLang, isThirdLanguage, t, wordInNative }
}
// Re-export from Context so all existing imports keep working
export { useNativeLanguage } from './NativeLanguageContext'