cesnimda
67 lines
2.5 KiB
TypeScript
67 lines
2.5 KiB
TypeScript
import React, { createContext, useCallback, useContext, useEffect, useState } from "react";
|
|
import { translations, TranslationKey, UiLanguage } from "./translations";
|
|
import { api } from "../api";
|
|
|
|
type TranslationParams = Record<string, string | number>;
|
|
|
|
type Ctx = {
|
|
language: UiLanguage;
|
|
setLanguage: (l: UiLanguage) => void;
|
|
hydrateLanguage: (language?: string | null) => void;
|
|
t: (key: TranslationKey, params?: TranslationParams) => string;
|
|
};
|
|
|
|
const I18nContext = createContext<Ctx | null>(null);
|
|
|
|
function interpolate(template: string, params?: TranslationParams) {
|
|
if (!params) return template;
|
|
return template.replace(/\{(\w+)\}/g, (_, key) => String(params[key] ?? `{${key}}`));
|
|
}
|
|
|
|
export function I18nProvider({ children }: { children: React.ReactNode }) {
|
|
const [language, setLanguageState] = useState<UiLanguage>(() => {
|
|
const raw = window.localStorage.getItem("uiLanguage");
|
|
return raw === "nb" || raw === "nb-NO" || raw === "no" ? "nb" : "en";
|
|
});
|
|
|
|
const applyLanguage = useCallback((l: UiLanguage) => {
|
|
setLanguageState(l);
|
|
window.localStorage.setItem("uiLanguage", l);
|
|
document.documentElement.lang = l === "nb" ? "nb-NO" : "en";
|
|
}, []);
|
|
|
|
const setLanguage = (l: UiLanguage) => {
|
|
applyLanguage(l);
|
|
void api.put("/auth/preferences/language", { language: l === "nb" ? "nb-NO" : "en" }).catch(() => undefined);
|
|
};
|
|
|
|
const hydrateLanguage = useCallback((value?: string | null) => {
|
|
if (!value) return;
|
|
applyLanguage(value === "nb" || value === "nb-NO" || value === "no" ? "nb" : "en");
|
|
}, [applyLanguage]);
|
|
|
|
useEffect(() => {
|
|
document.documentElement.lang = language === "nb" ? "nb-NO" : "en";
|
|
const onStorage = (event: StorageEvent) => {
|
|
if (event.key !== "uiLanguage") return;
|
|
applyLanguage(event.newValue === "nb" || event.newValue === "nb-NO" || event.newValue === "no" ? "nb" : "en");
|
|
};
|
|
window.addEventListener("storage", onStorage);
|
|
return () => window.removeEventListener("storage", onStorage);
|
|
}, [applyLanguage, language]);
|
|
|
|
const t = (key: TranslationKey, params?: TranslationParams) => interpolate(translations[language][key] ?? translations.en[key], params);
|
|
|
|
return <I18nContext.Provider value={{ language, setLanguage, hydrateLanguage, t }}>{children}</I18nContext.Provider>;
|
|
}
|
|
|
|
export function useI18n() {
|
|
const ctx = useContext(I18nContext);
|
|
if (!ctx) throw new Error("useI18n must be used within I18nProvider");
|
|
return ctx;
|
|
}
|
|
|
|
export function useOptionalI18n() {
|
|
return useContext(I18nContext);
|
|
}
|