add initial support for setting language

2024-11-13 20:08:56 +00:00 · 2019-02-06 18:01:09 +01:00 · 2019-02-06 18:01:09 +01:00 · ddf2819de3
commit ddf2819de3
parent 736654fdd3
9 changed files with 111 additions and 32 deletions
--- a/src/actions/WalletActions.js
+++ b/src/actions/WalletActions.js
@ -42,6 +42,9 @@ export type WalletAction = {
    type: typeof WALLET.SHOW_BETA_DISCLAIMER | typeof WALLET.HIDE_BETA_DISCLAIMER | typeof WALLET.SET_FIRST_LOCATION_CHANGE,
 } | {
    type: typeof WALLET.TOGGLE_SIDEBAR,
+} | {
+    type: typeof WALLET.SET_LANGUAGE,
+    language: string
 }

 export const init = (): ThunkAction => (dispatch: Dispatch): void => {
@ -68,6 +71,11 @@ export const toggleSidebar = (): WalletAction => ({
    type: WALLET.TOGGLE_SIDEBAR,
 });

+export const setLanguage = (language: string): WalletAction => ({
+    type: WALLET.SET_LANGUAGE,
+    language,
+});
+
 // This method will be called after each DEVICE.CONNECT action
 // if connected device has different "passphrase_protection" settings than saved instances
 // all saved instances will be removed immediately inside DevicesReducer
--- a/src/actions/constants/wallet.js
+++ b/src/actions/constants/wallet.js
@ -12,4 +12,5 @@ export const HIDE_BETA_DISCLAIMER: 'wallet__hide_beta_disclaimer' = 'wallet__hid

 export const CLEAR_UNAVAILABLE_DEVICE_DATA: 'wallet__clear_unavailable_device_data' = 'wallet__clear_unavailable_device_data';

-export const TOGGLE_SIDEBAR: 'wallet__toggle_sidebar' = 'wallet__toggle_sidebar';
+export const TOGGLE_SIDEBAR: 'wallet__toggle_sidebar' = 'wallet__toggle_sidebar';
+export const SET_LANGUAGE: 'wallet__set_language' = 'wallet__set_language';
--- a/src/reducers/WalletReducer.js
+++ b/src/reducers/WalletReducer.js
@ -13,6 +13,7 @@ import type { Action, RouterLocationState, TrezorDevice } from 'flowtype';
 type State = {
    ready: boolean;
    online: boolean;
+    language: string;
    dropdownOpened: boolean;
    showBetaDisclaimer: boolean;
    showSidebar: boolean;
@ -26,6 +27,7 @@ type State = {
 const initialState: State = {
    ready: false,
    online: navigator.onLine,
+    language: 'en',
    dropdownOpened: false,
    firstLocationChange: true,
    showBetaDisclaimer: false,
@ -119,6 +121,12 @@ export default function wallet(state: State = initialState, action: Action): Sta
                showBetaDisclaimer: false,
            };

+        case WALLET.SET_LANGUAGE:
+            return {
+                ...state,
+                language: action.language,
+            };
+
        default:
            return state;
    }
--- a/src/support/ConnectedIntlProvider.js
+++ b/src/support/ConnectedIntlProvider.js
@ -0,0 +1,49 @@
+/* @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 en from 'react-intl/locale-data/en';
+import de from 'react-intl/locale-data/de';
+
+import messagesEn from '../../translations/en.json';
+import messagesDe from '../../translations/de.json';
+
+addLocaleData([...en, ...de]);
+
+const messages = {
+    en: messagesEn,
+    de: messagesDe,
+};
+
+type OwnProps = {
+    children: React.Node
+}
+
+type StateProps = {
+    locale: string
+}
+
+type Props = StateProps & OwnProps;
+
+const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State): StateProps => ({
+    locale: state.wallet.language,
+});
+
+
+const ReactIntlProvider = ({ children, locale }: Props) => {
+    console.log(locale);
+    console.log(messages);
+    return (
+        <IntlProvider
+            locale={locale}
+            messages={messages[locale]}
+        >
+            {children}
+        </IntlProvider>
+    );
+};
+
+export default connect(mapStateToProps, null)(ReactIntlProvider);
--- a/src/views/index.js
+++ b/src/views/index.js
@ -5,6 +5,7 @@ import { Provider } from 'react-redux';
 import { ConnectedRouter } from 'connected-react-router';

 // general
+import ConnectedIntlProvider from 'support/ConnectedIntlProvider';
 import ErrorBoundary from 'support/ErrorBoundary';
 import ImagesPreloader from 'support/ImagesPreloader';
 import { getPattern } from 'support/routes';
@ -35,34 +36,36 @@ import store, { history } from 'store';

 const App = () => (
    <Provider store={store}>
-        <ConnectedRouter history={history}>
-            <Switch>
-                <Route exact path={getPattern('landing-home')} component={RootView} />
-                <Route exact path={getPattern('landing-bridge')} component={InstallBridge} />
-                <Route exact path={getPattern('landing-import')} component={ImportView} />
-                <Route>
-                    <ErrorBoundary>
-                        <ImagesPreloader />
-                        <WalletContainer>
-                            <Route exact path={getPattern('wallet-settings')} component={WalletSettings} />
-                            <Route exact path={getPattern('wallet-dashboard')} component={WalletDashboard} />
-                            <Route exact path={getPattern('wallet-acquire')} component={WalletAcquire} />
-                            <Route exact path={getPattern('wallet-unreadable')} component={WalletUnreadableDevice} />
-                            <Route exact path={getPattern('wallet-bootloader')} component={WalletBootloader} />
-                            <Route exact path={getPattern('wallet-initialize')} component={WalletInitialize} />
-                            <Route exact path={getPattern('wallet-seedless')} component={WalletSeedless} />
-                            <Route exact path={getPattern('wallet-firmware-update')} component={WalletFirmwareUpdate} />
-                            <Route exact path={getPattern('wallet-device-settings')} component={WalletDeviceSettings} />
-                            <Route exact path={getPattern('wallet-account-summary')} component={AccountSummary} />
-                            <Route path={getPattern('wallet-account-send')} component={AccountSend} />
-                            <Route path={getPattern('wallet-account-send-override')} component={AccountSend} />
-                            <Route path={getPattern('wallet-account-receive')} component={AccountReceive} />
-                            <Route path={getPattern('wallet-account-signverify')} component={AccountSignVerify} />
-                        </WalletContainer>
-                    </ErrorBoundary>
-                </Route>
-            </Switch>
-        </ConnectedRouter>
+        <ConnectedIntlProvider>
+            <ConnectedRouter history={history}>
+                <Switch>
+                    <Route exact path={getPattern('landing-home')} component={RootView} />
+                    <Route exact path={getPattern('landing-bridge')} component={InstallBridge} />
+                    <Route exact path={getPattern('landing-import')} component={ImportView} />
+                    <Route>
+                        <ErrorBoundary>
+                            <ImagesPreloader />
+                            <WalletContainer>
+                                <Route exact path={getPattern('wallet-settings')} component={WalletSettings} />
+                                <Route exact path={getPattern('wallet-dashboard')} component={WalletDashboard} />
+                                <Route exact path={getPattern('wallet-acquire')} component={WalletAcquire} />
+                                <Route exact path={getPattern('wallet-unreadable')} component={WalletUnreadableDevice} />
+                                <Route exact path={getPattern('wallet-bootloader')} component={WalletBootloader} />
+                                <Route exact path={getPattern('wallet-initialize')} component={WalletInitialize} />
+                                <Route exact path={getPattern('wallet-seedless')} component={WalletSeedless} />
+                                <Route exact path={getPattern('wallet-firmware-update')} component={WalletFirmwareUpdate} />
+                                <Route exact path={getPattern('wallet-device-settings')} component={WalletDeviceSettings} />
+                                <Route exact path={getPattern('wallet-account-summary')} component={AccountSummary} />
+                                <Route path={getPattern('wallet-account-send')} component={AccountSend} />
+                                <Route path={getPattern('wallet-account-send-override')} component={AccountSend} />
+                                <Route path={getPattern('wallet-account-receive')} component={AccountReceive} />
+                                <Route path={getPattern('wallet-account-signverify')} component={AccountSignVerify} />
+                            </WalletContainer>
+                        </ErrorBoundary>
+                    </Route>
+                </Switch>
+            </ConnectedRouter>
+        </ConnectedIntlProvider>
    </Provider>
 );

--- a/translations/de.json
+++ b/translations/de.json
@ -0,0 +1,4 @@
+{
+    "dashboard.selectyourcoin.title": "Willkommen bei react-intl",
+    "dashboard.selectyourcoin.body": "Zum Loslegen editiere <code>src/App.js</code>."
+}
--- a/translations/en.json
+++ b/translations/en.json
@ -0,0 +1,4 @@
+{
+    "dashboard.selectyourcoin.title": "Please select your coin EN",
+    "dashboard.selectyourcoin.body": "You will gain access to receiving & sending selected coin"
+}
--- a/webpack/constants.js
+++ b/webpack/constants.js
@ -8,6 +8,7 @@ const constants: Object = Object.freeze({
    BUILD: path.join(ABSOLUTE_BASE, 'build/'),
    PUBLIC: path.join(ABSOLUTE_BASE, 'public/'),
    SRC: path.join(ABSOLUTE_BASE, 'src/'),
+    TRANSLATIONS: path.join(ABSOLUTE_BASE, 'translations/'),
    PORT: 8081,
    INDEX: path.join(ABSOLUTE_BASE, 'src/index.html'),
    TREZOR_CONNECT_ROOT: path.join(ABSOLUTE_BASE, '../trezor-connect/'),
@ -24,10 +25,11 @@ export const TREZOR_CONNECT_FILES: string = path.join(constants.TREZOR_CONNECT_R
 export const {
    BUILD,
    SRC,
+    TRANSLATIONS,
    PORT,
    INDEX,
    PUBLIC,
-}: { BUILD: string, SRC: string, PORT: string, INDEX: string, PUBLIC: string } = constants;
+}: { BUILD: string, SRC: string, TRANSLATIONS: string, PORT: string, INDEX: string, PUBLIC: string } = constants;
 // export const SRC: string = constants.SRC;
 // export const PORT: string = constants.PORT;
 // export const INDEX: string = constants.INDEX;
--- a/webpack/dev.babel.js
+++ b/webpack/dev.babel.js
@ -9,7 +9,7 @@ import WebpackBuildNotifierPlugin from 'webpack-build-notifier';
 // import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';

 import {
-    SRC, BUILD, PORT, PUBLIC,
+    SRC, BUILD, PORT, PUBLIC, TRANSLATIONS,
 } from './constants';

 const gitRevisionPlugin = new GitRevisionPlugin();
@ -79,7 +79,7 @@ module.exports = {
            {
                type: 'javascript/auto',
                test: /\.json/,
-                exclude: /(node_modules)/,
+                exclude: [/(node_modules)/, TRANSLATIONS],
                loader: 'file-loader',
                query: {
                    outputPath: './data',