From 3217517050e1609bf1c4d02868d8e6134d305b94 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Fri, 15 Feb 2019 20:52:56 +0100 Subject: [PATCH] handle fetching locale in refux action --- src/actions/LocalStorageActions.js | 6 +-- src/actions/WalletActions.js | 38 +++++++++++-- .../components/LanguagePicker/Container.js | 4 +- .../Header/components/LanguagePicker/index.js | 4 +- src/reducers/WalletReducer.js | 5 +- src/support/ConnectedIntlProvider.js | 53 +++++-------------- 6 files changed, 56 insertions(+), 54 deletions(-) diff --git a/src/actions/LocalStorageActions.js b/src/actions/LocalStorageActions.js index 5cb91059..b73e3a63 100644 --- a/src/actions/LocalStorageActions.js +++ b/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)); } }; diff --git a/src/actions/WalletActions.js b/src/actions/WalletActions.js index a17cb3cf..70519b75 100644 --- a/src/actions/WalletActions.js +++ b/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 => ({ - type: WALLET.SET_LANGUAGE, - language, -}); +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, + locale, + messages, + }); + }); +}; // This method will be called after each DEVICE.CONNECT action // if connected device has different "passphrase_protection" settings than saved instances diff --git a/src/components/Header/components/LanguagePicker/Container.js b/src/components/Header/components/LanguagePicker/Container.js index 0b076d3e..78287134 100644 --- a/src/components/Header/components/LanguagePicker/Container.js +++ b/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: St }); const mapDispatchToProps: MapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({ - setLanguage: bindActionCreators(WalletActions.setLanguage, dispatch), + fetchLocale: bindActionCreators(WalletActions.fetchLocale, dispatch), }); export default withRouter( diff --git a/src/components/Header/components/LanguagePicker/index.js b/src/components/Header/components/LanguagePicker/index.js index 24ec4a84..c444fe11 100644 --- a/src/components/Header/components/LanguagePicker/index.js +++ b/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) => ( 🌎 setLanguage(e.target.value)} + onChange={e => fetchLocale(e.target.value)} value={language} > {LANGUAGE.map(lang => ( diff --git a/src/reducers/WalletReducer.js b/src/reducers/WalletReducer.js index 23ef6c82..e0a2c187 100644 --- a/src/reducers/WalletReducer.js +++ b/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: diff --git a/src/support/ConnectedIntlProvider.js b/src/support/ConnectedIntlProvider.js index c6507397..dcd35d11 100644 --- a/src/support/ConnectedIntlProvider.js +++ b/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: 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 ( - - {children} - - ); -}; +const ReactIntlProvider = ({ children, locale, messages }: Props) => ( + + {children} + +); export default connect(mapStateToProps, null)(ReactIntlProvider); \ No newline at end of file