Merge pull request #1605 from andrewn/feature/date-i18n

Translations for Dates (fixes #1584)

Author: catarak

client/i18n.js

@@ -2,6 +2,7 @@ import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import Backend from 'i18next-http-backend';
+import { enUS, es } from 'date-fns/locale';
 
 const fallbackLng = ['en-US'];
 const availableLanguages = ['en-US', 'es-419'];
@@ -14,6 +15,18 @@ export function languageKeyToLabel(lang) {
   return languageMap[lang];
 }
 
+export function languageKeyToDateLocale(lang) {
+  const languageMap = {
+    'en-US': enUS,
+    'es-419': es
+  };
+  return languageMap[lang];
+}
+
+export function currentDateLocale() {
+  return languageKeyToDateLocale(i18n.language);
+}
+
 const options = {
   loadPath: '/locales/{{lng}}/translations.json',
   requestOptions: { // used for fetch, can also be a function (payload) => ({ method: 'GET' })

client/modules/IDE/components/CollectionList/CollectionListRow.jsx

@@ -1,4 +1,3 @@
-import format from 'date-fns/format';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
@@ -9,11 +8,10 @@ import * as ProjectActions from '../../actions/project';
 import * as CollectionsActions from '../../actions/collections';
 import * as IdeActions from '../../actions/ide';
 import * as ToastActions from '../../actions/toast';
+import dates from '../../../../utils/formatDate';
 
 import DownFilledTriangleIcon from '../../../../images/down-filled-triangle.svg';
 
-const formatDateCell = (date, mobile = false) => format(new Date(date), 'MMM D, YYYY');
-
 class CollectionListRowBase extends React.Component {
   static projectInCollection(project, collection) {
     return collection.items.find(item => item.project.id === project.id) != null;
@@ -214,8 +212,8 @@ class CollectionListRowBase extends React.Component {
             {this.renderCollectionName()}
           </span>
         </th>
-        <td>{mobile && 'Created: '}{format(new Date(collection.createdAt), 'MMM D, YYYY')}</td>
-        <td>{mobile && 'Updated: '}{formatDateCell(collection.updatedAt)}</td>
+        <td>{mobile && 'Created: '}{dates.format(collection.createdAt)}</td>
+        <td>{mobile && 'Updated: '}{dates.format(collection.updatedAt)}</td>
         <td>{mobile && '# sketches: '}{(collection.items || []).length}</td>
         <td className="sketch-list__dropdown-column">
           {this.renderActions()}

client/modules/IDE/components/SketchList.jsx

@@ -1,4 +1,3 @@
-import format from 'date-fns/format';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Helmet } from 'react-helmet';
@@ -8,6 +7,7 @@ import { Link } from 'react-router';
 import { bindActionCreators } from 'redux';
 import classNames from 'classnames';
 import slugify from 'slugify';
+import dates from '../../../utils/formatDate';
 import * as ProjectActions from '../actions/project';
 import * as ProjectsActions from '../actions/projects';
 import * as CollectionsActions from '../actions/collections';
@@ -24,7 +24,7 @@ import ArrowDownIcon from '../../../images/sort-arrow-down.svg';
 import DownFilledTriangleIcon from '../../../images/down-filled-triangle.svg';
 
 
-const formatDateCell = (date, mobile = false) => format(new Date(date), mobile ? 'MMM D, YYYY' : 'MMM D, YYYY h:mm A');
+const formatDateCell = (date, mobile = false) => dates.format(date, { showTime: !mobile });
 
 class SketchListRowBase extends React.Component {
   constructor(props) {

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/IDE/selectors/collections.js

@@ -1,5 +1,5 @@
 import { createSelector } from 'reselect';
-import differenceInMilliseconds from 'date-fns/difference_in_milliseconds';
+import differenceInMilliseconds from 'date-fns/differenceInMilliseconds';
 import find from 'lodash/find';
 import orderBy from 'lodash/orderBy';
 import { DIRECTION } from '../actions/sorting';

client/modules/IDE/selectors/projects.js

@@ -1,5 +1,5 @@
 import { createSelector } from 'reselect';
-import differenceInMilliseconds from 'date-fns/difference_in_milliseconds';
+import differenceInMilliseconds from 'date-fns/differenceInMilliseconds';
 import orderBy from 'lodash/orderBy';
 import { DIRECTION } from '../actions/sorting';
 

client/modules/User/components/APIKeyList.jsx

@@ -1,11 +1,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import format from 'date-fns/format';
-import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import orderBy from 'lodash/orderBy';
 
 import { APIKeyPropType } from './APIKeyForm';
 
+import dates from '../../../utils/formatDate';
 import TrashCanIcon from '../../../images/trash-can.svg';
 
 function APIKeyList({ apiKeys, onRemove, t }) {
@@ -22,13 +21,13 @@ 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 (
             <tr key={key.id}>
               <td>{key.label}</td>
-              <td>{format(new Date(key.createdAt), 'MMM D, YYYY h:mm A')}</td>
+              <td>{dates.format(key.createdAt)}</td>
               <td>{lastUsed}</td>
               <td className="api-key-list__action">
                 <button

client/modules/User/components/Collection.jsx

@@ -1,4 +1,3 @@
-import format from 'date-fns/format';
 import PropTypes from 'prop-types';
 import React, { useState, useRef, useEffect } from 'react';
 import { Helmet } from 'react-helmet';
@@ -23,6 +22,7 @@ import Overlay from '../../App/components/Overlay';
 import AddToCollectionSketchList from '../../IDE/components/AddToCollectionSketchList';
 import CopyableInput from '../../IDE/components/CopyableInput';
 import { SketchSearchbar } from '../../IDE/components/Searchbar';
+import dates from '../../../utils/formatDate';
 
 import ArrowUpIcon from '../../../images/sort-arrow-up.svg';
 import ArrowDownIcon from '../../../images/sort-arrow-down.svg';
@@ -101,7 +101,7 @@ const CollectionItemRowBase = ({
       <th scope="row">
         {name}
       </th>
-      <td>{format(new Date(item.createdAt), 'MMM D, YYYY h:mm A')}</td>
+      <td>{dates.format(item.createdAt)}</td>
       <td>{sketchOwnerUsername}</td>
       <td className="collection-row__action-column ">
         {isOwner &&

client/utils/formatDate.js

@@ -0,0 +1,57 @@
+import formatDistanceToNow from 'date-fns/formatDistanceToNow';
+import differenceInMilliseconds from 'date-fns/differenceInMilliseconds';
+import format from 'date-fns/format';
+import isValid from 'date-fns/isValid';
+import parseISO from 'date-fns/parseISO';
+import i18next from 'i18next';
+
+import { currentDateLocale } from '../i18n';
+
+function parse(maybeDate) {
+  const date = maybeDate instanceof Date ? maybeDate : parseISO(maybeDate);
+
+  if (isValid(date)) {
+    return date;
+  }
+
+  return null;
+}
+
+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 = formatDistanceToNow(parsed, {
+        includeSeconds: false,
+        locale: currentDateLocale()
+      });
+      return i18next.t('formatDate.Ago', { timeAgo });
+    }
+
+    return '';
+  },
+  format(date, { showTime = true } = {}) {
+    const parsed = parse(date);
+    const formatType = showTime ? 'PPpp' : 'PP';
+
+    if (parsed) {
+      return format(parsed, formatType, { locale: currentDateLocale() });
+    }
+
+    return '';
+  }
+};

package-lock.json

@@ -158,7 +158,7 @@
     "cors": "^2.8.5",
     "cross-env": "^5.2.1",
     "csslint": "^1.0.5",
-    "date-fns": "^1.30.1",
+    "date-fns": "^2.16.1",
     "decomment": "^0.8.7",
     "dotenv": "^2.0.0",
     "dropzone": "^4.3.0",

package.json

@@ -1,6 +1,6 @@
 import each from 'async/each';
 import mime from 'mime-types';
-import isBefore from 'date-fns/is_before';
+import isBefore from 'date-fns/isBefore';
 import Project from '../models/project';
 import { resolvePathToFile } from '../utils/filePath';
 import { deleteObjectsFromS3, getObjectKey } from './aws.controller';

server/controllers/file.controller.js

@@ -2,7 +2,7 @@ import archiver from 'archiver';
 import format from 'date-fns/format';
 import isUrl from 'is-url';
 import jsdom, { serializeDocument } from 'jsdom';
-import isAfter from 'date-fns/is_after';
+import isAfter from 'date-fns/isAfter';
 import request from 'request';
 import slugify from 'slugify';
 import Project from '../models/project';
@@ -20,7 +20,7 @@ export function updateProject(req, res) {
       res.status(403).send({ success: false, message: 'Session does not match owner of project.' });
       return;
     }
-    if (req.body.updatedAt && isAfter(new Date(project.updatedAt), req.body.updatedAt)) {
+    if (req.body.updatedAt && isAfter(new Date(project.updatedAt), new Date(req.body.updatedAt))) {
       res.status(409).send({ success: false, message: 'Attempted to save stale version of project.' });
       return;
     }
@@ -215,7 +215,7 @@ function buildZip(project, req, res) {
     res.status(500).send({ error: err.message });
   });
 
-  const currentTime = format(new Date(), 'YYYY_MM_DD_HH_mm_ss');
+  const currentTime = format(new Date(), 'yyyy_MM_dd_HH_mm_ss');
   project.slug = slugify(project.name, '_');
   res.attachment(`${generateFileSystemSafeName(project.slug)}_${currentTime}.zip`);
   zip.pipe(res);

server/controllers/project.controller.js

@@ -1,4 +1,4 @@
-import isBefore from 'date-fns/is_before';
+import isBefore from 'date-fns/isBefore';
 import Project from '../../models/project';
 import { deleteObjectsFromS3, getObjectKey } from '../aws.controller';
 import createApplicationErrorClass from '../../utils/createApplicationErrorClass';

server/controllers/project.controller/deleteProject.js

@@ -1,5 +1,5 @@
 import mockingoose from 'mockingoose';
-import differenceInSeconds from 'date-fns/difference_in_seconds';
+import differenceInSeconds from 'date-fns/differenceInSeconds';
 
 import Project from '../project';
 

server/models/__test__/project.test.js

@@ -517,11 +517,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/en-US/translations.json

@@ -517,11 +517,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",