2021-06-25 17:52:49 +03:00
|
|
|
import { useEffect, useState } from 'react'
|
2021-05-26 23:34:52 +03:00
|
|
|
import { i18n } from '@lingui/core'
|
|
|
|
import { I18nProvider } from '@lingui/react'
|
2021-05-28 19:03:53 +03:00
|
|
|
import { ReactNode } from 'react'
|
2021-09-14 20:17:56 +03:00
|
|
|
import { initialLocale, useActiveLocale } from 'hooks/useActiveLocale'
|
2021-05-29 03:36:37 +03:00
|
|
|
import { SupportedLocale } from 'constants/locales'
|
2021-06-03 02:01:16 +03:00
|
|
|
import {
|
|
|
|
af,
|
|
|
|
ar,
|
|
|
|
ca,
|
|
|
|
cs,
|
|
|
|
da,
|
|
|
|
de,
|
|
|
|
el,
|
|
|
|
en,
|
|
|
|
es,
|
|
|
|
fi,
|
|
|
|
fr,
|
|
|
|
he,
|
|
|
|
hu,
|
|
|
|
id,
|
|
|
|
it,
|
|
|
|
ja,
|
|
|
|
ko,
|
|
|
|
nl,
|
|
|
|
no,
|
|
|
|
pl,
|
|
|
|
pt,
|
|
|
|
ro,
|
|
|
|
ru,
|
|
|
|
sr,
|
|
|
|
sv,
|
|
|
|
tr,
|
|
|
|
uk,
|
|
|
|
vi,
|
|
|
|
zh,
|
|
|
|
PluralCategory,
|
|
|
|
} from 'make-plural/plurals'
|
2021-09-14 20:17:56 +03:00
|
|
|
import { useUserLocaleManager } from 'state/user/hooks'
|
2021-06-03 02:01:16 +03:00
|
|
|
|
|
|
|
type LocalePlural = {
|
|
|
|
[key in SupportedLocale]: (n: number | string, ord?: boolean) => PluralCategory
|
|
|
|
}
|
|
|
|
|
|
|
|
const plurals: LocalePlural = {
|
|
|
|
'af-ZA': af,
|
|
|
|
'ar-SA': ar,
|
|
|
|
'ca-ES': ca,
|
|
|
|
'cs-CZ': cs,
|
|
|
|
'da-DK': da,
|
|
|
|
'de-DE': de,
|
|
|
|
'el-GR': el,
|
|
|
|
'en-US': en,
|
|
|
|
'es-ES': es,
|
|
|
|
'fi-FI': fi,
|
|
|
|
'fr-FR': fr,
|
|
|
|
'he-IL': he,
|
|
|
|
'hu-HU': hu,
|
|
|
|
'id-ID': id,
|
|
|
|
'it-IT': it,
|
|
|
|
'ja-JP': ja,
|
|
|
|
'ko-KR': ko,
|
|
|
|
'nl-NL': nl,
|
|
|
|
'no-NO': no,
|
|
|
|
'pl-PL': pl,
|
|
|
|
'pt-BR': pt,
|
|
|
|
'pt-PT': pt,
|
|
|
|
'ro-RO': ro,
|
|
|
|
'ru-RU': ru,
|
|
|
|
'sr-SP': sr,
|
|
|
|
'sv-SE': sv,
|
|
|
|
'tr-TR': tr,
|
|
|
|
'uk-UA': uk,
|
|
|
|
'vi-VN': vi,
|
|
|
|
'zh-CN': zh,
|
|
|
|
'zh-TW': zh,
|
|
|
|
}
|
2021-05-26 23:34:52 +03:00
|
|
|
|
2021-07-07 00:08:40 +03:00
|
|
|
async function dynamicActivate(locale: SupportedLocale) {
|
2021-05-29 07:04:37 +03:00
|
|
|
const { messages } = await import(`@lingui/loader!./locales/${locale}.po`)
|
2021-06-03 02:01:16 +03:00
|
|
|
i18n.loadLocaleData(locale, { plurals: () => plurals[locale] })
|
2021-05-29 07:04:37 +03:00
|
|
|
i18n.load(locale, messages)
|
|
|
|
i18n.activate(locale)
|
2021-05-26 23:34:52 +03:00
|
|
|
}
|
|
|
|
|
2021-09-14 20:17:56 +03:00
|
|
|
dynamicActivate(initialLocale)
|
|
|
|
|
2021-05-26 23:34:52 +03:00
|
|
|
export function LanguageProvider({ children }: { children: ReactNode }) {
|
2021-05-29 03:36:37 +03:00
|
|
|
const locale = useActiveLocale()
|
2021-09-14 20:17:56 +03:00
|
|
|
const [, setUserLocale] = useUserLocaleManager()
|
2021-06-01 05:36:56 +03:00
|
|
|
const [loaded, setLoaded] = useState(false)
|
2021-05-28 19:03:53 +03:00
|
|
|
|
2021-05-26 23:34:52 +03:00
|
|
|
useEffect(() => {
|
2021-06-01 05:36:56 +03:00
|
|
|
dynamicActivate(locale)
|
|
|
|
.then(() => {
|
2021-08-17 01:30:52 +03:00
|
|
|
document.documentElement.setAttribute('lang', locale)
|
2021-09-14 20:17:56 +03:00
|
|
|
setUserLocale(locale) // stores the selected locale to persist across sessions
|
2021-06-01 05:36:56 +03:00
|
|
|
setLoaded(true)
|
|
|
|
})
|
|
|
|
.catch((error) => {
|
|
|
|
console.error('Failed to activate locale', locale, error)
|
|
|
|
})
|
2021-09-14 20:17:56 +03:00
|
|
|
}, [locale, setUserLocale])
|
2021-05-26 23:34:52 +03:00
|
|
|
|
2021-06-01 05:36:56 +03:00
|
|
|
// prevent the app from rendering with placeholder text before the locale is loaded
|
|
|
|
if (!loaded) return null
|
|
|
|
|
2021-05-29 08:07:42 +03:00
|
|
|
return (
|
|
|
|
<I18nProvider forceRenderOnLocaleChange={false} i18n={i18n}>
|
|
|
|
{children}
|
|
|
|
</I18nProvider>
|
|
|
|
)
|
2021-05-26 23:34:52 +03:00
|
|
|
}
|