diff --git a/client/coral-admin/src/components/UserDetailComment.js b/client/coral-admin/src/components/UserDetailComment.js index e8472219a..4393a5c0f 100644 --- a/client/coral-admin/src/components/UserDetailComment.js +++ b/client/coral-admin/src/components/UserDetailComment.js @@ -13,8 +13,8 @@ import CommentLabels from '../containers/CommentLabels'; import ApproveButton from './ApproveButton'; import RejectButton from 'coral-admin/src/components/RejectButton'; import CommentDeletedTombstone from './CommentDeletedTombstone'; - -import t, { timeago } from 'coral-framework/services/i18n'; +import TimeAgo from 'coral-framework/components/TimeAgo'; +import t from 'coral-framework/services/i18n'; class UserDetailComment extends React.Component { approve = () => @@ -73,9 +73,7 @@ class UserDetailComment extends React.Component { checked={selected} onChange={e => toggleSelect(e.target.value, e.target.checked)} /> - - {timeago(comment.created_at)} - + {comment.editing && comment.editing.edited ? (   diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.js b/client/coral-admin/src/routes/Moderation/components/Comment.js index b12a1e616..762f7b193 100644 --- a/client/coral-admin/src/routes/Moderation/components/Comment.js +++ b/client/coral-admin/src/routes/Moderation/components/Comment.js @@ -14,8 +14,9 @@ import cn from 'classnames'; import ApproveButton from 'coral-admin/src/components/ApproveButton'; import RejectButton from 'coral-admin/src/components/RejectButton'; import CommentDeletedTombstone from '../../../components/CommentDeletedTombstone'; +import TimeAgo from 'coral-framework/components/TimeAgo'; -import t, { timeago } from 'coral-framework/services/i18n'; +import t from 'coral-framework/services/i18n'; class Comment extends React.Component { ref = null; @@ -126,9 +127,10 @@ class Comment extends React.Component { {comment.user.username} - - {timeago(comment.created_at)} - + {comment.editing && comment.editing.edited ? (   diff --git a/client/coral-framework/components/CommentTimestamp.js b/client/coral-framework/components/CommentTimestamp.js index 8e4466f7b..9e8f2aedb 100644 --- a/client/coral-framework/components/CommentTimestamp.js +++ b/client/coral-framework/components/CommentTimestamp.js @@ -1,13 +1,14 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { timeago } from 'coral-framework/services/i18n'; import cn from 'classnames'; import styles from './CommentTimestamp.css'; +import TimeAgo from 'coral-framework/components/TimeAgo'; const CommentTimestamp = ({ className, created_at }) => ( -
- {timeago(created_at)} -
+ ); CommentTimestamp.propTypes = { diff --git a/client/coral-framework/components/TimeAgo.css b/client/coral-framework/components/TimeAgo.css new file mode 100644 index 000000000..e15e6720e --- /dev/null +++ b/client/coral-framework/components/TimeAgo.css @@ -0,0 +1,3 @@ +.timeago { + cursor: pointer; +} diff --git a/client/coral-framework/components/TimeAgo.js b/client/coral-framework/components/TimeAgo.js new file mode 100644 index 000000000..682018b38 --- /dev/null +++ b/client/coral-framework/components/TimeAgo.js @@ -0,0 +1,42 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { timeago } from 'coral-framework/services/i18n'; +import cn from 'classnames'; +import styles from './TimeAgo.css'; + +class TimeAgo extends React.Component { + constructor(props) { + super(props); + this.state = { timeago: true }; + } + toggleDate = () => this.setState({ timeago: !this.state.timeago }); + render() { + var displayTime = this.state.timeago + ? timeago(this.props.datetime) + : new Date(this.props.datetime).toLocaleString(); + + var titleDate = !this.state.timeago + ? timeago(this.props.datetime) + : new Date(this.props.datetime).toLocaleString(); + return ( + + {displayTime} + + ); + } +} + +TimeAgo.propTypes = { + datetime: PropTypes.string, + className: PropTypes.string, +}; + +export default TimeAgo;