3 files changed, 30 insertions, 21 deletions

diff --git a/app/components/Account.js b/app/components/Account.js
index 2edf277fa4..dd4994c76c 100644
--- a/app/components/Account.js
+++ b/app/components/Account.js
@@ -12,7 +12,7 @@ import { formatAccount } from '../lib/formatters';
 
 import type { AccountToken } from '../lib/daemon-rpc';
 
-export type AccountProps = {
+type Props = {
   accountToken: AccountToken,
   accountExpiry: string,
   expiryLocale: string,
@@ -28,7 +28,7 @@ type State = {
   showAccountTokenCopiedMessage: boolean,
 };
 
-export default class Account extends Component<AccountProps, State> {
+export default class Account extends Component<Props, State> {
   state = {
     isRefreshingExpiry: false,
     showAccountTokenCopiedMessage: false,
@@ -119,7 +119,7 @@ export default class Account extends Component<AccountProps, State> {
                     <Text style={styles.account__row_label}>Paid until</Text>
                     {isOutOfTime ? (
                       <Text style={styles.account__out_of_time} testName="account__out_of_time">
-                        OUT OF TIME
+                        {'OUT OF TIME'}
                       </Text>
                     ) : (
                       <Text style={styles.account__row_value}>{formattedExpiry}</Text>
diff --git a/app/components/Connect.js b/app/components/Connect.js
index 037ab02495..cd27b33719 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -15,7 +15,7 @@ import Map from './Map';
 import type { HeaderBarStyle } from './HeaderBar';
 import type { ConnectionReduxState } from '../redux/connection/reducers';
 
-export type ConnectProps = {
+type Props = {
   connection: ConnectionReduxState,
   accountExpiry: string,
   selectedRelayName: string,
@@ -25,14 +25,15 @@ export type ConnectProps = {
   onCopyIP: () => void,
   onDisconnect: () => void,
   onExternalLink: (type: string) => void,
+  updateAccountExpiry: () => Promise<void>,
 };
 
-type ConnectState = {
+type State = {
   showCopyIPMessage: boolean,
   mapOffset: [number, number],
 };
 
-export default class Connect extends Component<ConnectProps, ConnectState> {
+export default class Connect extends Component<Props, State> {
   state = {
     showCopyIPMessage: false,
     mapOffset: [0, 0],
@@ -40,7 +41,7 @@ export default class Connect extends Component<ConnectProps, ConnectState> {
 
   _copyTimer: ?TimeoutID;
 
-  shouldComponentUpdate(nextProps: ConnectProps, nextState: ConnectState) {
+  shouldComponentUpdate(nextProps: Props, nextState: State) {
     const { connection: prevConnection, ...otherPrevProps } = this.props;
     const { connection: nextConnection, ...otherNextProps } = nextProps;
 
@@ -56,6 +57,10 @@ export default class Connect extends Component<ConnectProps, ConnectState> {
     );
   }
 
+  componentDidMount() {
+    this.props.updateAccountExpiry();
+  }
+
   componentWillUnmount() {
     if (this._copyTimer) {
       clearTimeout(this._copyTimer);
diff --git a/app/components/Settings.js b/app/components/Settings.js
index 4a8784fe0e..c447940338 100644
--- a/app/components/Settings.js
+++ b/app/components/Settings.js
@@ -11,13 +11,12 @@ import CustomScrollbars from './CustomScrollbars';
 import styles from './SettingsStyles';
 import Img from './Img';
 
-import type { AccountReduxState } from '../redux/account/reducers';
-import type { SettingsReduxState } from '../redux/settings/reducers';
+import type { LoginState } from '../redux/account/reducers';
 
-export type SettingsProps = {
-  account: AccountReduxState,
-  settings: SettingsReduxState,
-  version: string,
+type Props = {
+  loginState: LoginState,
+  accountExpiry: ?string,
+  appVersion: string,
   onQuit: () => void,
   onClose: () => void,
   onViewAccount: () => void,
@@ -25,9 +24,14 @@ export type SettingsProps = {
   onViewPreferences: () => void,
   onViewAdvancedSettings: () => void,
   onExternalLink: (type: string) => void,
+  updateAccountExpiry: () => Promise<void>,
 };
 
-export default class Settings extends Component<SettingsProps> {
+export default class Settings extends Component<Props> {
+  componentDidMount() {
+    this.props.updateAccountExpiry();
+  }
+
   render() {
     return (
       <Layout>
@@ -60,17 +64,17 @@ export default class Settings extends Component<SettingsProps> {
   }
 
   _renderTopButtons() {
-    const isLoggedIn = this.props.account.status === 'ok';
+    const isLoggedIn = this.props.loginState === 'ok';
     if (!isLoggedIn) {
       return null;
     }
 
-    let isOutOfTime = false,
-      formattedExpiry = '';
-    const expiryIso = this.props.account.expiry;
+    let isOutOfTime = false;
+    let formattedExpiry = '';
 
+    const expiryIso = this.props.accountExpiry;
     if (isLoggedIn && expiryIso) {
-      const expiry = moment(this.props.account.expiry);
+      const expiry = moment(expiryIso);
       isOutOfTime = expiry.isSameOrBefore(moment());
       formattedExpiry = (expiry.fromNow(true) + ' left').toUpperCase();
     }
@@ -86,7 +90,7 @@ export default class Settings extends Component<SettingsProps> {
               <Cell.SubText
                 testName="settings__account_paid_until_subtext"
                 style={styles.settings__account_paid_until_Label__error}>
-                OUT OF TIME
+                {'OUT OF TIME'}
               </Cell.SubText>
               <Img height={12} width={7} source="icon-chevron" />
             </Cell.CellButton>
@@ -136,7 +140,7 @@ export default class Settings extends Component<SettingsProps> {
     // the version in package.json has to be semver, but we use a YEAR.release-channel
     // version scheme. in package.json we thus have to write YEAR.release.X-channel and
     // this function is responsible for removing .X part.
-    return this.props.version
+    return this.props.appVersion
       .replace('.0-', '-') // remove the .0 in 2018.1.0-beta9
       .replace(/\.0$/, ''); // remove the .0 in 2018.1.0
   }