diff --git a/ui/js/actions/app.js b/ui/js/actions/app.js index 35049d435..62eaeb5e1 100644 --- a/ui/js/actions/app.js +++ b/ui/js/actions/app.js @@ -248,3 +248,11 @@ export function doClearCache() { return Promise.resolve(); }; } + +export function doChangeLanguage(newLanguage) { + app.i18n.setLocale(newLanguage); + return { + type: types.CHANGE_LANGUAGE, + data: { newLanguage: newLanguage } + } +} diff --git a/ui/js/constants/action_types.js b/ui/js/constants/action_types.js index 216c84762..32f7b3ef3 100644 --- a/ui/js/constants/action_types.js +++ b/ui/js/constants/action_types.js @@ -97,3 +97,6 @@ export const CLAIM_REWARD_STARTED = "CLAIM_REWARD_STARTED"; export const CLAIM_REWARD_SUCCESS = "CLAIM_REWARD_SUCCESS"; export const CLAIM_REWARD_FAILURE = "CLAIM_REWARD_FAILURE"; export const CLAIM_REWARD_CLEAR_ERROR = "CLAIM_REWARD_CLEAR_ERROR"; + +//Language +export const LANGUAGE_CHANGED = "LANGUAGE_CHANGED"; \ No newline at end of file diff --git a/ui/js/page/settings/index.js b/ui/js/page/settings/index.js index c74b918af..bd41c6844 100644 --- a/ui/js/page/settings/index.js +++ b/ui/js/page/settings/index.js @@ -1,19 +1,21 @@ import React from "react"; import { connect } from "react-redux"; import { doClearCache } from "actions/app"; -import { doSetDaemonSetting, doSetClientSetting } from "actions/settings"; -import { selectDaemonSettings, selectShowNsfw } from "selectors/settings"; +import { doSetDaemonSetting, doSetClientSetting, doChangeLanguage } from "actions/settings"; +import { selectDaemonSettings, selectShowNsfw, selectCurrentLanguage } from "selectors/settings"; import SettingsPage from "./view"; const select = state => ({ daemonSettings: selectDaemonSettings(state), showNsfw: selectShowNsfw(state), + language: selectCurrentLanguage(state), }); const perform = dispatch => ({ setDaemonSetting: (key, value) => dispatch(doSetDaemonSetting(key, value)), clearCache: () => dispatch(doClearCache()), setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)), + changeLanguage: (newLanguage) => dispatch(doChangeLanguage), }); export default connect(select, perform)(SettingsPage); diff --git a/ui/js/page/settings/view.jsx b/ui/js/page/settings/view.jsx index 4530f0b51..dc4d55d60 100644 --- a/ui/js/page/settings/view.jsx +++ b/ui/js/page/settings/view.jsx @@ -85,10 +85,8 @@ class SettingsPage extends React.PureComponent { this.props.setClientSetting("showNsfw", event.target.checked); } - onLanguageChange(language) { - lbry.setClientSetting('language', language); - window.app.i18n.setLocale(language); - this.setState({language: language}) + onLanguageChange(e) { + this.props.changeLanguage(e.target.value) } // onLanguageChange(language) { @@ -168,7 +166,7 @@ class SettingsPage extends React.PureComponent { name="language" label={__("English")} onChange={() => { - this.onLanguageChange("en"); + this.onLanguageChange.bind(this); }} defaultChecked={this.state.language == "en"} /> @@ -181,7 +179,7 @@ class SettingsPage extends React.PureComponent { key={dLang} label={window.app.i18n.resLang(dLang)} onChange={() => { - this.onLanguageChange(dLang); + this.onLanguageChange.bind(this); }} defaultChecked={this.state.language == dLang} /> diff --git a/ui/js/reducers/settings.js b/ui/js/reducers/settings.js index 4b78284cc..21cb2506b 100644 --- a/ui/js/reducers/settings.js +++ b/ui/js/reducers/settings.js @@ -5,6 +5,7 @@ const reducers = {}; const defaultState = { clientSettings: { showNsfw: lbry.getClientSetting("showNsfw"), + language: lbry.getClientSetting("language"), }, }; diff --git a/ui/js/selectors/app.js b/ui/js/selectors/app.js index f6acd6d07..d9b743d2a 100644 --- a/ui/js/selectors/app.js +++ b/ui/js/selectors/app.js @@ -191,3 +191,8 @@ export const selectBadgeNumber = createSelector( _selectState, state => state.badgeNumber ); + +export const selectCurrentLanguage = createSelector( + _selectState, + (state) => state.currentLanguage || "en" +) \ No newline at end of file