135 lines
4.0 KiB
TypeScript
135 lines
4.0 KiB
TypeScript
import { ExternalStore } from "@snort/shared";
|
|
import { type ReactNode, useEffect, useState, useSyncExternalStore } from "react";
|
|
import { IntlProvider as ReactIntlProvider } from "react-intl";
|
|
|
|
import useLogin from "@/Hooks/useLogin";
|
|
import enMessages from "@/translations/en.json";
|
|
|
|
const DefaultLocale = "en-US";
|
|
|
|
const getMessages = (locale: string) => {
|
|
const truncatedLocale = locale.toLowerCase().split(/[_-]+/)[0];
|
|
|
|
const matchLang = async (lng: string) => {
|
|
switch (lng) {
|
|
case "es-ES":
|
|
case "es":
|
|
return (await import("@/translations/es_ES.json")).default;
|
|
case "zh-CN":
|
|
case "zh-Hans-CN":
|
|
case "zh":
|
|
return (await import("@/translations/zh_CN.json")).default;
|
|
case "zh-TW":
|
|
return (await import("@/translations/zh_TW.json")).default;
|
|
case "ja-JP":
|
|
case "ja":
|
|
return (await import("@/translations/ja_JP.json")).default;
|
|
case "fr-FR":
|
|
case "fr":
|
|
return (await import("@/translations/fr_FR.json")).default;
|
|
case "hu-HU":
|
|
case "hu":
|
|
return (await import("@/translations/hu_HU.json")).default;
|
|
case "id-ID":
|
|
case "id":
|
|
return (await import("@/translations/id_ID.json")).default;
|
|
case "ar-SA":
|
|
case "ar":
|
|
return (await import("@/translations/ar_SA.json")).default;
|
|
case "it-IT":
|
|
case "it":
|
|
return (await import("@/translations/it_IT.json")).default;
|
|
case "de-DE":
|
|
case "de":
|
|
return (await import("@/translations/de_DE.json")).default;
|
|
case "ru-RU":
|
|
case "ru":
|
|
return (await import("@/translations/ru_RU.json")).default;
|
|
case "sv-SE":
|
|
case "sv":
|
|
return (await import("@/translations/sv_SE.json")).default;
|
|
case "hr-HR":
|
|
case "hr":
|
|
return (await import("@/translations/hr_HR.json")).default;
|
|
case "ta-IN":
|
|
case "ta":
|
|
return (await import("@/translations/ta_IN.json")).default;
|
|
case "fa-IR":
|
|
case "fa":
|
|
return (await import("@/translations/fa_IR.json")).default;
|
|
case "th-TH":
|
|
case "th":
|
|
return (await import("@/translations/th_TH.json")).default;
|
|
case "pt-BR":
|
|
case "pt":
|
|
return (await import("@/translations/pt_BR.json")).default;
|
|
case "sw-KE":
|
|
case "sw":
|
|
return (await import("@/translations/sw_KE.json")).default;
|
|
case "nl-NL":
|
|
case "nl":
|
|
return (await import("@/translations/nl_NL.json")).default;
|
|
case "fi-FI":
|
|
case "fi":
|
|
return (await import("@/translations/fi_FI.json")).default;
|
|
case DefaultLocale:
|
|
case "en":
|
|
return enMessages;
|
|
}
|
|
};
|
|
|
|
return matchLang(locale) ?? matchLang(truncatedLocale) ?? Promise.resolve(enMessages);
|
|
};
|
|
|
|
class LangStore extends ExternalStore<string | null> {
|
|
setLang(s: string) {
|
|
localStorage.setItem("lang", s);
|
|
this.notifyChange();
|
|
}
|
|
|
|
takeSnapshot() {
|
|
return localStorage.getItem("lang");
|
|
}
|
|
}
|
|
|
|
const LangOverride = new LangStore();
|
|
|
|
export function useLocale() {
|
|
const { language } = useLogin(s => ({ language: s.appData.item.preferences.language }));
|
|
const loggedOutLang = useSyncExternalStore(
|
|
c => LangOverride.hook(c),
|
|
() => LangOverride.snapshot(),
|
|
);
|
|
const locale = language ?? loggedOutLang ?? getLocale();
|
|
return {
|
|
locale,
|
|
lang: locale.toLowerCase().split(/[_-]+/)[0],
|
|
setOverride: (s: string) => LangOverride.setLang(s),
|
|
};
|
|
}
|
|
|
|
export const IntlProvider = ({ children }: { children: ReactNode }) => {
|
|
const { locale } = useLocale();
|
|
const [messages, setMessages] = useState<Record<string, string>>(enMessages);
|
|
|
|
useEffect(() => {
|
|
getMessages(locale)
|
|
.then(x => {
|
|
if (x) {
|
|
setMessages(x);
|
|
}
|
|
})
|
|
.catch(console.error);
|
|
}, [locale]);
|
|
|
|
return (
|
|
<ReactIntlProvider locale={locale} messages={messages}>
|
|
{children}
|
|
</ReactIntlProvider>
|
|
);
|
|
};
|
|
|
|
export const getLocale = () => {
|
|
return (navigator.languages && navigator.languages[0]) ?? navigator.language ?? DefaultLocale;
|
|
};
|