Switch to native APIs and own implementation from moment.js

2 files changed, 9 insertions, 10 deletions

diff --git a/gui/src/renderer/components/Settings.tsx b/gui/src/renderer/components/Settings.tsx
index 00c5d846f0..56b8fd5494 100644
--- a/gui/src/renderer/components/Settings.tsx
+++ b/gui/src/renderer/components/Settings.tsx
@@ -29,7 +29,6 @@ export interface IProps {
   preferredLocaleDisplayName: string;
   loginState: LoginState;
   accountExpiry?: string;
-  expiryLocale: string;
   appVersion: string;
   consistentVersion: boolean;
   upToDateVersion: boolean;
@@ -106,7 +105,7 @@ export default class Settings extends React.Component<IProps> {
 
     const isOutOfTime = this.props.accountExpiry ? hasExpired(this.props.accountExpiry) : false;
     const formattedExpiry = this.props.accountExpiry
-      ? formatRemainingTime(this.props.accountExpiry, this.props.expiryLocale).toUpperCase()
+      ? formatRemainingTime(this.props.accountExpiry).toUpperCase()
       : '';
 
     const outOfTimeMessage = messages.pgettext('settings-view', 'OUT OF TIME');
diff --git a/gui/src/renderer/components/WireguardKeys.tsx b/gui/src/renderer/components/WireguardKeys.tsx
index 9c181ad57e..f6e143e6a3 100644
--- a/gui/src/renderer/components/WireguardKeys.tsx
+++ b/gui/src/renderer/components/WireguardKeys.tsx
@@ -1,7 +1,7 @@
-import moment from 'moment';
 import * as React from 'react';
 import { sprintf } from 'sprintf-js';
 import { TunnelState } from '../../shared/daemon-rpc-types';
+import { formatRelativeDate } from '../../shared/date-helper';
 import { messages } from '../../shared/gettext';
 import log from '../../shared/logging';
 import { IWgKey, WgKeyState } from '../redux/settings/reducers';
@@ -35,7 +35,6 @@ import {
 export interface IProps {
   keyState: WgKeyState;
   isOffline: boolean;
-  locale: string;
   tunnelState: TunnelState;
   windowFocused: boolean;
 
@@ -56,14 +55,14 @@ export default class WireguardKeys extends React.Component<IProps, IState> {
   public state = {
     recentlyGeneratedKey: false,
     userHasInitiatedVerification: false,
-    ageOfKeyString: WireguardKeys.ageOfKeyString(this.props.keyState, this.props.locale),
+    ageOfKeyString: WireguardKeys.ageOfKeyString(this.props.keyState),
   };
 
   private keyAgeUpdateInterval?: number;
 
   public static getDerivedStateFromProps(props: IProps) {
     return {
-      ageOfKeyString: WireguardKeys.ageOfKeyString(props.keyState, props.locale),
+      ageOfKeyString: WireguardKeys.ageOfKeyString(props.keyState),
     };
   }
 
@@ -276,11 +275,12 @@ export default class WireguardKeys extends React.Component<IProps, IState> {
     }
   }
 
-  private static ageOfKeyString(keyState: WgKeyState, locale: string): string {
+  private static ageOfKeyString(keyState: WgKeyState): string {
     switch (keyState.type) {
       case 'key-set':
-      case 'being-verified':
-        return moment(keyState.key.created).locale(locale).fromNow();
+      case 'being-verified': {
+        return formatRelativeDate(new Date(), keyState.key.created, true);
+      }
       default:
         return '-';
     }
@@ -288,7 +288,7 @@ export default class WireguardKeys extends React.Component<IProps, IState> {
 
   private setAgeOfKeyStringState = () => {
     this.setState({
-      ageOfKeyString: WireguardKeys.ageOfKeyString(this.props.keyState, this.props.locale),
+      ageOfKeyString: WireguardKeys.ageOfKeyString(this.props.keyState),
     });
   };