48 lines
1.6 KiB
TypeScript

import { useEffect, useState } from 'react'
import { setLocale, getLocale, loadTranslations, t, type Locale } from '@/lib/i18n'
export function useI18n(locale: Locale = 'fr') {
const [loaded, setLoaded] = useState(false)
const [currentLocale, setCurrentLocale] = useState<Locale>(getLocale())
useEffect(() => {
const load = async () => {
try {
// Get saved locale from IndexedDB or use provided locale
let savedLocale: Locale | null = null
try {
const { storageService } = await import('@/lib/storage/indexedDB')
savedLocale = await storageService.get<Locale>('zapwall-locale', 'app_storage')
} catch {
// Fallback to provided locale
}
const initialLocale = savedLocale && (savedLocale === 'fr' || savedLocale === 'en') ? savedLocale : locale
// Load translations from files in public directory
const frResponse = await fetch('/locales/fr.txt')
const enResponse = await fetch('/locales/en.txt')
if (frResponse.ok) {
const frText = await frResponse.text()
await loadTranslations('fr', frText)
}
if (enResponse.ok) {
const enText = await enResponse.text()
await loadTranslations('en', enText)
}
setLocale(initialLocale)
setCurrentLocale(initialLocale)
setLoaded(true)
} catch (e) {
console.error('Error loading translations:', e)
setLoaded(true) // Continue even if translations fail to load
}
}
void load()
}, [locale])
return { loaded, locale: currentLocale, t }
}