Merge pull request #979 from coralproject/pluginize-timestamp

Allow replacing comment timestamp

client/coral-embed-stream/src/components/Comment.css

@@ -50,11 +50,6 @@
   pointer-events: none;
 }
 
-.bylineSecondary {
-  color: #696969;
-  font-size: 12px;
-}
-
 .editedMarker {
   font-style: italic;
 }

client/coral-embed-stream/src/components/Comment.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import TagLabel from 'talk-plugin-tag-label/TagLabel';
-import PubDate from 'talk-plugin-pubdate/PubDate';
+import CommentTimestamp from 'coral-framework/components/CommentTimestamp';
 import {ReplyBox, ReplyButton} from 'talk-plugin-replies';
 import {FlagComment} from 'talk-plugin-flags';
 import {can} from 'coral-framework/services/perms';
@@ -465,7 +465,14 @@ export default class Comment extends React.Component {
               />
 
               <span className={`${styles.bylineSecondary} talk-stream-comment-user-byline`} >
-                <PubDate created_at={comment.created_at} className={'talk-stream-comment-published-date'} />
+                <Slot
+                  fill="commentTimestamp"
+                  defaultComponent={CommentTimestamp}
+                  className={'talk-stream-comment-published-date'}
+                  created_at={comment.created_at}
+                  queryData={queryData}
+                  {...slotProps}
+                />
                 {
                   (comment.editing && comment.editing.edited)
                     ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>

client/coral-embed-stream/src/containers/Comment.js

@@ -17,7 +17,8 @@ const slots = [
   'commentReactions',
   'commentAvatar',
   'commentAuthorName',
-  'commentAuthorTags'
+  'commentAuthorTags',
+  'commentTimestamp',
 ];
 
 /**

client/coral-embed-stream/style/default.css

@@ -85,10 +85,6 @@ body {
 
 /* Info Box Styles */
 
-.hidden  {
-  visibility: hidden;
-  display: none;
-}
 
 .talk-plugin-infobox-info {
   top: 0;
@@ -235,10 +231,6 @@ button.comment__action-button[disabled],
   color: #F00;
 }
 
-.talk-plugin-pubdate-text {
-  display: inline-block;
-}
-
 /* Flag Styles */
 
 .talk-plugin-flags-popup-form {
@@ -367,4 +359,7 @@ button.comment__action-button[disabled],
   color: white;
 }
 
-
+.hidden  {
+  visibility: hidden;
+  display: none;
+}

client/coral-framework/components/CommentTimestamp.css

@@ -0,0 +1,6 @@
+.timestamp {
+  display: inline-block;
+  color: #696969;
+  font-size: 12px;
+}
+

client/coral-framework/components/CommentTimestamp.js

@@ -0,0 +1,18 @@
+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';
+
+const CommentTimestamp = ({className, created_at}) => (
+  <div className={cn(className, styles.timestamp, 'talk-comment-timestamp')}>
+    {timeago(created_at)}
+  </div>
+);
+
+CommentTimestamp.propTypes = {
+  className: PropTypes.string,
+  created_at: PropTypes.string,
+};
+
+export default CommentTimestamp;

client/coral-settings/containers/ProfileContainer.js

@@ -95,8 +95,9 @@ class ProfileContainer extends Component {
 const slots = [
   'profileSections',
 
-  // TODO: This Slot should be included in `talk-plugin-history` instead.
+  // TODO: These Slots should be included in `talk-plugin-history` instead.
   'commentContent',
+  'historyCommentTimestamp',
 ];
 
 const CommentFragment = gql`

client/talk-plugin-history/Comment.css

@@ -49,27 +49,32 @@
 
   li {
     margin-bottom: 5px;
-
-    &:nth-child(1) {
-      color: #5394D7;
-    }
-
-    &:nth-child(2) {
-      color: #909090;
-    }
-
-
-    i {
-      margin-right: 5px;
-      font-size: 15px;
-    }
-
-    a:hover {
-      cursor: pointer;
-    }
   }
 }
 
+.viewLink {
+  color: #5394D7;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.iconView {
+  margin-right: 5px;
+  font-size: 15px;
+  vertical-align: middle;
+  padding-bottom: 1px;
+}
+
+.iconDate {
+  margin-right: 5px;
+  font-size: 15px;
+  color: #696969;
+  vertical-align: middle;
+  padding-bottom: 1px;
+}
+
 @custom-media --mobile-viewport (max-width: 480px);
 
 @media (--mobile-viewport) {
@@ -92,7 +97,3 @@
   color: inherit;
 }
 
-.iconView, .iconDate {
-  vertical-align: middle;
-  padding-bottom: 1px;
-}

client/talk-plugin-history/Comment.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {Icon} from '../coral-ui';
 import styles from './Comment.css';
 import Slot from 'coral-framework/components/Slot';
-import PubDate from '../talk-plugin-pubdate/PubDate';
+import CommentTimestamp from 'coral-framework/components/CommentTimestamp';
 import CommentContent from '../coral-embed-stream/src/components/CommentContent';
 import cn from 'classnames';
 import {getTotalReactionsCount} from 'coral-framework/utils';
@@ -15,6 +15,7 @@ class Comment extends React.Component {
   render() {
     const {comment, link, data, root} = this.props;
     const reactionCount = getTotalReactionsCount(comment.action_summaries);
+    const queryData = {root, comment, asset: comment.asset};
 
     return (
       <div className={styles.myComment}>
@@ -24,7 +25,7 @@ class Comment extends React.Component {
             defaultComponent={CommentContent}
             className={cn(styles.commentBody, 'my-comment-body')}
             data={data}
-            queryData={{root, comment, asset: comment.asset}}
+            queryData={queryData}
           />
           <div className={cn(styles.commentSummary, 'comment-summary')}>
             <span className={cn(styles.commentSummaryReactions, 'comment-summary-reactions', {[styles.countZero]: reactionCount === 0})}>
@@ -37,7 +38,7 @@ class Comment extends React.Component {
             <span className={cn('comment-summary-replies', {[styles.countZero]: comment.replyCount === 0})}>
               <Icon name="reply" />
               <span className={cn(styles.replyCount, 'comment-summary-reply-count')}>
-                {comment.replyCount} 
+                {comment.replyCount}
               </span>
               {comment.replyCount === 1 ? t('common.reply') : t('common.replies')}
             </span>
@@ -53,15 +54,20 @@ class Comment extends React.Component {
         <div className={styles.sidebar}>
           <ul>
             <li>
-              <a onClick={link(`${comment.asset.url}?commentId=${comment.id}`)}>
+              <a onClick={link(`${comment.asset.url}?commentId=${comment.id}`)} className={styles.viewLink}>
                 <Icon name="open_in_new" className={styles.iconView}/>{t('view_conversation')}
               </a>
             </li>
             <li>
               <Icon name="schedule" className={styles.iconDate} />
-              <PubDate
-                className={styles.pubdate}
+              <Slot
+                fill="historyCommentTimestamp"
+                defaultComponent={CommentTimestamp}
+                className={'talk-history-comment-published-date'}
                 created_at={comment.created_at}
+                data={data}
+                queryData={queryData}
+                inline
               />
             </li>
           </ul>

client/talk-plugin-pubdate/PubDate.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import {timeago} from 'coral-framework/services/i18n';
-
-const name = 'talk-plugin-pubdate';
-
-const PubDate = ({created_at}) => <div className={`${name}-text`}>
-  {timeago(created_at)}
-</div>;
-
-export default PubDate;

plugin-api/beta/client/components/index.js

@@ -3,3 +3,4 @@ export {default as ClickOutside} from 'coral-framework/components/ClickOutside';
 export {default as IfSlotIsEmpty} from 'coral-framework/components/IfSlotIsEmpty';
 export {default as IfSlotIsNotEmpty} from 'coral-framework/components/IfSlotIsNotEmpty';
 export {default as CommentAuthorName} from 'coral-framework/components/CommentAuthorName';
+export {default as CommentTimestamp} from 'coral-framework/components/CommentTimestamp';

plugins/talk-plugin-auth/client/components/CreateUsernameDialog.js

@@ -31,7 +31,7 @@ const CreateUsernameDialog = ({
         <FakeComment
           className={styles.fakeComment}
           username={formData.username}
-          created_at={Date.now()}
+          created_at={new Date().toISOString()}
           body={t('createdisplay.fake_comment_body')}
         />
         <p className={styles.ifyoudont}>

plugins/talk-plugin-auth/client/components/FakeComment.js

@@ -1,16 +1,16 @@
 import React from 'react';
 import t from 'coral-framework/services/i18n';
 import {ReplyButton} from 'talk-plugin-replies';
-import PubDate from 'talk-plugin-pubdate/PubDate';
 import styles from './FakeComment.css';
 import {Icon} from 'plugin-api/beta/client/components/ui';
+import {CommentTimestamp} from 'plugin-api/beta/client/components';
 
 export const FakeComment = ({username, created_at, body}) => (
   <div className={styles.root}>
     <span className={styles.authorName}>
       {username}
     </span>
-    <PubDate created_at={created_at} />
+    <CommentTimestamp created_at={created_at} />
     <div className={styles.body}>
       {body}
     </div>

plugins/talk-plugin-featured-comments/client/components/Comment.css

@@ -64,4 +64,8 @@
 
 .actionsContainer {
   text-align: right;
-}
+}
+
+.timestamp {
+  padding-left: 6px;
+}

plugins/talk-plugin-featured-comments/client/components/Comment.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import cn from 'classnames';
 import styles from './Comment.css';
-import {t, timeago} from 'plugin-api/beta/client/services';
-import {Slot, CommentAuthorName} from 'plugin-api/beta/client/components';
+import {t} from 'plugin-api/beta/client/services';
+import {Slot, CommentAuthorName, CommentTimestamp} from 'plugin-api/beta/client/components';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 import {pluginName} from '../../package.json';
 import FeaturedButton from '../containers/FeaturedButton';
@@ -15,6 +15,7 @@ class Comment extends React.Component {
 
   render() {
     const {comment, asset, root, data} = this.props;
+    const queryData = {comment, asset, root};
     return (
       <div className={cn(styles.root, `${pluginName}-comment`)}>
 
@@ -28,14 +29,20 @@ class Comment extends React.Component {
             className={cn(styles.username, `${pluginName}-comment-username`)}
             fill="commentAuthorName"
             defaultComponent={CommentAuthorName}
-            queryData={{comment, asset, root}}
+            queryData={queryData}
             data={data}
             inline
           />
 
-          <span className={cn(styles.timeago, `${pluginName}-comment-timeago`)}>
-            ,{' '}{timeago(comment.created_at)}
-          </span>
+          <Slot
+            fill="commentTimestamp"
+            defaultComponent={CommentTimestamp}
+            className={cn(styles.timestamp, `${pluginName}-comment-timestamp`)}
+            created_at={comment.created_at}
+            data={data}
+            queryData={queryData}
+            inline
+          />
         </div>
 
         <footer className={cn(styles.footer, `${pluginName}-comment-footer`)}>

plugins/talk-plugin-featured-comments/client/containers/Comment.js

@@ -6,6 +6,7 @@ import {getSlotFragmentSpreads} from 'plugin-api/beta/client/utils';
 const slots = [
   'commentReactions',
   'commentAuthorName',
+  'commentTimestamp',
 ];
 
 export default withFragments({