99 lines
3.2 KiB
JavaScript
99 lines
3.2 KiB
JavaScript
import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
|
|
import { SUPPORTED_LANGUAGES, DEFAULT_LANGUAGE } from './languages.js';
|
|
|
|
const LANGUAGE_KEY = 'whowhat_language';
|
|
const SUPPORTED_CODES = SUPPORTED_LANGUAGES.map((l) => l.code);
|
|
|
|
// Every locales/<lang>/<namespace>.json file is bundled here at build time and merged
|
|
// into one dictionary per language, keyed by namespace (the filename without extension).
|
|
const modules = import.meta.glob('./locales/*/*.json', { eager: true });
|
|
|
|
function buildDictionaries() {
|
|
const dictionaries = {};
|
|
for (const path in modules) {
|
|
const match = path.match(/\.\/locales\/([^/]+)\/([^/]+)\.json$/);
|
|
if (!match) continue;
|
|
const [, lang, namespace] = match;
|
|
dictionaries[lang] = dictionaries[lang] || {};
|
|
dictionaries[lang][namespace] = modules[path].default;
|
|
}
|
|
return dictionaries;
|
|
}
|
|
|
|
const DICTIONARIES = buildDictionaries();
|
|
|
|
function resolve(dictionary, key) {
|
|
const [namespace, ...rest] = key.split('.');
|
|
let node = dictionary?.[namespace];
|
|
for (const part of rest) {
|
|
if (node == null) return undefined;
|
|
node = node[part];
|
|
}
|
|
return typeof node === 'string' ? node : undefined;
|
|
}
|
|
|
|
function interpolate(template, params) {
|
|
if (!params) return template;
|
|
return template.replace(/\{\{(\w+)\}\}/g, (match, name) => (name in params ? String(params[name]) : match));
|
|
}
|
|
|
|
function detectInitialLanguage() {
|
|
const stored = localStorage.getItem(LANGUAGE_KEY);
|
|
if (stored && SUPPORTED_CODES.includes(stored)) return stored;
|
|
const browserLang = (navigator.language || '').slice(0, 2).toLowerCase();
|
|
if (SUPPORTED_CODES.includes(browserLang)) return browserLang;
|
|
return DEFAULT_LANGUAGE;
|
|
}
|
|
|
|
const I18nContext = createContext(null);
|
|
|
|
export function I18nProvider({ children }) {
|
|
const [language, setLanguageState] = useState(detectInitialLanguage);
|
|
|
|
useEffect(() => {
|
|
document.documentElement.setAttribute('lang', language);
|
|
}, [language]);
|
|
|
|
const setLanguage = useCallback((lang) => {
|
|
if (!SUPPORTED_CODES.includes(lang)) return;
|
|
localStorage.setItem(LANGUAGE_KEY, lang);
|
|
setLanguageState(lang);
|
|
}, []);
|
|
|
|
const t = useCallback(
|
|
(key, params) => {
|
|
const value =
|
|
resolve(DICTIONARIES[language], key) ??
|
|
resolve(DICTIONARIES[DEFAULT_LANGUAGE], key) ??
|
|
resolve(DICTIONARIES.en, key);
|
|
if (value === undefined) return key;
|
|
return interpolate(value, params);
|
|
},
|
|
[language]
|
|
);
|
|
|
|
// Translates an error code coming from the API (ApiError#message). Falls back to the
|
|
// raw code (or a generic message) if the backend ever sends something not in errors.json.
|
|
const tError = useCallback(
|
|
(err) => {
|
|
const code = err?.message;
|
|
if (!code) return t('errors.generic');
|
|
return resolve(DICTIONARIES[language], `errors.${code}`) ?? code;
|
|
},
|
|
[language, t]
|
|
);
|
|
|
|
const value = useMemo(
|
|
() => ({ language, setLanguage, languages: SUPPORTED_LANGUAGES, t, tError }),
|
|
[language, setLanguage, t, tError]
|
|
);
|
|
|
|
return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>;
|
|
}
|
|
|
|
export function useTranslation() {
|
|
const ctx = useContext(I18nContext);
|
|
if (!ctx) throw new Error('useTranslation must be used within I18nProvider');
|
|
return ctx;
|
|
}
|