feat: add i18next and transifex into the project #875

acezard · 2023-07-17T13:31:40Z

Implementations

Added i18next, intl-pluralrules (polyfill), react-i18next, react-native-localize (native helpers)
Implemented i18n setup file
Created auto generated locales files for en and es (uploaded on tx)
Implemented TX pull & locale files validation
Export functions to use i18n in non-react files
Implemented i18n everywhere in the app and removed old system
Set default language to "en"
Handles language at app creation, app start, and cozy-settings lang change

acezard · 2023-07-19T08:38:14Z

src/libs/clientHelpers/createClient.ts

@@ -41,6 +43,7 @@ export const createClient = async (instance: string): Promise<CozyClient> => {
  const stackClient = client.getStackClient()
  stackClient.setUri(instance)
  await stackClient.register(instance)
+  await changeLanguage(client.getInstanceOptions().locale)


changeLanguage() called here

Is client.getInstanceOptions() supposed to work when not logged yet?

My understanding is that the locale will change:

On not-logged startup based on device's locale

During login just after creating a cozy-client, so the password screen would have the cozy's language

On logged startup based on cozy's language

But:

We don't revert to device's language on logout or on revoked token event (i don't remember if it is what we want)

We don't revert to device's language if we stop the login process

Should we implement those ?

we could implement that, you would have the cozy language in memory here indeed (but it would reset next app launch). I'm not sure what is best for the user here

Is client.getInstanceOptions() supposed to work when not logged yet?

it doesn't work indeed. I'm not sure where to put it, there are a lot of options. Can't we use a single call for both login and creation?

getClient, finalizeClient, check if lang can be used before login, add a fallback in nav to check if lang is correct

set phone lang on welcome screen

acezard · 2023-07-19T08:38:22Z

src/libs/client.js

@@ -63,6 +64,7 @@ export const getClient = async () => {

  await client.registerPlugin(flag.plugin)
  await client.plugins.flags.initializing
+  await changeLanguage(client.getInstanceOptions().locale)


changeLanguage() called here

maybe it should be called only once for all cases. not sure where

Ldoppea · 2023-07-19T09:29:12Z

package.json

@@ -10,15 +10,18 @@
    "home:build": "(cd cozy-home && yarn build:mobile)",
    "home:watch": "(cd cozy-home && yarn watch:mobile)",
    "install:home:local": "bash ./scripts/install-home.sh",
-    "install:home:registry": "yarn tsc --project scripts && node scripts/dist/install-home-registry.cmd.js",
+    "install:home:registry": "node scripts/dist/install-home-registry.cmd.js",
+    "install:scripts": "yarn tsc --project scripts && yarn install:home:registry",


You refactored this but you didn't change the behavior. Did you intialy want to add the validate:locales script here?

yes but now it also compiles the validation script that is in ts, so I wanted to compile them only once and not twice. By doing it in the postinstall this is ensured

src/components/webviews/CozyWebView.js

Ldoppea · 2023-07-19T09:42:14Z

src/locales/i18n.ts

+export const t: TranslationFunction = (...args) => _i18n.t(...args)
+export const useI18n = (): UseTranslationResult => useTranslation()
+export const changeLanguage: ChangeLanguageFunction = languageCode =>
+  _i18n.changeLanguage(languageCode)


Shouldn't we check for supported language here? So the day we will add a new language in cozy-settings we don't need to be synchronized with a new flagship app release

yes, what should we do if it's not supported? switch to english or stay on es/fr?

Updated

If the language is available then take this language
Else try to take the phone's language
Else if phone's language not available, then take english

src/app/view/Lock/LockScreen.tsx

src/libs/clientHelpers/magicLink.ts

Ldoppea · 2023-07-19T09:56:11Z

src/libs/clientHelpers/createClient.ts

@@ -41,6 +43,7 @@ export const createClient = async (instance: string): Promise<CozyClient> => {
  const stackClient = client.getStackClient()
  stackClient.setUri(instance)
  await stackClient.register(instance)
+  await changeLanguage(client.getInstanceOptions().locale)


Is client.getInstanceOptions() supposed to work when not logged yet?

Ldoppea · 2023-07-19T09:59:37Z

src/libs/clientHelpers/createClient.ts

@@ -41,6 +43,7 @@ export const createClient = async (instance: string): Promise<CozyClient> => {
  const stackClient = client.getStackClient()
  stackClient.setUri(instance)
  await stackClient.register(instance)
+  await changeLanguage(client.getInstanceOptions().locale)


My understanding is that the locale will change:

On not-logged startup based on device's locale

During login just after creating a cozy-client, so the password screen would have the cozy's language

On logged startup based on cozy's language

But:

We don't revert to device's language on logout or on revoked token event (i don't remember if it is what we want)

We don't revert to device's language if we stop the login process

Should we implement those ?

- Add CI check - Add TX config - Add TX pull script - Add a locale check script - Add translation files - Add i18n service - Install required dependencies - Add mocks - Add types

- At prelogin - At login - At logout

src/locales/i18n.ts

Ldoppea · 2023-07-21T09:33:02Z

src/screens/login/LoginScreen.js

+        const { kdfIterations, name, locale } = await fetchPublicData(client)
+
+        // If we are able to get a locale from the public data, we update the language asap
+        if (locale) void changeLanguage(locale)


setInstanceData is called only for classic login, in case of magicLink based auth then startMagicLinkOAuth is called and in case of OIDC oauth then startOidcOAuth is called. During those scenario we can have the 2FA screen displayed that should be translated too.

Also I'm wondering if we have enough data to do the same on the OnboardingScreen?

I suggest doing this in a following PR as getting locale info before full login wasn't really in the scope of this feature at the start

I'm ok with that 👍

acezard requested review from Ldoppea and zatteo as code owners July 17, 2023 13:31

acezard force-pushed the feat--setup-local-i18n branch 2 times, most recently from 1f87778 to d92a4f4 Compare July 18, 2023 12:18

acezard marked this pull request as draft July 18, 2023 13:26

acezard force-pushed the feat--setup-local-i18n branch 2 times, most recently from a4edb28 to aab7255 Compare July 19, 2023 08:30

acezard marked this pull request as ready for review July 19, 2023 08:31

acezard commented Jul 19, 2023

View reviewed changes

Ldoppea reviewed Jul 19, 2023

View reviewed changes

acezard force-pushed the feat--setup-local-i18n branch 2 times, most recently from 2411998 to 15164a3 Compare July 19, 2023 15:30

acezard added 3 commits July 20, 2023 09:48

feat: setup i18n env

98c9f10

- Add CI check - Add TX config - Add TX pull script - Add a locale check script - Add translation files - Add i18n service - Install required dependencies - Add mocks - Add types

feat: Implement realtime language change

8ace4ec

feat: implement translation into the app

03ce794

acezard force-pushed the feat--setup-local-i18n branch 3 times, most recently from 97113c3 to 0faf788 Compare July 20, 2023 14:24

fix: improve i18n lifecycle

71a5072

- At prelogin - At login - At logout

acezard force-pushed the feat--setup-local-i18n branch from 0faf788 to 71a5072 Compare July 20, 2023 14:31

acezard requested a review from Ldoppea July 21, 2023 06:34

Ldoppea reviewed Jul 21, 2023

View reviewed changes

acezard requested a review from Ldoppea July 21, 2023 11:59

Ldoppea approved these changes Jul 21, 2023

View reviewed changes

acezard merged commit ec18364 into master Jul 21, 2023
1 check passed

acezard deleted the feat--setup-local-i18n branch July 21, 2023 12:25

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add i18next and transifex into the project #875

feat: add i18next and transifex into the project #875

acezard commented Jul 17, 2023 •

edited

Loading

acezard Jul 19, 2023

Ldoppea Jul 19, 2023

Ldoppea Jul 19, 2023

acezard Jul 19, 2023

acezard Jul 20, 2023

acezard Jul 20, 2023

acezard Jul 20, 2023

acezard Jul 19, 2023

acezard Jul 20, 2023

Ldoppea Jul 19, 2023

acezard Jul 19, 2023

Ldoppea Jul 19, 2023

acezard Jul 19, 2023 •

edited

Loading

Ldoppea Jul 20, 2023

Ldoppea Jul 19, 2023

Ldoppea Jul 19, 2023

Ldoppea Jul 21, 2023

acezard Jul 21, 2023

Ldoppea Jul 21, 2023

feat: add i18next and transifex into the project #875

feat: add i18next and transifex into the project #875

Conversation

acezard commented Jul 17, 2023 • edited Loading

Implementations

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

acezard Jul 19, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

acezard commented Jul 17, 2023 •

edited

Loading

acezard Jul 19, 2023 •

edited

Loading