Refactor code

5 files changed, 37 insertions, 33 deletions

diff --git a/gui/src/renderer/components/Account.tsx b/gui/src/renderer/components/Account.tsx
index aaa3b637c9..7864bfa0da 100644
--- a/gui/src/renderer/components/Account.tsx
+++ b/gui/src/renderer/components/Account.tsx
@@ -1,7 +1,7 @@
-import moment from 'moment';
 import * as React from 'react';
 import { Component, Text, View } from 'reactxp';
 import { pgettext } from '../../shared/gettext';
+import AccountExpiry from '../lib/account-expiry';
 import styles from './AccountStyles';
 import * as AppButton from './AppButton';
 import ClipboardLabel from './ClipboardLabel';
@@ -85,33 +85,21 @@ export default class Account extends Component<IProps> {
 }
 
 function FormattedAccountExpiry(props: { expiry?: string; locale: string }) {
-  if (!props.expiry) {
+  if (props.expiry) {
+    const expiry = new AccountExpiry(props.expiry, props.locale);
+
+    if (expiry.hasExpired()) {
+      return (
+        <Text style={styles.account__out_of_time}>{pgettext('account-view', 'OUT OF TIME')}</Text>
+      );
+    } else {
+      return <Text style={styles.account__row_value}>{expiry.formattedDate()}</Text>;
+    }
+  } else {
     return (
       <Text style={styles.account__row_value}>
         {pgettext('account-view', 'Currently unavailable')}
       </Text>
     );
   }
-
-  const expiry = moment(props.expiry);
-
-  if (expiry.isSameOrBefore(moment())) {
-    return (
-      <Text style={styles.account__out_of_time}>{pgettext('account-view', 'OUT OF TIME')}</Text>
-    );
-  }
-
-  const formatOptions = {
-    day: 'numeric',
-    month: 'long',
-    year: 'numeric',
-    hour: 'numeric',
-    minute: 'numeric',
-  };
-
-  return (
-    <Text style={styles.account__row_value}>
-      {expiry.toDate().toLocaleString(props.locale, formatOptions)}
-    </Text>
-  );
 }
diff --git a/gui/src/renderer/components/NotificationArea.tsx b/gui/src/renderer/components/NotificationArea.tsx
index 543ba90edf..15c5786bc2 100644
--- a/gui/src/renderer/components/NotificationArea.tsx
+++ b/gui/src/renderer/components/NotificationArea.tsx
@@ -150,7 +150,14 @@ export default class NotificationArea extends Component<IProps, State> {
           };
         }
 
-        if (accountExpiry && accountExpiry.willHaveExpiredIn(moment().add(3, 'days'))) {
+        if (
+          accountExpiry &&
+          accountExpiry.willHaveExpiredAt(
+            moment()
+              .add(3, 'days')
+              .toDate(),
+          )
+        ) {
           return {
             visible: true,
             type: 'expires-soon',
diff --git a/gui/src/renderer/components/Settings.tsx b/gui/src/renderer/components/Settings.tsx
index 610de163af..146cfa05b7 100644
--- a/gui/src/renderer/components/Settings.tsx
+++ b/gui/src/renderer/components/Settings.tsx
@@ -22,6 +22,7 @@ import { LoginState } from '../redux/account/reducers';
 export interface IProps {
   loginState: LoginState;
   accountExpiry?: string;
+  expiryLocale: string;
   appVersion: string;
   consistentVersion: boolean;
   upToDateVersion: boolean;
@@ -88,7 +89,9 @@ export default class Settings extends Component<IProps> {
       return null;
     }
 
-    const expiry = this.props.accountExpiry ? new AccountExpiry(this.props.accountExpiry) : null;
+    const expiry = this.props.accountExpiry
+      ? new AccountExpiry(this.props.accountExpiry, this.props.expiryLocale)
+      : null;
     const isOutOfTime = expiry ? expiry.hasExpired() : false;
     const formattedExpiry = expiry ? expiry.remainingTime().toUpperCase() : '';
 
diff --git a/gui/src/renderer/containers/ConnectPage.tsx b/gui/src/renderer/containers/ConnectPage.tsx
index cb78c2e8b3..370f8b7430 100644
--- a/gui/src/renderer/containers/ConnectPage.tsx
+++ b/gui/src/renderer/containers/ConnectPage.tsx
@@ -69,9 +69,11 @@ function getRelayName(
   }
 }
 
-const mapStateToProps = (state: IReduxState) => {
+const mapStateToProps = (state: IReduxState, props: ISharedRouteProps) => {
   return {
-    accountExpiry: state.account.expiry ? new AccountExpiry(state.account.expiry) : undefined,
+    accountExpiry: state.account.expiry
+      ? new AccountExpiry(state.account.expiry, props.locale)
+      : undefined,
     selectedRelayName: getRelayName(state.settings.relaySettings, state.settings.relayLocations),
     connection: state.connection,
     version: state.version,
diff --git a/gui/src/renderer/lib/account-expiry.ts b/gui/src/renderer/lib/account-expiry.ts
index e781caeffe..5a8e5e8ec2 100644
--- a/gui/src/renderer/lib/account-expiry.ts
+++ b/gui/src/renderer/lib/account-expiry.ts
@@ -5,16 +5,20 @@ import { pgettext } from '../../shared/gettext';
 export default class AccountExpiry {
   private expiry: moment.Moment;
 
-  constructor(expiry: string) {
-    this.expiry = moment(expiry);
+  constructor(isoString: string, locale: string) {
+    this.expiry = moment(isoString).locale(locale);
   }
 
   public hasExpired(): boolean {
-    return this.willHaveExpiredIn(moment());
+    return this.willHaveExpiredAt(new Date());
   }
 
-  public willHaveExpiredIn(time: moment.Moment): boolean {
-    return this.expiry.isSameOrBefore(time);
+  public willHaveExpiredAt(date: Date): boolean {
+    return this.expiry.isSameOrBefore(date);
+  }
+
+  public formattedDate(): string {
+    return this.expiry.format('L LTS');
   }
 
   public remainingTime(): string {