Update account expiry when showing the account details

2 files changed, 48 insertions, 9 deletions

diff --git a/app/components/Account.js b/app/components/Account.js
index b4eef86712..74c7d99629 100644
--- a/app/components/Account.js
+++ b/app/components/Account.js
@@ -1,6 +1,6 @@
 // @flow
 import moment from 'moment';
-import React from 'react';
+import * as React from 'react';
 import { Component, Text, View } from 'reactxp';
 import { Button, RedButton, GreenButton, Label } from './styled';
 import { Layout, Container } from './Layout';
@@ -8,21 +8,40 @@ import styles from './AccountStyles';
 import Img from './Img';
 import { formatAccount } from '../lib/formatters';
 
-import type { AccountReduxState } from '../redux/account/reducers';
+import type { AccountToken } from '../lib/ipc-facade';
 
 export type AccountProps = {
-  account: AccountReduxState,
+  accountToken: AccountToken,
+  accountExpiry: string,
+  updateAccountExpiry: () => Promise<void>,
   onLogout: () => void,
   onClose: () => void,
   onBuyMore: () => void,
 };
 
-export default class Account extends Component {
-  props: AccountProps;
+export type AccountState = {
+  isRefreshingExpiry: boolean,
+};
+
+export default class Account extends Component<AccountProps, AccountState> {
+  state = {
+    isRefreshingExpiry: false,
+  };
+
+  _isMounted = false;
+
+  componentDidMount() {
+    this._isMounted = true;
+    this._refreshAccountExpiry();
+  }
+
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
 
   render() {
-    const expiry = moment(this.props.account.expiry);
-    const formattedAccountToken = formatAccount(this.props.account.accountToken || '');
+    const expiry = moment(this.props.accountExpiry);
+    const formattedAccountToken = formatAccount(this.props.accountToken || '');
     const formattedExpiry = expiry.format('hA, D MMMM YYYY').toUpperCase();
     const isOutOfTime = expiry.isSameOrBefore(moment());
 
@@ -81,4 +100,18 @@ export default class Account extends Component {
       </Layout>
     );
   }
+
+  async _refreshAccountExpiry() {
+    this.setState({ isRefreshingExpiry: true });
+
+    try {
+      await this.props.updateAccountExpiry();
+    } catch (e) {
+      // TODO: Report the error to user
+    }
+
+    if (this._isMounted) {
+      this.setState({ isRefreshingExpiry: false });
+    }
+  }
 }
diff --git a/app/containers/AccountPage.js b/app/containers/AccountPage.js
index 210ad4aaeb..1c54167b50 100644
--- a/app/containers/AccountPage.js
+++ b/app/containers/AccountPage.js
@@ -11,13 +11,19 @@ import { openLink } from '../lib/platform';
 import type { ReduxState, ReduxDispatch } from '../redux/store';
 import type { SharedRouteProps } from '../routes';
 
-const mapStateToProps = (state: ReduxState) => state;
+const mapStateToProps = (state: ReduxState) => ({
+  accountToken: state.account.accountToken,
+  accountExpiry: state.account.expiry,
+});
 const mapDispatchToProps = (dispatch: ReduxDispatch, props: SharedRouteProps) => {
+  const { backend } = props;
   const { push: pushHistory } = bindActionCreators({ push }, dispatch);
   const { logout } = bindActionCreators(accountActions, dispatch);
+
   return {
+    updateAccountExpiry: () => backend.updateAccountExpiry(),
     onLogout: () => {
-      logout(props.backend);
+      logout(backend);
     },
     onClose: () => {
       pushHistory('/settings');