diff --git a/src/l10n.js b/src/l10n.js index bf09342..6f7c6bb 100644 --- a/src/l10n.js +++ b/src/l10n.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useEffect, useState } from 'react' // https://projectfluent.org/play/ @@ -46,38 +46,30 @@ async function createMessagesGenerator(currentLocales) { } } -export class AppLocalizationProvider extends React.Component { - constructor(props) { - super(props) - this.state = { - bundles: getDefaultBundles(), +export function AppLocalizationProvider({ userLocales, children }){ + const [bundles, setBundles] = useState(getDefaultBundles()) + + useEffect(event => { + async function loadBundles() { + const currentLocales = negotiateLanguages( + userLocales, + _supportedLocales_, + { defaultLocale: _defaultLocale_ } + ) + + const generateBundles = await createMessagesGenerator(currentLocales) + setBundles( new ReactLocalization(generateBundles()) ) } + loadBundles() + }, []) + + if (!bundles) { + // Show a loader. + return
Loading texts…
} - async componentDidMount() { - const currentLocales = negotiateLanguages( - this.props.userLocales, - _supportedLocales_, - { defaultLocale: _defaultLocale_ } - ) - - const generateBundles = await createMessagesGenerator(currentLocales) - this.setState({ bundles: new ReactLocalization(generateBundles()) }) - } - - render() { - const { children } = this.props - const { bundles } = this.state - - if (!bundles) { - // Show a loader. - return
Loading texts…
- } - - return ( - - {children} - - ) - } + return + {children} + } +