114 lines
4.0 KiB
TypeScript
114 lines
4.0 KiB
TypeScript
'use client'
|
|
|
|
import { createContext, useContext, useEffect, useState, useCallback, useRef } from 'react'
|
|
import type { ReactNode } from 'react'
|
|
import { SupportedLanguage, loadTranslations, getTranslationValue, Translations } from './load-translations'
|
|
|
|
// Static imports for SSR-safe initial translations (prevents hydration mismatch)
|
|
import enTranslations from '@/locales/en.json'
|
|
|
|
type LanguageContextType = {
|
|
language: SupportedLanguage
|
|
setLanguage: (lang: SupportedLanguage) => void
|
|
t: (key: string, params?: Record<string, string | number>) => string
|
|
translations: Translations
|
|
}
|
|
|
|
const LanguageContext = createContext<LanguageContextType | undefined>(undefined)
|
|
|
|
const RTL_LANGUAGES: SupportedLanguage[] = ['ar', 'fa']
|
|
const SUPPORTED_LANGS: SupportedLanguage[] = ['en', 'fr', 'es', 'de', 'fa', 'it', 'pt', 'ru', 'zh', 'ja', 'ko', 'ar', 'hi', 'nl', 'pl']
|
|
|
|
function updateDocumentDirection(lang: SupportedLanguage) {
|
|
document.documentElement.lang = lang
|
|
document.documentElement.dir = RTL_LANGUAGES.includes(lang) ? 'rtl' : 'ltr'
|
|
}
|
|
|
|
/**
|
|
* Resolve the actual language to use:
|
|
* 1. If localStorage has a saved preference, use that (client only)
|
|
* 2. Otherwise fall back to the server-detected initialLanguage
|
|
*/
|
|
function resolveLanguage(fallback: SupportedLanguage): SupportedLanguage {
|
|
if (typeof window !== 'undefined') {
|
|
try {
|
|
const saved = localStorage.getItem('user-language') as SupportedLanguage
|
|
if (saved && SUPPORTED_LANGS.includes(saved)) return saved
|
|
} catch {}
|
|
}
|
|
return fallback
|
|
}
|
|
|
|
export function LanguageProvider({ children, initialLanguage = 'en', initialTranslations }: {
|
|
children: ReactNode
|
|
initialLanguage?: SupportedLanguage
|
|
initialTranslations?: Translations
|
|
}) {
|
|
// Resolve language synchronously from localStorage BEFORE any effect runs.
|
|
// This prevents the flash where initialLanguage ('en') overrides RTL.
|
|
const [language, setLanguageState] = useState<SupportedLanguage>(() => resolveLanguage(initialLanguage))
|
|
|
|
// Start with server-provided translations or English fallback
|
|
const [translations, setTranslations] = useState<Translations>(
|
|
(initialTranslations || enTranslations) as unknown as Translations
|
|
)
|
|
const cacheRef = useRef<Map<SupportedLanguage, Translations>>(new Map())
|
|
const isFirstRender = useRef(true)
|
|
|
|
// Load translations when language changes (with caching)
|
|
// On first render, skip updateDocumentDirection since the inline script already set it.
|
|
useEffect(() => {
|
|
const cached = cacheRef.current.get(language)
|
|
if (cached) {
|
|
setTranslations(cached)
|
|
if (!isFirstRender.current) updateDocumentDirection(language)
|
|
isFirstRender.current = false
|
|
return
|
|
}
|
|
|
|
const loadLang = async () => {
|
|
const loaded = await loadTranslations(language)
|
|
cacheRef.current.set(language, loaded)
|
|
setTranslations(loaded)
|
|
if (!isFirstRender.current) updateDocumentDirection(language)
|
|
isFirstRender.current = false
|
|
}
|
|
loadLang()
|
|
}, [language])
|
|
|
|
const setLanguage = useCallback((lang: SupportedLanguage) => {
|
|
setLanguageState(lang)
|
|
localStorage.setItem('user-language', lang)
|
|
updateDocumentDirection(lang)
|
|
}, [])
|
|
|
|
const t = useCallback((key: string, params?: Record<string, string | number>) => {
|
|
if (!translations) return key
|
|
|
|
let value: any = getTranslationValue(translations, key)
|
|
|
|
// Replace parameters like {count}, {percentage}, etc.
|
|
if (params && typeof value === 'string') {
|
|
Object.entries(params).forEach(([param, paramValue]) => {
|
|
value = value.replace(`{${param}}`, String(paramValue))
|
|
})
|
|
}
|
|
|
|
return typeof value === 'string' ? value : key
|
|
}, [translations])
|
|
|
|
return (
|
|
<LanguageContext.Provider value={{ language, setLanguage, t, translations }}>
|
|
{children}
|
|
</LanguageContext.Provider>
|
|
)
|
|
}
|
|
|
|
export function useLanguage() {
|
|
const context = useContext(LanguageContext)
|
|
if (context === undefined) {
|
|
throw new Error('useLanguage must be used within a LanguageProvider')
|
|
}
|
|
return context
|
|
}
|