Use consistent distanceInWordsToNow across app

Author: andrewn

client/modules/IDE/components/Timer.jsx

@@ -1,10 +1,10 @@
 import classNames from 'classnames';
-import differenceInMilliseconds from 'date-fns/difference_in_milliseconds';
-import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withTranslation } from 'react-i18next';
 
+import dates from '../../../utils/formatDate';
+
 class Timer extends React.Component {
   constructor(props) {
     super(props);
@@ -22,20 +22,7 @@ class Timer extends React.Component {
   }
 
   showSavedTime() {
-    const now = new Date();
-    if (Math.abs(differenceInMilliseconds(now, this.props.projectSavedTime) < 10000)) {
-      return this.props.t('Timer.SavedJustNow');
-    } else if (differenceInMilliseconds(now, this.props.projectSavedTime) < 20000) {
-      return this.props.t('Timer.Saved15Seconds');
-    } else if (differenceInMilliseconds(now, this.props.projectSavedTime) < 30000) {
-      return this.props.t('Timer.Saved25Seconds');
-    } else if (differenceInMilliseconds(now, this.props.projectSavedTime) < 46000) {
-      return this.props.t('Timer.Saved35Seconds');
-    }
-
-    const timeAgo = distanceInWordsToNow(this.props.projectSavedTime, {
-      includeSeconds: true
-    });
+    const timeAgo = dates.distanceInWordsToNow(this.props.projectSavedTime);
     return this.props.t('Timer.SavedAgo', { timeAgo });
   }
 

client/modules/User/components/APIKeyList.jsx

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import orderBy from 'lodash/orderBy';
 
 import { APIKeyPropType } from './APIKeyForm';
@@ -22,7 +21,7 @@ function APIKeyList({ apiKeys, onRemove, t }) {
       <tbody>
         {orderBy(apiKeys, ['createdAt'], ['desc']).map((key) => {
           const lastUsed = key.lastUsedAt ?
-            distanceInWordsToNow(new Date(key.lastUsedAt), { addSuffix: true }) :
+            dates.distanceInWordsToNow(new Date(key.lastUsedAt)) :
             t('APIKeyList.Never');
 
           return (

client/utils/formatDate.js

@@ -1,6 +1,9 @@
+import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
+import differenceInMilliseconds from 'date-fns/difference_in_milliseconds';
 import format from 'date-fns/format';
 import isValid from 'date-fns/is_valid';
 import parseISO from 'date-fns/parse';
+import i18next from 'i18next';
 
 function parse(maybeDate) {
   const date = maybeDate instanceof Date ? maybeDate : parseISO(maybeDate);
@@ -13,6 +16,31 @@ function parse(maybeDate) {
 }
 
 export default {
+  distanceInWordsToNow(date) {
+    const parsed = parse(date);
+
+    if (parsed) {
+      const now = new Date();
+      const diffInMs = differenceInMilliseconds(now, parsed);
+
+      if (Math.abs(diffInMs < 10000)) {
+        return i18next.t('formatDate.JustNow');
+      } else if (diffInMs < 20000) {
+        return i18next.t('formatDate.15Seconds');
+      } else if (diffInMs < 30000) {
+        return i18next.t('formatDate.25Seconds');
+      } else if (diffInMs < 46000) {
+        return i18next.t('formatDate.35Seconds');
+      }
+
+      const timeAgo = distanceInWordsToNow(parsed, {
+        includeSeconds: true
+      });
+      return i18next.t('formatDate.Ago', { timeAgo });
+    }
+
+    return '';
+  },
   format(date, { showTime = true } = {}) {
     const parsed = parse(date);
     const formatType = showTime ? 'MMM D, YYYY h:mm A' : 'MMM D, YYYY';

translations/locales/en-US/translations.json

@@ -510,11 +510,14 @@
     "CurrentLine": " Current line"
   },
   "Timer": {
-    "SavedJustNow": "Saved: just now",
-    "Saved15Seconds": "Saved: 15 seconds ago",
-    "Saved25Seconds": "Saved: 25 seconds ago",
-    "Saved35Seconds": "Saved: 35 seconds ago",
-    "SavedAgo": "Saved: {{timeAgo}} ago"
+    "SavedAgo": "Saved: {{timeAgo}}"
+  },
+  "formatDate": {
+    "JustNow": "just now",
+    "15Seconds": "15 seconds ago",
+    "25Seconds": "25 seconds ago",
+    "35Seconds": "35 seconds ago",
+    "Ago": "{{timeAgo}} ago"
   },
   "AddRemoveButton": {
     "AltAddARIA": "Add to collection",

translations/locales/es-419/translations.json

@@ -510,11 +510,14 @@
     "CurrentLine": " Línea actual"
   },
   "Timer": {
-    "SavedJustNow": "Guardado: justo ahora",
-    "Saved15Seconds": "Guardado: hace 15 segundos",
-    "Saved25Seconds": "Guardado: hace 25 segundos",
-    "Saved35Seconds": "Guardado: hace 35 segundos",
-    "SavedAgo": "Guardado: hace {{timeAgo}}"
+    "SavedAgo": "Guardado: {{timeAgo}}"
+  },
+  "formatDate": {
+    "JustNow": "justo ahora",
+    "15Seconds": "hace 15 segundos",
+    "25Seconds": "hace 25 segundos",
+    "35Seconds": "hace 35 segundos",
+    "Ago": "hace {{timeAgo}}"
   },
   "AddRemoveButton": {
     "AltAddARIA": "Agregar a colección",