handle fetching locale in refux action

src/actions/LocalStorageActions.js

@@ -11,6 +11,7 @@ import * as WALLET from 'actions/constants/wallet';
 import { httpRequest } from 'utils/networkUtils';
 import * as buildUtils from 'utils/build';
 import * as storageUtils from 'utils/storage';
+import * as WalletActions from 'actions/WalletActions';
 
 import { getAccountTokens } from 'reducers/utils';
 import type { Account } from 'reducers/AccountsReducer';
@@ -239,10 +240,7 @@ const loadStorageData = (): ThunkAction => (dispatch: Dispatch): void => {
 
     const language: ?string = storageUtils.get(TYPE, KEY_LANGUAGE);
     if (language) {
-        dispatch({
-            type: WALLET.SET_LANGUAGE,
-            language: JSON.parse(language),
-        });
+        dispatch(WalletActions.fetchLocale(language));
     }
 };
 

src/actions/WalletActions.js

@@ -44,7 +44,8 @@ export type WalletAction = {
     type: typeof WALLET.TOGGLE_SIDEBAR,
 } | {
     type: typeof WALLET.SET_LANGUAGE,
-    language: string
+    locale: string,
+    messages: { [string]: string },
 }
 
 export const init = (): ThunkAction => (dispatch: Dispatch): void => {
@@ -71,10 +72,37 @@ export const toggleSidebar = (): WalletAction => ({
     type: WALLET.TOGGLE_SIDEBAR,
 });
 
-export const setLanguage = (language: string): WalletAction => ({
+export const fetchLocale = (locale: string): ThunkAction => (dispatch: Dispatch): void => {
+    const mapLocaleToFileName = {
+        en: 'en',
+        bn: 'bn',
+        cs: 'cs',
+        de: 'de',
+        el: 'el',
+        es: 'es-ES',
+        fr: 'fr',
+        id: 'id',
+        it: 'it',
+        ja: 'ja',
+        nl: 'nl',
+        pl: 'pl',
+        pt: 'pt-PT',
+        ru: 'ru',
+        uk: 'uk',
+        zh: 'zh-CN',
+        zh_TW: 'zh-TW',
+    };
+    const filename = mapLocaleToFileName[locale];
+    fetch(`/l10n/${filename}.json`)
+        .then(response => response.json())
+        .then((messages) => {
+            dispatch({
                 type: WALLET.SET_LANGUAGE,
-    language,
-});
+                locale,
+                messages,
+            });
+        });
+};
 
 // This method will be called after each DEVICE.CONNECT action
 // if connected device has different "passphrase_protection" settings than saved instances

src/components/Header/components/LanguagePicker/Container.js

@@ -14,7 +14,7 @@ type StateProps = {
 }
 
 type DispatchProps = {
-    setLanguage: typeof WalletActions.setLanguage,
+    fetchLocale: typeof WalletActions.fetchLocale,
 };
 
 type OwnProps = {
@@ -28,7 +28,7 @@ const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: St
 });
 
 const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps> = (dispatch: Dispatch): DispatchProps => ({
-    setLanguage: bindActionCreators(WalletActions.setLanguage, dispatch),
+    fetchLocale: bindActionCreators(WalletActions.fetchLocale, dispatch),
 });
 
 export default withRouter(

src/components/Header/components/LanguagePicker/index.js

@@ -31,11 +31,11 @@ const StyledSelect = styled.select`
 `;
 
 
-const LanguagePicker = ({ language, setLanguage }: Props) => (
+const LanguagePicker = ({ language, fetchLocale }: Props) => (
     <SelectWrapper>
         <SelectIcon role="img" aria-label="Select language">🌎</SelectIcon>
         <StyledSelect
-            onChange={e => setLanguage(e.target.value)}
+            onChange={e => fetchLocale(e.target.value)}
             value={language}
         >
             {LANGUAGE.map(lang => (

src/reducers/WalletReducer.js

@@ -14,6 +14,7 @@ type State = {
     ready: boolean;
     online: boolean;
     language: string;
+    messages: { [string]: string };
     dropdownOpened: boolean;
     showBetaDisclaimer: boolean;
     showSidebar: boolean;
@@ -28,6 +29,7 @@ const initialState: State = {
     ready: false,
     online: navigator.onLine,
     language: 'en',
+    messages: {},
     dropdownOpened: false,
     firstLocationChange: true,
     showBetaDisclaimer: false,
@@ -124,7 +126,8 @@ export default function wallet(state: State = initialState, action: Action): Sta
         case WALLET.SET_LANGUAGE:
             return {
                 ...state,
-                language: action.language,
+                language: action.locale,
+                messages: action.messages ? action.messages : state.messages,
             };
 
         default:

src/support/ConnectedIntlProvider.js

@@ -1,14 +1,12 @@
-/* eslint-disable global-require */
 /* @flow */
 import * as React from 'react';
 import { connect } from 'react-redux';
+
 import type { MapStateToProps } from 'react-redux';
 import type { State } from 'flowtype';
 
 import { IntlProvider, addLocaleData } from 'react-intl';
 
-// import { LANGUAGE } from 'config/variables';
-
 import en from 'react-intl/locale-data/en';
 import cs from 'react-intl/locale-data/cs';
 import bn from 'react-intl/locale-data/bn';
@@ -28,55 +26,30 @@ import zh from 'react-intl/locale-data/zh';
 
 addLocaleData([...en, ...cs, ...bn, ...de, ...el, ...es, ...fr, ...id, ...it, ...ja, ...nl, ...pl, ...pt, ...ru, ...uk, ...zh]);
 
-const messages = {
-    en: require('public/l10n/en.json'),
-    bn: require('public/l10n/bn.json'),
-    cs: require('public/l10n/cs.json'),
-    de: require('public/l10n/de.json'),
-    el: require('public/l10n/el.json'),
-    es: require('public/l10n/es-ES.json'),
-    fr: require('public/l10n/fr.json'),
-    id: require('public/l10n/id.json'),
-    it: require('public/l10n/it.json'),
-    ja: require('public/l10n/ja.json'),
-    nl: require('public/l10n/nl.json'),
-    pl: require('public/l10n/pl.json'),
-    pt: require('public/l10n/pt-PT.json'),
-    ru: require('public/l10n/ru.json'),
-    uk: require('public/l10n/uk.json'),
-    zh: require('public/l10n/zh-CN.json'),
-    zh_TW: require('public/l10n/zh-TW.json'),
-};
-
 type OwnProps = {
     children: React.Node
 }
 
 type StateProps = {
-    locale: string
+    locale: string,
+    messages: { [string]: string }
 }
 
 type Props = StateProps & OwnProps;
 
 const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State): StateProps => ({
     locale: state.wallet.language,
+    messages: state.wallet.messages,
 });
 
-
-const ReactIntlProvider = ({ children, locale }: Props) => {
-    // const localeData = await import(`react-intl/locale-data/${locale}`);
-    // addLocaleData(localeData);
-    const localeMessages = messages[locale];
-    console.log(locale);
-    return (
+const ReactIntlProvider = ({ children, locale, messages }: Props) => (
     <IntlProvider
-            key={locale}
+        key={locale} // dirty hack to rerender IntlProvider when lang file is downloaded
         locale={locale}
-            messages={localeMessages}
+        messages={messages}
     >
         {children}
     </IntlProvider>
-    );
-};
+);
 
 export default connect(mapStateToProps, null)(ReactIntlProvider);