diff --git a/src/components/changeset/discussions.js b/src/components/changeset/discussions.js
index 59a67faf..97eda8bd 100644
--- a/src/components/changeset/discussions.js
+++ b/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 {
)}
- {formatDistanceToNow(
- // eslint-disable-next-line
- parse(
- comment.get('date'),
- "yyyy-MM-dd'T'HH:mm:ssX",
- new Date()
- ),
- { addSuffix: true }
- )}
+
diff --git a/src/components/changeset/header.js b/src/components/changeset/header.js
index f486dd13..19a02998 100644
--- a/src/components/changeset/header.js
+++ b/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)
)}
- created {formatDistanceToNow(date, { addSuffix: true })}
+ created
+
diff --git a/src/components/changeset/user.js b/src/components/changeset/user.js
index f28259b1..c5ae68d0 100644
--- a/src/components/changeset/user.js
+++ b/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 (
@@ -117,7 +115,13 @@ export class User extends React.PureComponent {
- {`Joined ${registrationDate} | `}
+ {registrationDate != null && (
+
+ Joined
+
+ {' | '}
+
+ )}
{this.props.userDetails.get('count')
? this.renderUidFilterLink()
: `${this.props.userDetails.get(
diff --git a/src/components/list/title.js b/src/components/list/title.js
index 0575902d..06252c42 100644
--- a/src/components/list/title.js
+++ b/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({
- {formatDistanceToNow(
- // eslint-disable-next-line
- parse(date, "yyyy-MM-dd'T'HH:mm:ssX", new Date()),
- { addSuffix: true }
- )}
+
diff --git a/src/components/relative_time.js b/src/components/relative_time.js
new file mode 100644
index 00000000..05b395e0
--- /dev/null
+++ b/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 (
+
+ );
+}