address review feedback

src/ui/component/app/index.js

@@ -1,16 +1,15 @@
 import { hot } from 'react-hot-loader/root';
 import { connect } from 'react-redux';
-import { doUpdateBlockHeight, doError, SETTINGS } from 'lbry-redux';
+import { doUpdateBlockHeight, doError } from 'lbry-redux';
 import { doToggleEnhancedLayout } from 'redux/actions/app';
 import { selectUser } from 'lbryinc';
-import { selectThemePath, makeSelectClientSetting } from 'redux/selectors/settings';
+import { selectThemePath } 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

@@ -22,9 +22,8 @@ type Props = {
 };
 
 class App extends React.PureComponent<Props> {
-  // eslint-disable-next-line
-  UNSAFE_componentWillMount() {
-    const { alertError, theme } = this.props;
+  componentDidMount() {
+    const { updateBlockHeight, toggleEnhancedLayout, alertError, theme } = this.props;
 
     // TODO: create type for this object
     // it lives in jsonrpc.js
@@ -34,10 +33,6 @@ class App extends React.PureComponent<Props> {
 
     // $FlowFixMe
     document.documentElement.setAttribute('data-mode', theme);
-  }
-
-  componentDidMount() {
-    const { updateBlockHeight, toggleEnhancedLayout } = this.props;
 
     ReactModal.setAppElement('#window'); // fuck this
 
@@ -66,12 +61,12 @@ class App extends React.PureComponent<Props> {
   enhance: ?any;
 
   render() {
-    const { enhancedLayout, language } = this.props;
+    const { enhancedLayout } = this.props;
 
     return (
       <div id="window" onContextMenu={e => openContextMenu(e)}>
-        <Header language={language} />
-        <SideBar language={language} />
+        <Header />
+        <SideBar />
 
         <div className="main-wrapper">
           <Router />

src/ui/component/header/index.js

@@ -1,13 +1,15 @@
 import { connect } from 'react-redux';
-import { selectBalance } from 'lbry-redux';
+import { selectBalance, SETTINGS } from 'lbry-redux';
 import { formatCredits } from 'util/format-credits';
 import { selectIsUpgradeAvailable, selectAutoUpdateDownloaded } from 'redux/selectors/app';
 import { doDownloadUpgradeRequested } from 'redux/actions/app';
 import Header from './view';
+import { makeSelectClientSetting } from 'redux/selectors/settings';
 
 const select = state => ({
   autoUpdateDownloaded: selectAutoUpdateDownloaded(state),
   balance: selectBalance(state),
+  language: makeSelectClientSetting(SETTINGS.LANGUAGE)(state), // trigger redraw on language change
   isUpgradeAvailable: selectIsUpgradeAvailable(state),
   roundedBalance: formatCredits(selectBalance(state) || 0, 2),
 });

src/ui/component/sideBar/index.js

@@ -2,9 +2,12 @@ import { connect } from 'react-redux';
 import { selectUnreadAmount } from 'redux/selectors/subscriptions';
 import { selectShouldShowInviteGuide } from 'redux/selectors/app';
 import SideBar from './view';
+import { makeSelectClientSetting } from 'redux/selectors/settings';
+import { SETTINGS } from 'lbry-redux';
 
 const select = state => ({
   unreadSubscriptionTotal: selectUnreadAmount(state),
+  language: makeSelectClientSetting(SETTINGS.LANGUAGE)(state), // trigger redraw on language change
   shouldShowInviteGuide: selectShouldShowInviteGuide(state),
 });