Import locale messages dynamically

This commit is contained in:
Alex Gleason 2020-06-04 21:22:58 -05:00
parent 0d76b761ac
commit 956fa99ee1
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
3 changed files with 90 additions and 64 deletions

View file

@ -69,9 +69,35 @@ class SoapboxMount extends React.PureComponent {
dispatch: PropTypes.func,
};
state = {
messages: {},
localeLoading: true,
}
setMessages = () => {
messages[this.props.locale]().then(messages => {
this.setState({ messages, localeLoading: false });
}).catch(() => {});
}
maybeUpdateMessages = prevProps => {
if (this.props.locale !== prevProps.locale) {
this.setMessages();
};
}
componentDidMount() {
this.setMessages();
}
componentDidUpdate(prevProps) {
this.maybeUpdateMessages(prevProps);
}
render() {
const { me, themeCss, locale } = this.props;
if (me === null) return null;
if (this.state.localeLoading) return null;
// Disabling introduction for launch
// const { showIntroduction } = this.props;
@ -88,7 +114,7 @@ class SoapboxMount extends React.PureComponent {
});
return (
<IntlProvider locale={locale} messages={messages[locale]}>
<IntlProvider locale={locale} messages={this.state.messages}>
<>
<Helmet>
<body className={bodyClass} />

View file

@ -125,7 +125,7 @@ class Preferences extends ImmutablePureComponent {
<SelectDropdown
label='Language'
items={languages}
defaultValue={settings.get('language')}
defaultValue={settings.get('locale')}
onChange={this.onSelectChange(['locale'])}
/>
</FieldsGroup>

View file

@ -1,64 +1,64 @@
export default {
'ar': require('./ar.json'),
'ast': require('./ast.json'),
'bg': require('./bg.json'),
'bn': require('./bn.json'),
'br': require('./br.json'),
'ca': require('./ca.json'),
'co': require('./co.json'),
'cs': require('./cs.json'),
'cy': require('./cy.json'),
'da': require('./da.json'),
'de': require('./de.json'),
'el': require('./el.json'),
'en': require('./en.json'),
'eo': require('./eo.json'),
'es-AR': require('./es-AR.json'),
'es': require('./es.json'),
'et': require('./et.json'),
'eu': require('./eu.json'),
'fa': require('./fa.json'),
'fi': require('./fi.json'),
'fr': require('./fr.json'),
'ga': require('./ga.json'),
'gl': require('./gl.json'),
'he': require('./he.json'),
'hi': require('./hi.json'),
'hr': require('./hr.json'),
'hu': require('./hu.json'),
'hy': require('./hy.json'),
'id': require('./id.json'),
'io': require('./io.json'),
'it': require('./it.json'),
'ja': require('./ja.json'),
'ka': require('./ka.json'),
'kk': require('./kk.json'),
'ko': require('./ko.json'),
'lt': require('./lt.json'),
'lv': require('./lv.json'),
'mk': require('./mk.json'),
'ms': require('./ms.json'),
'nl': require('./nl.json'),
'nn': require('./nn.json'),
'no': require('./no.json'),
'oc': require('./oc.json'),
'pl': require('./pl.json'),
'pt-BR': require('./pt-BR.json'),
'pt': require('./pt.json'),
'ro': require('./ro.json'),
'ru': require('./ru.json'),
'sk': require('./sk.json'),
'sl': require('./sl.json'),
'sq': require('./sq.json'),
'sr': require('./sr.json'),
'sr-Latn': require('./sr-Latn.json'),
'sv': require('./sv.json'),
'ta': require('./ta.json'),
'te': require('./te.json'),
'th': require('./th.json'),
'tr': require('./tr.json'),
'uk': require('./uk.json'),
'zh-CN': require('./zh-CN.json'),
'zh-HK': require('./zh-HK.json'),
'zh-TW': require('./zh-TW.json'),
'ar': () => import(/* webpackChunkName: "locale_ar" */'./ar.json'),
'ast': () => import(/* webpackChunkName: "locale_ast" */'./ast.json'),
'bg': () => import(/* webpackChunkName: "locale_bg" */'./bg.json'),
'bn': () => import(/* webpackChunkName: "locale_bn" */'./bn.json'),
'br': () => import(/* webpackChunkName: "locale_br" */'./br.json'),
'ca': () => import(/* webpackChunkName: "locale_ca" */'./ca.json'),
'co': () => import(/* webpackChunkName: "locale_co" */'./co.json'),
'cs': () => import(/* webpackChunkName: "locale_cs" */'./cs.json'),
'cy': () => import(/* webpackChunkName: "locale_cy" */'./cy.json'),
'da': () => import(/* webpackChunkName: "locale_da" */'./da.json'),
'de': () => import(/* webpackChunkName: "locale_de" */'./de.json'),
'el': () => import(/* webpackChunkName: "locale_el" */'./el.json'),
'en': () => import(/* webpackChunkName: "locale_en" */'./en.json'),
'eo': () => import(/* webpackChunkName: "locale_eo" */'./eo.json'),
'es-AR': () => import(/* webpackChunkName: "locale_es-AR" */'./es-AR.json'),
'es': () => import(/* webpackChunkName: "locale_es" */'./es.json'),
'et': () => import(/* webpackChunkName: "locale_et" */'./et.json'),
'eu': () => import(/* webpackChunkName: "locale_eu" */'./eu.json'),
'fa': () => import(/* webpackChunkName: "locale_fa" */'./fa.json'),
'fi': () => import(/* webpackChunkName: "locale_fi" */'./fi.json'),
'fr': () => import(/* webpackChunkName: "locale_fr" */'./fr.json'),
'ga': () => import(/* webpackChunkName: "locale_ga" */'./ga.json'),
'gl': () => import(/* webpackChunkName: "locale_gl" */'./gl.json'),
'he': () => import(/* webpackChunkName: "locale_he" */'./he.json'),
'hi': () => import(/* webpackChunkName: "locale_hi" */'./hi.json'),
'hr': () => import(/* webpackChunkName: "locale_hr" */'./hr.json'),
'hu': () => import(/* webpackChunkName: "locale_hu" */'./hu.json'),
'hy': () => import(/* webpackChunkName: "locale_hy" */'./hy.json'),
'id': () => import(/* webpackChunkName: "locale_id" */'./id.json'),
'io': () => import(/* webpackChunkName: "locale_io" */'./io.json'),
'it': () => import(/* webpackChunkName: "locale_it" */'./it.json'),
'ja': () => import(/* webpackChunkName: "locale_ja" */'./ja.json'),
'ka': () => import(/* webpackChunkName: "locale_ka" */'./ka.json'),
'kk': () => import(/* webpackChunkName: "locale_kk" */'./kk.json'),
'ko': () => import(/* webpackChunkName: "locale_ko" */'./ko.json'),
'lt': () => import(/* webpackChunkName: "locale_lt" */'./lt.json'),
'lv': () => import(/* webpackChunkName: "locale_lv" */'./lv.json'),
'mk': () => import(/* webpackChunkName: "locale_mk" */'./mk.json'),
'ms': () => import(/* webpackChunkName: "locale_ms" */'./ms.json'),
'nl': () => import(/* webpackChunkName: "locale_nl" */'./nl.json'),
'nn': () => import(/* webpackChunkName: "locale_nn" */'./nn.json'),
'no': () => import(/* webpackChunkName: "locale_no" */'./no.json'),
'oc': () => import(/* webpackChunkName: "locale_oc" */'./oc.json'),
'pl': () => import(/* webpackChunkName: "locale_pl" */'./pl.json'),
'pt-BR': () => import(/* webpackChunkName: "locale_pt-BR" */'./pt-BR.json'),
'pt': () => import(/* webpackChunkName: "locale_pt" */'./pt.json'),
'ro': () => import(/* webpackChunkName: "locale_ro" */'./ro.json'),
'ru': () => import(/* webpackChunkName: "locale_ru" */'./ru.json'),
'sk': () => import(/* webpackChunkName: "locale_sk" */'./sk.json'),
'sl': () => import(/* webpackChunkName: "locale_sl" */'./sl.json'),
'sq': () => import(/* webpackChunkName: "locale_sq" */'./sq.json'),
'sr': () => import(/* webpackChunkName: "locale_sr" */'./sr.json'),
'sr-Latn': () => import(/* webpackChunkName: "locale_sr-Latn" */'./sr-Latn.json'),
'sv': () => import(/* webpackChunkName: "locale_sv" */'./sv.json'),
'ta': () => import(/* webpackChunkName: "locale_ta" */'./ta.json'),
'te': () => import(/* webpackChunkName: "locale_te" */'./te.json'),
'th': () => import(/* webpackChunkName: "locale_th" */'./th.json'),
'tr': () => import(/* webpackChunkName: "locale_tr" */'./tr.json'),
'uk': () => import(/* webpackChunkName: "locale_uk" */'./uk.json'),
'zh-CN': () => import(/* webpackChunkName: "locale_zh-CN" */'./zh-CN.json'),
'zh-HK': () => import(/* webpackChunkName: "locale_zh-HK" */'./zh-HK.json'),
'zh-TW': () => import(/* webpackChunkName: "locale_zh-TW" */'./zh-TW.json'),
};