Fixed: Modified time display on dashboard

New Time component for relative time formatting with accessibility

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{' '}
-          <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} />}

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>