1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-13 20:08:56 +00:00

handle fetching locale in refux action

This commit is contained in:
slowbackspace 2019-02-15 20:52:56 +01:00
parent fd45bbe4af
commit 3217517050
6 changed files with 56 additions and 54 deletions

View File

@ -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));
}
};

View File

@ -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

View File

@ -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(

View File

@ -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 => (

View File

@ -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:

View File

@ -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 (
<IntlProvider
key={locale}
locale={locale}
messages={localeMessages}
>
{children}
</IntlProvider>
);
};
const ReactIntlProvider = ({ children, locale, messages }: Props) => (
<IntlProvider
key={locale} // dirty hack to rerender IntlProvider when lang file is downloaded
locale={locale}
messages={messages}
>
{children}
</IntlProvider>
);
export default connect(mapStateToProps, null)(ReactIntlProvider);