fix: make i18n consistently functional (#98)

* fix: make i18n consistently functional

* chore: remove unused import from locales template

cli/src/commands/build.js

@@ -78,7 +78,7 @@ const handler = async ({
             await i18n.generate({
                 input: paths.i18nStrings,
                 output: paths.i18nLocales,
-                namespace: config.name || 'default',
+                namespace: 'default',
             })
 
             if (config.type === 'app') {

cli/src/commands/start.js

@@ -35,7 +35,7 @@ const handler = async ({ cwd, force, shell: shellSource }) => {
             await i18n.generate({
                 input: paths.i18nStrings,
                 output: paths.i18nLocales,
-                namespace: config.name || 'default',
+                namespace: 'default',
             })
 
             reporter.info('Bootstrapping local appShell...')

cli/src/lib/i18n/templates/locales.hbs

@@ -7,18 +7,14 @@
   // </auto-generated>
 //------------------------------------------------------------------------------
 import i18n from '@dhis2/d2-i18n';
-import moment from 'moment';
-{{#each locales}}
-import 'moment/locale/{{ this }}';
-{{/each}}
+
 {{#each langs as |lang key|}}
 import {{ lang }}Translations from './{{ lang }}/translations.json';
 {{/each}}
+
 const namespace = '{{ namespace }}';
-moment.locale('en');
 {{#each langs as |lang key|}}
 i18n.addResources('{{ lang }}', namespace, {{ lang }}Translations);
 {{/each}}
-i18n.setDefaultNamespace(namespace);
-i18n.changeLanguage('en');
-export default i18n;
+
+export default i18n;

examples/simple-app/i18n/en.pot

@@ -5,8 +5,11 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2019-06-27T12:10:45.485Z\n"
-"PO-Revision-Date: 2019-06-27T12:10:45.485Z\n"
+"POT-Creation-Date: 2019-10-02T21:55:28.107Z\n"
+"PO-Revision-Date: 2019-10-02T21:55:28.107Z\n"
 
 msgid "Hello {{name}}"
 msgstr ""
+
+msgid "Have a great {{dayOfTheWeek}}!"
+msgstr ""

examples/simple-app/i18n/es.pot

@@ -0,0 +1,15 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: i18next-conv\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1)\n"
+"POT-Creation-Date: 2019-05-20T12:03:17.005Z\n"
+"PO-Revision-Date: 2019-05-20T12:03:17.005Z\n"
+
+msgid "Hello {{name}}"
+msgstr "Hola {{name}}"
+
+msgid "Have a great {{dayOfTheWeek}}!"
+msgstr "Que tenga un buen {{dayOfTheWeek}}!"

examples/simple-app/i18n/fr.pot

@@ -10,3 +10,6 @@ msgstr ""
 
 msgid "Hello {{name}}"
 msgstr "Bonjour {{name}}"
+
+msgid "Have a great {{dayOfTheWeek}}!"
+msgstr "Bonne {{dayOfTheWeek}}!"

examples/simple-app/src/App.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import i18n from './locales'
+import moment from 'moment'
 import { useDataQuery } from '@dhis2/app-runtime'
 import style from './App.style'
 
@@ -16,7 +17,16 @@ const Component = () => {
             {error && <span>ERROR</span>}
             {loading && <span>...</span>}
             {data && (
-                <h1>{i18n.t('Hello {{name}}', { name: data.me.name })}</h1>
+                <>
+                    <h1>{i18n.t('Hello {{name}}', { name: data.me.name })}</h1>
+                    <h3>
+                        {i18n.t('Have a great {{dayOfTheWeek}}!', {
+                            dayOfTheWeek: moment.weekdays(true)[
+                                moment().weekday()
+                            ],
+                        })}
+                    </h3>
+                </>
             )}
         </div>
     )

shell/adapter/i18n/es.po

@@ -0,0 +1,42 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: i18next-conv\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1)\n"
+"POT-Creation-Date: 2019-06-18T09:28:13.445Z\n"
+"PO-Revision-Date: 2019-06-18T09:28:13.445Z\n"
+
+msgid "Please sign in"
+msgstr "Por favor iniciar sesión"
+
+msgid "Server"
+msgstr "Servidor"
+
+msgid "Username"
+msgstr "Nombre de usuario"
+
+msgid "Password"
+msgstr "Contraseña"
+
+msgid "Sign in"
+msgstr "Iniciar sesión"
+
+msgid "An error occurred in the DHIS2 application."
+msgstr ""
+
+msgid "Something went wrong"
+msgstr ""
+
+msgid "Refresh to try again"
+msgstr ""
+
+msgid "Hide technical details"
+msgstr ""
+
+msgid "Show technical details"
+msgstr ""
+
+msgid "The following information may be requested by technical support."
+msgstr ""

shell/adapter/i18n/fr.pot → shell/adapter/i18n/fr.po

@@ -9,7 +9,10 @@ msgstr ""
 "PO-Revision-Date: 2019-06-18T09:28:13.445Z\n"
 
 msgid "Please sign in"
-msgstr "Se connecter"
+msgstr "Se connecter, s'il vous plait"
+
+msgid "Server"
+msgstr "Serveur"
 
 msgid "Username"
 msgstr "Nom d'utilizateur"
@@ -18,9 +21,9 @@ msgid "Password"
 msgstr "Mot de passe"
 
 msgid "Sign in"
-msgstr "Se connecter"
+msgstr "Connexion"
 
-msgid "An error occurred in the DHIS2 Maps application."
+msgid "An error occurred in the DHIS2 application."
 msgstr ""
 
 msgid "Something went wrong"

shell/adapter/src/AuthBoundary/index.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import { useDataQuery } from '@dhis2/app-runtime'
-import i18n from '../locales'
 
 import { ScreenCover, CircularLoader } from '@dhis2/ui-core'
 import { LoginModal } from './LoginModal'
+import { useLocale } from './useLocale'
 
 const settingsQuery = {
     userSettings: {
@@ -12,8 +12,8 @@ const settingsQuery = {
 }
 
 export const AuthBoundary = ({ url, children }) => {
-    i18n.changeLanguage(window.navigator.language)
     const { loading, error, data } = useDataQuery(settingsQuery)
+    useLocale(data && data.userSettings.keyUiLocale)
 
     if (loading) {
         return (
@@ -27,6 +27,5 @@ export const AuthBoundary = ({ url, children }) => {
         return <LoginModal url={url} />
     }
 
-    i18n.changeLanguage(data.userSettings.keyUiLocale)
     return children
 }

shell/adapter/src/AuthBoundary/useLocale.js

@@ -0,0 +1,31 @@
+import { useEffect } from 'react'
+import i18n from '@dhis2/d2-i18n'
+import moment from 'moment'
+
+i18n.setDefaultNamespace('default')
+
+const simplifyLocale = locale => {
+    const idx = locale.indexOf('-')
+    if (idx === -1) {
+        return locale
+    }
+    return locale.substr(0, idx)
+}
+
+const setGlobalLocale = locale => {
+    if (locale !== 'en' && locale !== 'en-us') {
+        import(`moment/locale/${locale}`).catch(() => {
+            /* ignore */
+        })
+    }
+    moment.locale(locale)
+
+    const simplifiedLocale = simplifyLocale(locale)
+    i18n.changeLanguage(simplifiedLocale)
+}
+
+export const useLocale = locale => {
+    useEffect(() => {
+        setGlobalLocale(locale || window.navigator.language)
+    }, [locale])
+}