toggle comment date

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 CommentTimeAgo from './CommentTimeAgo';
 
-import t, { timeago } from 'coral-framework/services/i18n';
+import t from 'coral-framework/services/i18n';
 
 class Comment extends React.Component {
   ref = null;
@@ -127,7 +128,7 @@ class Comment extends React.Component {
               </span>
 
               <span className={styles.created}>
-                {timeago(comment.created_at)}
+                <CommentTimeAgo date={comment.created_at} />
               </span>
               {comment.editing && comment.editing.edited ? (
                 <span>

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

@@ -0,0 +1,27 @@
+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;