crude i18n support

src/ui/component/app/index.js

@@ -1,15 +1,16 @@
 import { hot } from 'react-hot-loader/root';
 import { connect } from 'react-redux';
-import { doUpdateBlockHeight, doError } from 'lbry-redux';
+import { doUpdateBlockHeight, doError, SETTINGS } from 'lbry-redux';
 import { doToggleEnhancedLayout } from 'redux/actions/app';
 import { selectUser } from 'lbryinc';
-import { selectThemePath } from 'redux/selectors/settings';
+import { selectThemePath, makeSelectClientSetting } from 'redux/selectors/settings';
 import { selectEnhancedLayout } from 'redux/selectors/app';
 import App from './view';
 
 const select = state => ({
   user: selectUser(state),
   theme: selectThemePath(state),
+  language: makeSelectClientSetting(SETTINGS.LANGUAGE)(state),
   enhancedLayout: selectEnhancedLayout(state),
 });
 

src/ui/component/app/view.jsx

@@ -14,6 +14,7 @@ const TWO_POINT_FIVE_MINUTES = 1000 * 60 * 2.5;
 type Props = {
   alertError: (string | {}) => void,
   pageTitle: ?string,
+  language: string,
   theme: string,
   updateBlockHeight: () => void,
   toggleEnhancedLayout: () => void,
@@ -21,7 +22,8 @@ type Props = {
 };
 
 class App extends React.PureComponent<Props> {
-  componentWillMount() {
+  // eslint-disable-next-line
+  UNSAFE_componentWillMount() {
     const { alertError, theme } = this.props;
 
     // TODO: create type for this object
@@ -64,12 +66,12 @@ class App extends React.PureComponent<Props> {
   enhance: ?any;
 
   render() {
-    const { enhancedLayout } = this.props;
+    const { enhancedLayout, language } = this.props;
 
     return (
       <div id="window" onContextMenu={e => openContextMenu(e)}>
-        <Header />
-        <SideBar />
+        <Header language={language} />
+        <SideBar language={language} />
 
         <div className="main-wrapper">
           <Router />

src/ui/index.jsx

@@ -13,7 +13,7 @@ import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { doConditionalAuthNavigate, doDaemonReady, doAutoUpdate, doOpenModal, doHideModal } from 'redux/actions/app';
 import { Lbry, doToast, isURIValid, setSearchApi } from 'lbry-redux';
-import { doDownloadLanguages, doUpdateIsNightAsync } from 'redux/actions/settings';
+import { doInitLanguage, doUpdateIsNightAsync } from 'redux/actions/settings';
 import { doAuthenticate, Lbryio, rewards, doBlackListedOutpointsSubscribe } from 'lbryinc';
 import { store, history } from 'store';
 import pjson from 'package.json';
@@ -211,7 +211,7 @@ const init = () => {
   app.store.dispatch(doUpdateIsNightAsync());
   // @endif
 
-  app.store.dispatch(doDownloadLanguages());
+  app.store.dispatch(doInitLanguage());
   app.store.dispatch(doBlackListedOutpointsSubscribe());
 
   function onDaemonReady() {

src/ui/page/settings/index.js

@@ -8,7 +8,6 @@ import {
   selectLanguages,
   selectosNotificationsEnabled,
 } from 'redux/selectors/settings';
-import { selectCurrentLanguage } from 'redux/selectors/app';
 import { doWalletStatus, selectWalletIsEncrypted } from 'lbry-redux';
 import SettingsPage from './view';
 
@@ -19,7 +18,7 @@ const select = state => ({
   instantPurchaseMax: makeSelectClientSetting(settings.INSTANT_PURCHASE_MAX)(state),
   currentTheme: makeSelectClientSetting(settings.THEME)(state),
   themes: makeSelectClientSetting(settings.THEMES)(state),
-  language: selectCurrentLanguage(state),
+  currentLanguage: makeSelectClientSetting(settings.LANGUAGE)(state),
   languages: selectLanguages(state),
   automaticDarkModeEnabled: makeSelectClientSetting(settings.AUTOMATIC_DARK_MODE_ENABLED)(state),
   autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state),

src/ui/page/settings/view.jsx

@@ -31,11 +31,14 @@ type Props = {
   showNsfw: boolean,
   instantPurchaseEnabled: boolean,
   instantPurchaseMax: Price,
+  currentLanguage: string,
+  languages: {},
   currentTheme: string,
   themes: Array<string>,
   automaticDarkModeEnabled: boolean,
   autoplay: boolean,
   autoDownload: boolean,
+  changeLanguage: string => void,
   encryptWallet: () => void,
   decryptWallet: () => void,
   updateWalletStatus: () => void,
@@ -60,6 +63,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
     (this: any).onInstantPurchaseMaxChange = this.onInstantPurchaseMaxChange.bind(this);
     (this: any).onThemeChange = this.onThemeChange.bind(this);
     (this: any).onAutomaticDarkModeChange = this.onAutomaticDarkModeChange.bind(this);
+    (this: any).onLanguageChange = this.onLanguageChange.bind(this);
     (this: any).clearCache = this.clearCache.bind(this);
   }
 
@@ -86,6 +90,11 @@ class SettingsPage extends React.PureComponent<Props, State> {
     this.props.setClientSetting(SETTINGS.THEME, value);
   }
 
+  onLanguageChange(event: SyntheticInputEvent<*>) {
+    const { value } = event.target;
+    this.props.changeLanguage(value);
+  }
+
   onAutomaticDarkModeChange(value: boolean) {
     this.props.setClientSetting(SETTINGS.AUTOMATIC_DARK_MODE_ENABLED, value);
   }
@@ -131,6 +140,8 @@ class SettingsPage extends React.PureComponent<Props, State> {
       instantPurchaseEnabled,
       instantPurchaseMax,
       currentTheme,
+      currentLanguage,
+      languages,
       themes,
       automaticDarkModeEnabled,
       autoplay,
@@ -393,6 +404,23 @@ class SettingsPage extends React.PureComponent<Props, State> {
                     'Autoplay video and audio files when navigating to a file, as well as the next related item when a file finishes playing.'
                   )}
                 />
+
+                <FormField
+                  name="language_select"
+                  type="select"
+                  label={__('Language')}
+                  onChange={this.onLanguageChange}
+                  value={currentLanguage}
+                  helper={__(
+                    'Multi-language support is brand new and incomplete. Switching your language may have unintended consequences.'
+                  )}
+                >
+                  {Object.keys(languages).map(language => (
+                    <option key={language} value={language}>
+                      {languages[language]}
+                    </option>
+                  ))}
+                </FormField>
               </Form>
             </section>
 

src/ui/redux/actions/settings.js

@@ -3,6 +3,7 @@ import fs from 'fs';
 import http from 'http';
 // @endif
 import { Lbry, ACTIONS, SETTINGS } from 'lbry-redux';
+import { makeSelectClientSetting } from 'redux/selectors/settings';
 import moment from 'moment';
 import analytics from 'analytics';
 
@@ -133,33 +134,10 @@ export function doDownloadLanguage(langFile) {
   };
 }
 
-export function doDownloadLanguages() {
-  return () => {
-    // temporarily disable i18n so I can get a working build out -- Jeremy
-    // if (!fs.existsSync(i18n.directory)) {
-    //   fs.mkdirSync(i18n.directory);
-    // }
-    //
-    // function checkStatus(response) {
-    //   if (response.status >= 200 && response.status < 300) {
-    //     return response;
-    //   }
-    //   throw new Error(
-    //     __("The list of available languages could not be retrieved.")
-    //   );
-    // }
-    //
-    // function parseJSON(response) {
-    //   return response.json();
-    // }
-    //
-    // return fetch("http://i18n.lbry.com")
-    //   .then(checkStatus)
-    //   .then(parseJSON)
-    //   .then(files => {
-    //     const actions = files.map(doDownloadLanguage);
-    //     dispatch(batchActions(...actions));
-    //   });
+export function doInitLanguage() {
+  return (dispatch, getState) => {
+    const language = makeSelectClientSetting(SETTINGS.LANGUAGE)(getState());
+    i18n.setLocale(language);
   };
 }
 

src/ui/redux/reducers/settings.js

@@ -32,7 +32,7 @@ const defaultState = {
     [SETTINGS.OS_NOTIFICATIONS_ENABLED]: Boolean(getLocalStorageSetting(SETTINGS.OS_NOTIFICATIONS_ENABLED, true)),
   },
   isNight: false,
-  languages: {},
+  languages: { en: 'English', pl: 'Polish' }, // temporarily hard code these so we can advance i18n testing
   daemonSettings: {},
 };
 

src/ui/redux/selectors/app.js

@@ -1,8 +1,5 @@
 import * as SETTINGS from 'constants/settings';
-import * as PAGES from 'constants/pages';
-import * as ICONS from 'constants/icons';
 import { createSelector } from 'reselect';
-import { selectCurrentPage, selectHistoryStack } from 'lbry-redux';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
 
 export const selectState = state => state.app || {};
@@ -100,11 +97,6 @@ export const selectDaemonVersionMatched = createSelector(
   state => state.daemonVersionMatched
 );
 
-export const selectCurrentLanguage = createSelector(
-  selectState,
-  () => i18n.getLocale() || 'en'
-);
-
 export const selectVolume = createSelector(
   selectState,
   state => state.volume

src/ui/redux/selectors/settings.js

@@ -24,7 +24,7 @@ export const selectShowNsfw = makeSelectClientSetting(SETTINGS.SHOW_NSFW);
 
 export const selectLanguages = createSelector(
   selectState,
-  state => state.languages || {}
+  state => state.languages
 );
 
 export const selectTheme = makeSelectClientSetting(SETTINGS.THEME);