Internationalization (i18n) with react-i18next #921

mrkvon · 2018-12-06T23:58:46Z

Proposed Changes

Testing an react-i18next library. So far works fine.

Largely following tutorials on https://react.i18next.com.

Testing Instructions

git checkout react-i18next
npm install
npm start
go to http://localhost:3000/volunteering
try to switch language from eng to cze and observe the magic

Fixes #492

TODO:

hide behind a feature flag
test translation extraction tools and translating tools

modules/core/client/components/LanguageSwitch.component.js

simison · 2018-12-07T19:36:51Z

modules/core/client/components/i18n.js

+import i18n from 'i18next';
+import { reactI18nextModule } from 'react-i18next';
+import * as translationEN from '../../../../public/locales/en/translation';
+import * as translationCS from '../../../../public/locales/cs/translation';


We probably better off starting with some ISO standard codes; perhaps the same as we use for profile languages? (ISO 639 2)

Ok, let's use the ISO 639-2 instead of 639-1. It includes more languages and we already use it as @simison describe.

Ahhh bummer, I think I've looked up something wrong here.

I picked the ISO standard from this sentence:

The languages.json is a custom made file which contains languages from languages_orig.json that has iso_639_2 standard defined.

But it just states that we pick only those languages from the whole massive list and then actually in the database we use codes like fi_FI:

https://github.com/Trustroots/trustroots/blob/15a8bcebee8286eca1591f950a120420b2e08dd3/modules/core/client/directives/tr-languages.client.directive.js

Would you like to revert to ISO_639-1, then? It should be as easy as dropping a commit.

Actually, ISO_639-1 will be compatible with moment.locale(), i18next documentation etc.
And when we need to use languages out of the scope of ISO_639-1, we can use ISO_639-3 just for them.

~~I would prefer not to use fi_FI format though - not a standard, redundant information and hard to reuse in localization library configs without custom parsing.~~

Sounds reasonable 👍 I'll leave it up to you to decide since you have better insight. :-) We can very easily refactor at any point if we hit issues. That said, probably easier to get it right from the beginning.

Do ISO_639-1 or ISO_639-2 make difference between localized languages, such as English GB/US or French CA/FR etc? In volunteering space those are often pretty fast to crop up.

Ah, I made some false assumptions (i.e. fi_FI is not a redundant information). I'll research more.

simison · 2018-12-07T21:23:00Z

What do you think if we instead use withNamespaces higher order component like so:

const Volunteering = () => {
 return <Something />;
}

export default withNamespaces()(Volunteering);

That way if function/component is returning multiple times, we wouldn't need to wrap each return with NamespacesConsumer:

export default const Volunteering = () => {
  if (something) {
    return (
      <NamespacesConsumer>
        <Something />
      </NamespacesConsumer>
    );
  } 

  return (
    <NamespacesConsumer>
      <Something />
    </NamespacesConsumer>
  );
}

modules/core/client/components/i18n.js

mrkvon · 2018-12-09T23:15:08Z

use withNamespaces higher order component

It's nice, yes. There is just a check in the code for importing react components to angular, which is failing with this. It could be possible to drop that check, too.

Update:
I'm facing a row of errors when I try to use withNamespaces. It's related to importing the React component to Angular.
Since the alternative solution just works, I'd prefer to focus on other things at the moment. Eventually we can attempt to change it again.

mrkvon · 2018-12-10T14:13:13Z

It's very important that we figure out what localization tool we can use. (A tool that non-programmers can use to translate the files in /public/locales/**/translation.json.) It would preferably be free and open source and run on different operating systems.

It makes a difference between choosing this library and not.

Thank you @Akronix for pointing this out to me.

simison · 2018-12-10T15:31:48Z

It's very important that we figure out what localization tool we can use.

Good point! I don't see us being limited to anything specific, because i18n-next has utils for to/from Gettext and other formats as well even a Gettext Webpack loader:

https://www.i18next.com/overview/plugins-and-utils#utils

Gettext is about as free and open as you can get so we can either use self-hosted software, SAAS software to even local tools such as Poedit.

i18n-next seems great also because it has support for such a variety of frameworks, among others Express.js (i18next-express-middleware) which we use at the backend so we can translate our emails and other backend served stuff.

mrkvon · 2018-12-10T23:29:04Z

Seems react-i18next could be the library, then.

mrkvon · 2018-12-10T23:48:23Z

A design of language switch button would be nice.
How should it behave, where should it be placed?

simison · 2018-12-11T09:59:45Z

A design of language switch button would be nice.
How should it behave, where should it be placed?

For non-authenticated users, it could always be visible in the header. We can get quickly going with a simple Bootstrap navigation dropdown:

It should fit also in mobile header nicely:

(and if it doesn't, using a shortening "FI" for Finnish etc should work.

We'll hit some limits with this when we add more languages but we can work more on it then. I have some old designs from BeWelcome hackathon/early Trustroots times that should be useful.

Technically I like the idea of using a <select> here, but I don't think it works nicely styles-wise so it would probably be just more work to make it work nicely. Dropdown works straight out of the box.

For authenticated users, we don't need to show it all the time (as they really need to change it just once). Instead, we can add it to their "account" page as <select>:

This is the language of the interface you see across the site.

Thanks to all our community members who helped translate! You can help us out!

Probably good to hide these selections behind a feature flag until we have something to show?

Thoughts?

@mrkvon What were you thinking specifically when asking "How should it behave"?

mrkvon · 2018-12-11T11:03:50Z

What were you thinking specifically when asking "How should it behave"?

@simison You answered precisely what I was asking. Thank you!

mrkvon · 2018-12-11T21:33:36Z

We can save the preferred language in a client (set a cookie) or in a database (PUT /api/users, { "localization": "en_GB", ... }). Which one?
Probably a separate PR.

simison · 2018-12-11T21:36:33Z

We can save the preferred language in a client (set a cookie) or in a database (PUT /api/users, { "localization": "en_GB", ... })

Cookie sounds good to me as a starting point since that's what unregistered users need.

For authenticated users, we can store it in their user table just like any other account content.

Probably a separate PR.

Totally 👍

modules/users/client/components/ProfileViewBasics.component.js

modules/core/client/components/LanguageSwitch.component.js

modules/core/server/views/partials/header.server.view.html

mrkvon · 2018-12-12T03:43:02Z

Wants to be merged. Somebody should succeed with using the tools for extracting translations, and tools for translating. I'll try tomorrow.
We can continue with this only when we know both programmers and non-programmers can create translations frustration free.

mrkvon · 2018-12-12T11:06:57Z

@guaka
Exctracting translations - react-i18next documentation

Also we should decide whether we want to use natural, or keybased catalog. Currently we use natural one (translation keys equal English values).

The i18next-gettext-converter would be nice to have plugged to make many translation tools available. And other plugins.

simison · 2018-12-12T11:09:58Z

we should decide whether we want to use natural, or keybased catalog. Currently we use natural ones (translation keys equal English values).

I'd go for natural like it's now — it removes some mental complexity while developing and moves the overhead of "changing strings" to translation work instead. I think that's fine since we aren't changing strings that often.

Wants to be merged

Code is looking good 👍 just need to give this a spin (aiming to do that tonight).

simison · 2018-12-12T22:21:33Z

This seems to be a bit broken now on development version:

Let's put the flag off by default for all environments and folks working on this can enable locally?

simison

Looks great and tests well!

Let's just hide the <select> in the header for now from all environments (just via feature flag) before merging so that master won't feel broken even in the development environment.

There will be quite a few tasks as a follow-up but we can work on this incrementally.

Nice job handling this; 🚢 it!

mrkvon · 2018-12-13T09:25:07Z

Opened an issue for i18next-parser: i18next/i18next-parser#145

change variable name

mrkvon · 2018-12-13T14:33:42Z

Ok, let's make a leap of trust that the localization tools will work.
Merging.

simison · 2018-12-13T14:35:11Z

As long as things are behind a feature flag and not breaking anything or making the build enormous, we're safe to iterate and refactor. 👍

guaka · 2018-12-14T11:28:02Z

What about already enabling the language switcher for users with the "beta" role?

mrkvon changed the title ~~Internationalization (i18n) with react-i18next~~ [WIP] Internationalization (i18n) with react-i18next Dec 6, 2018

mrkvon changed the base branch from master to react December 6, 2018 23:59

guaka added the i18n label Dec 7, 2018

mrkvon force-pushed the react-i18next branch from d0fc4c8 to 1405ce6 Compare December 7, 2018 16:25

mrkvon changed the base branch from react to master December 7, 2018 16:26

mrkvon changed the base branch from master to react December 7, 2018 19:04

mrkvon changed the base branch from react to master December 7, 2018 19:04

simison reviewed Dec 7, 2018

View reviewed changes

modules/core/client/components/LanguageSwitch.component.js Outdated Show resolved Hide resolved

simison reviewed Dec 7, 2018

View reviewed changes

modules/core/client/components/i18n.js Outdated Show resolved Hide resolved

mrkvon added [Needs] Design labels Dec 8, 2018

mrkvon force-pushed the react-i18next branch 2 times, most recently from 79e1a29 to bd129a9 Compare December 10, 2018 14:31

mrkvon force-pushed the react-i18next branch from 092d597 to 1ec88fc Compare December 10, 2018 23:18

simison reviewed Dec 11, 2018

View reviewed changes

modules/users/client/components/ProfileViewBasics.component.js Outdated Show resolved Hide resolved

simison reviewed Dec 11, 2018

View reviewed changes

modules/core/client/components/LanguageSwitch.component.js Outdated Show resolved Hide resolved

mrkvon force-pushed the react-i18next branch from 41422fa to 73cc764 Compare December 11, 2018 21:45

simison reviewed Dec 11, 2018

View reviewed changes

modules/core/server/views/partials/header.server.view.html Outdated Show resolved Hide resolved

mrkvon added the framework label Dec 12, 2018

mrkvon changed the title ~~[WIP] Internationalization (i18n) with react-i18next~~ Internationalization (i18n) with react-i18next Dec 12, 2018

simison approved these changes Dec 12, 2018

View reviewed changes

mrkvon added 11 commits December 13, 2018 10:26

set up internationalization with react-i18next

85953b5

change language codes from ISO 639-1 to ISO 639-2

e10949f

change variable name

lazy loading translations

0fd5c92

split translation into multiple files

462bcc2

add more complex translations and settings

4dbe0c9

improve formatting, add a translation

ca32ac7

hide language switch behind a feature flag in production

94bdbf6

move i18n.js to config/lib

486600e

make a user-profile namespace

0e10fb6

disable i18n in development environment

e7d9e3a

move language-switch to different place in header (away from new line)

3eb291a

mrkvon force-pushed the react-i18next branch from 79f2e3d to 3eb291a Compare December 13, 2018 09:32

mrkvon merged commit 404b862 into master Dec 13, 2018

simison deleted the react-i18next branch December 16, 2018 18:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Internationalization (i18n) with react-i18next #921

Internationalization (i18n) with react-i18next #921

mrkvon commented Dec 6, 2018 •

edited

simison Dec 7, 2018

mrkvon Dec 10, 2018 •

edited

simison Dec 11, 2018

mrkvon Dec 11, 2018 •

edited

simison Dec 11, 2018 •

edited

mrkvon Dec 11, 2018

simison commented Dec 7, 2018 •

edited

mrkvon commented Dec 9, 2018 •

edited

mrkvon commented Dec 10, 2018

simison commented Dec 10, 2018

mrkvon commented Dec 10, 2018

mrkvon commented Dec 10, 2018

simison commented Dec 11, 2018 •

edited

mrkvon commented Dec 11, 2018

mrkvon commented Dec 11, 2018

simison commented Dec 11, 2018

mrkvon commented Dec 12, 2018

mrkvon commented Dec 12, 2018 •

edited

simison commented Dec 12, 2018 •

edited

simison commented Dec 12, 2018

simison left a comment •

edited

mrkvon commented Dec 13, 2018

mrkvon commented Dec 13, 2018

simison commented Dec 13, 2018

guaka commented Dec 14, 2018

Internationalization (i18n) with react-i18next #921

Internationalization (i18n) with react-i18next #921

Conversation

mrkvon commented Dec 6, 2018 • edited

Proposed Changes

Testing Instructions

simison Dec 7, 2018

Choose a reason for hiding this comment

mrkvon Dec 10, 2018 • edited

Choose a reason for hiding this comment

simison Dec 11, 2018

Choose a reason for hiding this comment

mrkvon Dec 11, 2018 • edited

Choose a reason for hiding this comment

simison Dec 11, 2018 • edited

Choose a reason for hiding this comment

mrkvon Dec 11, 2018

Choose a reason for hiding this comment

simison commented Dec 7, 2018 • edited

mrkvon commented Dec 9, 2018 • edited

mrkvon commented Dec 10, 2018

simison commented Dec 10, 2018

mrkvon commented Dec 10, 2018

mrkvon commented Dec 10, 2018

simison commented Dec 11, 2018 • edited

mrkvon commented Dec 11, 2018

mrkvon commented Dec 11, 2018

simison commented Dec 11, 2018

mrkvon commented Dec 12, 2018

mrkvon commented Dec 12, 2018 • edited

simison commented Dec 12, 2018 • edited

simison commented Dec 12, 2018

simison left a comment • edited

Choose a reason for hiding this comment

mrkvon commented Dec 13, 2018

mrkvon commented Dec 13, 2018

simison commented Dec 13, 2018

guaka commented Dec 14, 2018

mrkvon commented Dec 6, 2018 •

edited

mrkvon Dec 10, 2018 •

edited

mrkvon Dec 11, 2018 •

edited

simison Dec 11, 2018 •

edited

simison commented Dec 7, 2018 •

edited

mrkvon commented Dec 9, 2018 •

edited

simison commented Dec 11, 2018 •

edited

mrkvon commented Dec 12, 2018 •

edited

simison commented Dec 12, 2018 •

edited

simison left a comment •

edited