Merge pull request #505 from blockchain/feature/translations

Feature/translations

packages/blockchain-wallet-v4-frontend/src/components/DropdownLanguage/index.js

@@ -19,23 +19,23 @@ class DropdownLanguageContainer extends React.PureComponent {
   }
 
   render () {
-    const { currentCulture, languages } = this.props
+    const { currentLanguage, languages } = this.props
     const languageList = languages.map((lang) => {
       return {
         text: lang.name,
-        value: lang.cultureCode,
+        value: lang.language,
         language: lang.language
       }
     })
 
     return (
-      <SimpleDropdown color='white' items={languageList} selectedValue={currentCulture} callback={(selectedLanguage) => this.handleClick(selectedLanguage)} />
+      <SimpleDropdown color='white' items={languageList} selectedValue={currentLanguage} callback={(selectedLanguage) => this.handleClick(selectedLanguage)} />
     )
   }
 }
 
 const mapStateToProps = (state) => ({
-  currentCulture: selectors.preferences.getCulture(state),
+  currentLanguage: selectors.preferences.getLanguage(state),
   languages: languageService.languagesSortedByName
 })
 

packages/blockchain-wallet-v4-frontend/src/components/Form/SelectBoxLanguages/index.js

@@ -9,16 +9,17 @@ import * as languageService from 'services/LanguageService'
 
 class SelectBoxLanguages extends React.PureComponent {
   render () {
-    const { languages, ...rest } = this.props
+    const { language, languages, ...rest } = this.props
     const items = [...map(renameKeys({ name: 'text', language: 'value' }))(languages)]
     const elements = [{ group: '', items }]
+    rest.input.value = language
 
     return <SelectBox elements={elements} {...rest} />
   }
 }
 
 const mapStateToProps = (state, ownProps) => ({
-  language: selectors.core.settings.getLanguage(state),
+  language: selectors.preferences.getLanguage(state),
   languages: languageService.languagesSortedByName
 })
 

packages/blockchain-wallet-v4-frontend/src/data/preferences/sagaRegister.js

@@ -0,0 +1,11 @@
+import { takeLatest } from 'redux-saga/effects'
+import * as AT from './actionTypes'
+import sagas from './sagas'
+
+export default () => {
+  const preferencesSagas = sagas()
+
+  return function * () {
+    yield takeLatest(AT.SET_LANGUAGE, preferencesSagas.setLanguage)
+  }
+}

packages/blockchain-wallet-v4-frontend/src/data/preferences/sagas.js

@@ -0,0 +1,20 @@
+import { put } from 'redux-saga/effects'
+import * as actions from '../actions.js'
+import * as C from 'services/AlertService'
+
+export default () => {
+  const logLocation = 'preferences/sagas'
+
+  const setLanguage = function * () {
+    try {
+      yield put(actions.alerts.displaySuccess(C.LANGUAGE_UPDATE_SUCCESS))
+    } catch (e) {
+      yield put(actions.logs.logErrorMessage(logLocation, 'updateLanguage', e))
+      yield put(actions.alerts.displayError(C.LANGUAGE_UPDATE_ERROR))
+    }
+  }
+
+  return {
+    setLanguage
+  }
+}

packages/blockchain-wallet-v4-frontend/src/data/rootSaga.js

@@ -8,6 +8,7 @@ import alerts from './alerts/sagaRegister'
 import auth from './auth/sagaRegister'
 import components from './components/sagaRegister'
 import modules from './modules/sagaRegister'
+import preferences from './preferences/sagaRegister'
 import goals from './goals/sagaRegister'
 import wallet from './wallet/sagaRegister'
 
@@ -39,6 +40,7 @@ export default function * ({ api, btcSocket, ethSocket, bchSocket, options }) {
     fork(auth({ api, coreSagas })),
     fork(components({ api, coreSagas })),
     fork(modules({ coreSagas })),
+    fork(preferences()),
     fork(goals({ coreSagas })),
     fork(wallet({ coreSagas })),
     fork(websocketBitcoinFactory({ api, btcSocket })),

packages/blockchain-wallet-v4-frontend/src/data/sagas.js

@@ -6,6 +6,7 @@ import { coinifyService } from 'services/CoinifyService'
 import * as auth from './auth/sagas'
 import * as components from './components/sagas'
 import * as modules from './modules/sagas'
+import * as preferences from './preferences/sagas'
 import * as wallet from './wallet/sagas'
 
 const core = coreSagasFactory({ api, socket, sfoxService, coinifyService })
@@ -14,6 +15,7 @@ export {
   auth,
   components,
   modules,
+  preferences,
   core,
   wallet
 }

packages/blockchain-wallet-v4-frontend/src/scenes/Settings/Preferences/WalletLanguage/Settings/index.js

@@ -15,7 +15,7 @@ class SettingsContainer extends React.PureComponent {
   componentWillReceiveProps (nextProps) {
     const { language, newLanguage } = this.props
     if (!isNil(nextProps.newLanguage) && !equals(language, nextProps.newLanguage) && !equals(newLanguage, nextProps.newLanguage)) {
-      this.props.settingsActions.updateLanguage(nextProps.newLanguage)
+      this.props.preferencesActions.setLanguage(nextProps.newLanguage)
     }
   }
 
@@ -29,7 +29,7 @@ const mapStateToProps = (state) => ({
 })
 
 const mapDispatchToProps = (dispatch) => ({
-  settingsActions: bindActionCreators(actions.modules.settings, dispatch),
+  preferencesActions: bindActionCreators(actions.preferences, dispatch),
   formActions: bindActionCreators(actions.form, dispatch)
 })
 

packages/blockchain-wallet-v4-frontend/src/scenes/Settings/Preferences/WalletLanguage/index.js

@@ -1,21 +1,14 @@
 import React from 'react'
 import { connect } from 'react-redux'
 
-import Error from './template.error'
-import Loading from './template.loading'
-import Success from './template.success'
+import Template from './template'
 import { getData } from './selectors'
 
 class WalletLanguageContainer extends React.PureComponent {
   render () {
     const { data } = this.props
 
-    return data.cata({
-      Success: (value) => <Success language={value} />,
-      Failure: (message) => <Error message={message} />,
-      Loading: () => <Loading />,
-      NotAsked: () => <Loading />
-    })
+    return <Template language={data.locale} />
   }
 }
 

packages/blockchain-wallet-v4-frontend/src/scenes/Settings/Preferences/WalletLanguage/selectors.js

@@ -1,3 +1,10 @@
 import { selectors } from 'data'
+import { createDeepEqualSelector } from 'services/ReselectHelper'
 
-export const getData = state => selectors.core.settings.getLanguage(state)
+export const getData = (state) => createDeepEqualSelector(
+  [selectors.preferences.getLanguage],
+  (language) => {
+    const locale = language || 'en'
+    return { locale }
+  }
+)(state)