rewritten AppLocalizationProvider as function-component

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 {
+export function AppLocalizationProvider({ userLocales, children }){
-    constructor(props) {
+    const [bundles, setBundles] = useState(getDefaultBundles())
-        super(props)
+
-        this.state = {
+    useEffect(event => {
-            bundles: getDefaultBundles(),
+        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 <div>Loading texts…</div>
     }
 
-    async componentDidMount() {
+    return <LocalizationProvider l10n={bundles}>
-        const currentLocales = negotiateLanguages(
+        {children}
-            this.props.userLocales,
+    </LocalizationProvider>
-            _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 <div>Loading texts…</div>
-        }
-
-        return (
-            <LocalizationProvider l10n={bundles}>
-                {children}
-            </LocalizationProvider>
-        )
-    }
 }
+