From 2fd8b35ca9325f71cc3da46eb54292ea072b1af6 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sun, 1 Jul 2018 19:56:58 -0700
Subject: [PATCH] Fixed: Modified time display on dashboard New Time component
 for relative time formatting with accessibility

---
 .../components/PublishingInfo.js              | 70 ++++++++-----------
 app/scenes/Document/components/Breadcrumb.js  |  2 +-
 .../Settings/components/ShareListItem.js      |  9 +--
 .../Settings/components/UserListItem.js       |  4 +-
 shared/components/Time.js                     | 20 ++++++
 5 files changed, 56 insertions(+), 49 deletions(-)
 create mode 100644 shared/components/Time.js

diff --git a/app/components/DocumentPreview/components/PublishingInfo.js b/app/components/DocumentPreview/components/PublishingInfo.js
index bdc6528c..34ed1105 100644
--- a/app/components/DocumentPreview/components/PublishingInfo.js
+++ b/app/components/DocumentPreview/components/PublishingInfo.js
@@ -1,10 +1,10 @@
 // @flow
 import * as React from 'react';
-import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import styled from 'styled-components';
 import Collection from 'models/Collection';
 import Document from 'models/Document';
 import Flex from 'shared/components/Flex';
+import Time from 'shared/components/Time';
 
 const Container = styled(Flex)`
   color: ${props => props.theme.slate};
@@ -23,46 +23,36 @@ type Props = {
   views?: number,
 };
 
-class PublishingInfo extends React.Component<Props> {
-  render() {
-    const { collection, document } = this.props;
-    const {
-      modifiedSinceViewed,
-      createdAt,
-      updatedAt,
-      createdBy,
-      updatedBy,
-      publishedAt,
-    } = document;
+function PublishingInfo({ collection, document }: Props) {
+  const { modifiedSinceViewed, updatedAt, updatedBy, publishedAt } = document;
 
-    const timeAgo = `${distanceInWordsToNow(new Date(createdAt))} ago`;
-
-    return (
-      <Container align="center">
-        {publishedAt === updatedAt ? (
-          <span>
-            {createdBy.name} published {timeAgo}
-          </span>
-        ) : (
-          <React.Fragment>
-            {updatedBy.name}
-            {publishedAt ? (
-              <Modified highlight={modifiedSinceViewed}>
-                &nbsp;modified {timeAgo}
-              </Modified>
-            ) : (
-              <span>&nbsp;saved {timeAgo}</span>
-            )}
-          </React.Fragment>
-        )}
-        {collection && (
-          <span>
-            &nbsp;in <strong>{collection.name}</strong>
-          </span>
-        )}
-      </Container>
-    );
-  }
+  return (
+    <Container align="center">
+      {publishedAt && publishedAt === updatedAt ? (
+        <span>
+          {updatedBy.name} published <Time dateTime={publishedAt} /> ago
+        </span>
+      ) : (
+        <React.Fragment>
+          {updatedBy.name}
+          {publishedAt ? (
+            <Modified highlight={modifiedSinceViewed}>
+              &nbsp;modified <Time dateTime={updatedAt} /> ago
+            </Modified>
+          ) : (
+            <span>
+              &nbsp;saved <Time dateTime={updatedAt} /> ago
+            </span>
+          )}
+        </React.Fragment>
+      )}
+      {collection && (
+        <span>
+          &nbsp;in <strong>{collection.name}</strong>
+        </span>
+      )}
+    </Container>
+  );
 }
 
 export default PublishingInfo;
diff --git a/app/scenes/Document/components/Breadcrumb.js b/app/scenes/Document/components/Breadcrumb.js
index eceb82ba..b41d808c 100644
--- a/app/scenes/Document/components/Breadcrumb.js
+++ b/app/scenes/Document/components/Breadcrumb.js
@@ -28,7 +28,7 @@ const Breadcrumb = observer(({ document, collections }: Props) => {
         <span>{collection.name}</span>
       </CollectionName>
       {path.map(n => (
-        <React.Fragment>
+        <React.Fragment key={n.id}>
           <Slash /> <Crumb to={n.url}>{n.title}</Crumb>
         </React.Fragment>
       ))}
diff --git a/app/scenes/Settings/components/ShareListItem.js b/app/scenes/Settings/components/ShareListItem.js
index c78b950c..c05104e9 100644
--- a/app/scenes/Settings/components/ShareListItem.js
+++ b/app/scenes/Settings/components/ShareListItem.js
@@ -1,8 +1,8 @@
 // @flow
 import * as React from 'react';
-import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import ShareMenu from 'menus/ShareMenu';
 import ListItem from 'components/List/Item';
+import Time from 'shared/components/Time';
 import type { Share } from '../../../types';
 
 type Props = {
@@ -16,11 +16,8 @@ const ShareListItem = ({ share }: Props) => {
       title={share.documentTitle}
       subtitle={
         <React.Fragment>
-          Shared{' '}
-          <time dateTime={share.createdAt}>
-            {distanceInWordsToNow(new Date(share.createdAt))}
-          </time>{' '}
-          ago by {share.createdBy.name}
+          Shared <Time dateTime={share.createdAt} /> ago by{' '}
+          {share.createdBy.name}
         </React.Fragment>
       }
       actions={<ShareMenu share={share} />}
diff --git a/app/scenes/Settings/components/UserListItem.js b/app/scenes/Settings/components/UserListItem.js
index 924f4d75..4d90191f 100644
--- a/app/scenes/Settings/components/UserListItem.js
+++ b/app/scenes/Settings/components/UserListItem.js
@@ -1,11 +1,11 @@
 // @flow
 import * as React from 'react';
-import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import styled from 'styled-components';
 
 import UserMenu from 'menus/UserMenu';
 import Avatar from 'components/Avatar';
 import ListItem from 'components/List/Item';
+import Time from 'shared/components/Time';
 import type { User } from '../../../types';
 
 type Props = {
@@ -22,7 +22,7 @@ const UserListItem = ({ user, showMenu }: Props) => {
       subtitle={
         <React.Fragment>
           {user.email ? `${user.email} · ` : undefined}
-          {`Joined ${distanceInWordsToNow(user.createdAt)} ago`}
+          Joined <Time dateTime={user.createdAt} /> ago
           {user.isAdmin && <Badge admin={user.isAdmin}>Admin</Badge>}
           {user.isSuspended && <Badge>Suspended</Badge>}
         </React.Fragment>
diff --git a/shared/components/Time.js b/shared/components/Time.js
new file mode 100644
index 00000000..0e7b140a
--- /dev/null
+++ b/shared/components/Time.js
@@ -0,0 +1,20 @@
+// @flow
+import * as React from 'react';
+import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
+import format from 'date-fns/format';
+
+type Props = {
+  dateTime: string,
+  children?: React.Node,
+};
+
+function Time({ dateTime, children }: Props) {
+  const date = new Date(dateTime);
+  return (
+    <time dateTime={dateTime} title={format(date, 'MMMM Do, YYYY h:mm a')}>
+      {children || distanceInWordsToNow(date)}
+    </time>
+  );
+}
+
+export default Time;