diff options
| author | Andrej Mihajlov <and@mullvad.net> | 2018-06-12 16:22:45 +0200 |
|---|---|---|
| committer | Andrej Mihajlov <and@mullvad.net> | 2018-06-12 16:22:45 +0200 |
| commit | a7da96bc03b3705c4d99bbc55e9f1a04f2030c25 (patch) | |
| tree | 25f9e6012bad2efc917342450f4ae055deb6fe6e /app/components | |
| parent | 55b5d390bc377b9ff6cdf5a0b1641ea2fae23719 (diff) | |
| parent | 247e9807b25ac5033ab5cfa55cc40a5201b21523 (diff) | |
| download | mullvadvpn-a7da96bc03b3705c4d99bbc55e9f1a04f2030c25.tar.xz mullvadvpn-a7da96bc03b3705c4d99bbc55e9f1a04f2030c25.zip | |
Merge branch 'refresh-expiry-time'
Diffstat (limited to 'app/components')
| -rw-r--r-- | app/components/Account.js | 60 |
1 files changed, 53 insertions, 7 deletions
diff --git a/app/components/Account.js b/app/components/Account.js index b4eef86712..8639d0fe42 100644 --- a/app/components/Account.js +++ b/app/components/Account.js @@ -1,28 +1,60 @@ // @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'; import styles from './AccountStyles'; import Img from './Img'; import { formatAccount } from '../lib/formatters'; +import AppVisiblityObserver from '../lib/app-visibility'; -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, + }; + + _appVisibilityObserver: ?AppVisiblityObserver; + + _isMounted = false; + + componentDidMount() { + this._isMounted = true; + this._refreshAccountExpiry(); + + this._appVisibilityObserver = new AppVisiblityObserver((isVisible) => { + if (isVisible) { + this._refreshAccountExpiry(); + } + }); + } + + componentWillUnmount() { + this._isMounted = false; + + if (this._appVisibilityObserver) { + this._appVisibilityObserver.dispose(); + } + } 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 +113,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 }); + } + } } |
