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:
parent
fd45bbe4af
commit
3217517050
@ -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));
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -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
|
||||
|
@ -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(
|
||||
|
@ -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 => (
|
||||
|
@ -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:
|
||||
|
@ -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);
|
Loading…
Reference in New Issue
Block a user