Fixed: Modified time display on dashboard

New Time component for relative time formatting with accessibility

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> {
+function PublishingInfo({ collection, document }: Props) {
-  render() {
+  const { modifiedSinceViewed, updatedAt, updatedBy, publishedAt } = document;
-    const { collection, document } = this.props;
-    const {
-      modifiedSinceViewed,
-      createdAt,
-      updatedAt,
-      createdBy,
-      updatedBy,
-      publishedAt,
-    } = document;
 
-    const timeAgo = `${distanceInWordsToNow(new Date(createdAt))} ago`;
+  return (
-
+    <Container align="center">
-    return (
+      {publishedAt && publishedAt === updatedAt ? (
-      <Container align="center">
+        <span>
-        {publishedAt === updatedAt ? (
+          {updatedBy.name} published <Time dateTime={publishedAt} /> ago
-          <span>
+        </span>
-            {createdBy.name} published {timeAgo}
+      ) : (
-          </span>
+        <React.Fragment>
-        ) : (
+          {updatedBy.name}
-          <React.Fragment>
+          {publishedAt ? (
-            {updatedBy.name}
+            <Modified highlight={modifiedSinceViewed}>
-            {publishedAt ? (
+              &nbsp;modified <Time dateTime={updatedAt} /> ago
-              <Modified highlight={modifiedSinceViewed}>
+            </Modified>
-                &nbsp;modified {timeAgo}
+          ) : (
-              </Modified>
+            <span>
-            ) : (
+              &nbsp;saved <Time dateTime={updatedAt} /> ago
-              <span>&nbsp;saved {timeAgo}</span>
+            </span>
-            )}
+          )}
-          </React.Fragment>
+        </React.Fragment>
-        )}
+      )}
-        {collection && (
+      {collection && (
-          <span>
+        <span>
-            &nbsp;in <strong>{collection.name}</strong>
+          &nbsp;in <strong>{collection.name}</strong>
-          </span>
+        </span>
-        )}
+      )}
-      </Container>
+    </Container>
-    );
+  );
-  }
 }
 
 export default PublishingInfo;

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>
       ))}

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{' '}
+          Shared <Time dateTime={share.createdAt} /> ago by{' '}
-          <time dateTime={share.createdAt}>
+          {share.createdBy.name}
-            {distanceInWordsToNow(new Date(share.createdAt))}
-          </time>{' '}
-          ago by {share.createdBy.name}
         </React.Fragment>
       }
       actions={<ShareMenu share={share} />}

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>

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;