From 97103739c2c7f69923665813fde5074e158dd515 Mon Sep 17 00:00:00 2001
From: Helmut Januschka <helmut@januschka.com>
Date: Mon, 3 Sep 2018 09:04:33 +0200
Subject: [PATCH 1/3] toggle comment date

---
 .../routes/Moderation/components/Comment.js   |  5 ++--
 .../Moderation/components/CommentTimeAgo.js   | 27 +++++++++++++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 client/coral-admin/src/routes/Moderation/components/CommentTimeAgo.js

diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.js b/client/coral-admin/src/routes/Moderation/components/Comment.js
index b12a1e616..f5ce2bb54 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 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>
diff --git a/client/coral-admin/src/routes/Moderation/components/CommentTimeAgo.js b/client/coral-admin/src/routes/Moderation/components/CommentTimeAgo.js
new file mode 100644
index 000000000..280ad4479
--- /dev/null
+++ b/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;

From 974e8844329fd7145db3e8b4667b6cc2a263faa8 Mon Sep 17 00:00:00 2001
From: Helmut Januschka <helmut@januschka.com>
Date: Fri, 7 Sep 2018 13:36:55 +0200
Subject: [PATCH 2/3] adress feedback

---
 .../src/components/UserDetailComment.js       |  8 ++---
 .../routes/Moderation/components/Comment.js   |  9 ++---
 .../Moderation/components/CommentTimeAgo.js   | 27 --------------
 .../components/CommentTimestamp.js            |  9 ++---
 client/coral-framework/components/TimeAgo.js  | 35 +++++++++++++++++++
 5 files changed, 48 insertions(+), 40 deletions(-)
 delete mode 100644 client/coral-admin/src/routes/Moderation/components/CommentTimeAgo.js
 create mode 100644 client/coral-framework/components/TimeAgo.js

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)}
             />
-            <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}>
diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.js b/client/coral-admin/src/routes/Moderation/components/Comment.js
index f5ce2bb54..762f7b193 100644
--- a/client/coral-admin/src/routes/Moderation/components/Comment.js
+++ b/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}>
diff --git a/client/coral-admin/src/routes/Moderation/components/CommentTimeAgo.js b/client/coral-admin/src/routes/Moderation/components/CommentTimeAgo.js
deleted file mode 100644
index 280ad4479..000000000
--- a/client/coral-admin/src/routes/Moderation/components/CommentTimeAgo.js
+++ /dev/null
@@ -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;
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 }) => (
-  <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 = {
diff --git a/client/coral-framework/components/TimeAgo.js b/client/coral-framework/components/TimeAgo.js
new file mode 100644
index 000000000..e5d37b395
--- /dev/null
+++ b/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;

From 1eea2daeae88b1c681acd438e4f445c8ec4740e1 Mon Sep 17 00:00:00 2001
From: Helmut Januschka <helmut@januschka.com>
Date: Mon, 10 Sep 2018 21:34:07 +0200
Subject: [PATCH 3/3] adress feedback

---
 client/coral-framework/components/TimeAgo.css | 3 +++
 client/coral-framework/components/TimeAgo.js  | 9 ++++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 client/coral-framework/components/TimeAgo.css

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
index e5d37b395..682018b38 100644
--- a/client/coral-framework/components/TimeAgo.js
+++ b/client/coral-framework/components/TimeAgo.js
@@ -1,6 +1,8 @@
 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) {
@@ -19,7 +21,11 @@ class TimeAgo extends React.Component {
     return (
       <span
         onClick={this.toggleDate}
-        style={{ cursor: 'pointer' }}
+        className={cn(
+          this.props.className,
+          styles.timeago,
+          'talk-comment-timeago'
+        )}
         title={titleDate}
       >
         {displayTime}
@@ -30,6 +36,7 @@ class TimeAgo extends React.Component {
 
 TimeAgo.propTypes = {
   datetime: PropTypes.string,
+  className: PropTypes.string,
 };
 
 export default TimeAgo;