Add full timestamps when hovering over relative times (e.g. "3 months…

… ago") (#739)

src/components/changeset/discussions.js

@@ -1,12 +1,13 @@
 // @flow
 import React from 'react';
 import { connect } from 'react-redux';
-import { formatDistanceToNow, parse } from 'date-fns';
+import { parse } from 'date-fns';
 import AnchorifyText from 'react-anchorify-text';
 
 import AssemblyAnchor from '../assembly_anchor';
 import { CommentForm } from './comment';
 import TranslateButton from './translate_button';
+import { RelativeTime } from '../relative_time';
 import { SignInButton } from './sign_in_button';
 import { UserOSMLink } from './user_osm_link';
 
@@ -54,15 +55,16 @@ class Discussions extends React.PureComponent {
                   )}
                 </span>
                 <span>
-                  {formatDistanceToNow(
-                    // eslint-disable-next-line
-                    parse(
-                      comment.get('date'),
-                      "yyyy-MM-dd'T'HH:mm:ssX",
-                      new Date()
-                    ),
-                    { addSuffix: true }
-                  )}
+                  <RelativeTime
+                    datetime={
+                      // eslint-disable-next-line
+                      parse(
+                        comment.get('date'),
+                        "yyyy-MM-dd'T'HH:mm:ssX",
+                        new Date()
+                      )
+                    }
+                  />
                 </span>
               </div>
               <div className="flex-parent flex-parent--column mt6 mb3">

src/components/changeset/header.js

@@ -2,10 +2,11 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { Map } from 'immutable';
-import { formatDistanceToNow, parse } from 'date-fns';
+import { parse } from 'date-fns';
 
 import { CreateDeleteModify } from '../create_delete_modify';
 import { Details } from './details';
+import { RelativeTime } from '../relative_time';
 import { useIsUserListed } from '../../hooks/UseIsUserListed';
 
 type propsType = {|
@@ -79,7 +80,8 @@ function HeaderComponent({
                  ({userEditCount} edits)
               </span>
             )}
-            &nbsp;created&nbsp;{formatDistanceToNow(date, { addSuffix: true })}
+            &nbsp;created&nbsp;
+            <RelativeTime datetime={date} />
           </span>
         </div>
       </div>

src/components/changeset/user.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import showdown from 'showdown';
-import { formatDistanceToNow, parse } from 'date-fns';
+import { parse } from 'date-fns';
 
 import { Avatar } from '../avatar';
 import { getObjAsQueryParam } from '../../utils/query_params';
+import { RelativeTime } from '../relative_time';
 import { SignInButton } from './sign_in_button';
 import { TrustWatchUser } from './trust_watch_user';
 import { UserOSMLink } from './user_osm_link';
@@ -89,16 +90,13 @@ export class User extends React.PureComponent {
       this.props.userDetails.get('description') || ''
     );
     const registrationDate = this.props.userDetails.get('accountCreated')
-      ? formatDistanceToNow(
-          parse(
-            this.props.userDetails.get('accountCreated'),
-            // eslint-disable-next-line
-            "yyyy-MM-dd'T'HH:mm:ssX",
-            new Date()
-          ),
-          { addSuffix: true }
+      ? parse(
+          this.props.userDetails.get('accountCreated'),
+          // eslint-disable-next-line
+          "yyyy-MM-dd'T'HH:mm:ssX",
+          new Date()
         )
-      : '';
+      : null;
 
     return (
       <div className="px12 py6">
@@ -117,7 +115,13 @@ export class User extends React.PureComponent {
             </div>
             <div>
               <p className="txt-s color-gray align-center">
-                {`Joined ${registrationDate} | `}
+                {registrationDate != null && (
+                  <React.Fragment>
+                    Joined&nbsp;
+                    <RelativeTime datetime={registrationDate} />
+                    {' | '}
+                  </React.Fragment>
+                )}
                 {this.props.userDetails.get('count')
                   ? this.renderUidFilterLink()
                   : `${this.props.userDetails.get(

src/components/list/title.js

@@ -1,8 +1,9 @@
 // @flow
 import React from 'react';
 import { connect } from 'react-redux';
-import { formatDistanceToNow, parse } from 'date-fns';
+import { parse } from 'date-fns';
 
+import { RelativeTime } from '../relative_time';
 import { useIsUserListed } from '../../hooks/UseIsUserListed';
 
 function TitleComponent({
@@ -37,11 +38,9 @@ function TitleComponent({
         </strong>
         <span className="txt-s mr3">
           &nbsp;
-          {formatDistanceToNow(
-            // eslint-disable-next-line
-            parse(date, "yyyy-MM-dd'T'HH:mm:ssX", new Date()),
-            { addSuffix: true }
-          )}
+          <RelativeTime
+            datetime={parse(date, "yyyy-MM-dd'T'HH:mm:ssX", new Date())}
+          />
         </span>
       </span>
     </div>

src/components/relative_time.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { formatDistanceToNow } from 'date-fns';
+
+export function RelativeTime({ datetime, addSuffix = true }: Object) {
+  return (
+    <time datetime={datetime.toISOString()} title={datetime.toString()}>
+      {formatDistanceToNow(datetime, { addSuffix })}
+    </time>
+  );
+}