adress feedback

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)}
             />
-            <span className={styles.created}>
-              {timeago(comment.created_at)}
-            </span>
+            <TimeAgo className={styles.created} datetime={comment.created_at} />
             {comment.editing && comment.editing.edited ? (
               <span>
                 &nbsp;<span className={styles.editedMarker}>

client/coral-admin/src/routes/Moderation/components/Comment.js

@@ -14,7 +14,7 @@ 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 CommentTimeAgo from './CommentTimeAgo';
+import TimeAgo from 'coral-framework/components/TimeAgo';
 
 import t from 'coral-framework/services/i18n';
 
@@ -127,9 +127,10 @@ class Comment extends React.Component {
                 {comment.user.username}
               </span>
 
-              <span className={styles.created}>
-                <CommentTimeAgo date={comment.created_at} />
-              </span>
+              <TimeAgo
+                className={styles.created}
+                datetime={comment.created_at}
+              />
               {comment.editing && comment.editing.edited ? (
                 <span>
                   &nbsp;<span className={styles.editedMarker}>

client/coral-admin/src/routes/Moderation/components/CommentTimeAgo.js

@@ -1,27 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { timeago } from 'coral-framework/services/i18n';
-
-class CommentTimeAgo extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { timeago: true };
-  }
-  toggleDate() {
-    this.setState({ timeago: !this.state.timeago });
-  }
-  render() {
-    return (
-      <div onClick={this.toggleDate.bind(this)}>
-        {this.state.timeago && timeago(this.props.date)}
-        {!this.state.timeago && new Date(this.props.date).toLocaleString()}
-      </div>
-    );
-  }
-}
-
-CommentTimeAgo.propTypes = {
-  date: PropTypes.string,
-};
-
-export default CommentTimeAgo;

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 }) => (
-  <div className={cn(className, styles.timestamp, 'talk-comment-timestamp')}>
-    {timeago(created_at)}
-  </div>
+  <TimeAgo
+    className={cn(className, styles.timestamp, 'talk-comment-timestamp')}
+    datetime={created_at}
+  />
 );
 
 CommentTimestamp.propTypes = {

client/coral-framework/components/TimeAgo.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { timeago } from 'coral-framework/services/i18n';
+
+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 (
+      <span
+        onClick={this.toggleDate}
+        style={{ cursor: 'pointer' }}
+        title={titleDate}
+      >
+        {displayTime}
+      </span>
+    );
+  }
+}
+
+TimeAgo.propTypes = {
+  datetime: PropTypes.string,
+};
+
+export default TimeAgo;