set up basic i18n

[amneacsu]

Hi! 👋

refs issue #17

This needs more work and I'm looking for input.

i18n.changeLanguage is called on componentWillUpdate as that's the only way of changing the language that I found (by calling that method on the one i18n instance). Redux and lifecycle handles the rest in this case. react-i18next components do not seem to accept a prop I could forward from react-redux, so I had to make do.

I didn't have where to store the state so I added a new i18n reducer. To change the language you'd just dispatch an action and change state.i18n.preferredLanguage.

Let me know what needs tweaking.

[SergiuB]

Hi! Thanks a lot for the contribution. Let me take a look and I will get back today or tomorrow.

[SergiuB]

Instead of this wrapper component, I suggest using thunk action with a side effect, like this:

export const setLocale = locale => dispatch => {
  dispatch({
    type: SET_LOCALE,
    locale,
  });
  i18n.changeLanguage(locale);
};

Of course, handle the SET_LOCALE action in the reducer by saving the locale in the store state.

This way you can remove this I18nProvider wrapper, not rely on the deprecated componentWillUpdate method, and it's also a bit more inline with the Redux philosophy of keeping side effects in action creators.

[SergiuB]

Find a way to keep the translation files separate: ro.json, en.json. Not sure how, but i18next should support it. You could also import jsons via the webpack json loader.

[SergiuB]

don't forget to add i18next and react-i18next to package.json via yarn add -E ... (let's keep exact versions to avoid update surprises)

[SergiuB]

👍

[amneacsu]

Hi Sergiu I'm back from AFK sorry about that 🏕😴. Agree on all points and this is what I have so far. Let me know what else to change, and then at the end I can migrate all the strings. I'll also need to recheck code style (I had to disable prettier hook as it was messing with my git flow).

add i18next and react-i18next to package.json

Fixed. I'll blame that on npm version mismatch or git CLI slip.

 I suggest using thunk action with a side effect

There is now a thunked setLocale action.

keep the translation files separate: ro.json, en.json

Done as well. I can try webpack require.context to load whatever's in a translations dir, or collocate i18n files for each component in src if you want. Thought I'd KISS for now and just stick to CR suggestions.

---