Merge pull request #1841 from hjanuschka/toggle_comment_date

moderation: toggle comment date from timeago to full date

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,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}
               </span>
 
-              <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-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.css

@@ -0,0 +1,3 @@
+.timeago {
+  cursor: pointer;
+}

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 (
+      <span
+        onClick={this.toggleDate}
+        className={cn(
+          this.props.className,
+          styles.timeago,
+          'talk-comment-timeago'
+        )}
+        title={titleDate}
+      >
+        {displayTime}
+      </span>
+    );
+  }
+}
+
+TimeAgo.propTypes = {
+  datetime: PropTypes.string,
+  className: PropTypes.string,
+};
+
+export default TimeAgo;