dates.format() wraps date-fns/format() to centralise data formatting

Author: andrewn

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/User/components/APIKeyList.jsx

@@ -1,11 +1,11 @@
 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 }) {
@@ -28,7 +28,7 @@ function APIKeyList({ apiKeys, onRemove, t }) {
           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,26 @@
+import format from 'date-fns/format';
+import isValid from 'date-fns/is_valid';
+import parseISO from 'date-fns/parse';
+
+function parse(maybeDate) {
+  const date = maybeDate instanceof Date ? maybeDate : parseISO(maybeDate);
+
+  if (isValid(date)) {
+    return date;
+  }
+
+  return null;
+}
+
+export default {
+  format(date, { showTime = true } = {}) {
+    const parsed = parse(date);
+    const formatType = showTime ? 'MMM D, YYYY h:mm A' : 'MMM D, YYYY';
+
+    if (parsed) {
+      return format(parsed, formatType);
+    }
+
+    return '';
+  }
+};