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:
@@ -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'
|
||||
|
||||
Reference in New Issue
Block a user