Pluginize timestamp

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 PubDate from 'coral-framework/components/PubDate';
 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={PubDate}
+                  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-framework/components/PubDate.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import {timeago} from 'coral-framework/services/i18n';
 
 const name = 'talk-plugin-pubdate';
@@ -7,4 +8,8 @@ const PubDate = ({created_at}) => <div className={`${name}-text`}>
   {timeago(created_at)}
 </div>;
 
+PubDate.propTypes = {
+  created_at: PropTypes.string,
+};
+
 export default PubDate;

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.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 PubDate from 'coral-framework/components/PubDate';
 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>
@@ -59,9 +60,14 @@ class Comment extends React.Component {
             </li>
             <li>
               <Icon name="schedule" className={styles.iconDate} />
-              <PubDate
-                className={styles.pubdate}
+              <Slot
+                fill="historyCommentTimestamp"
+                defaultComponent={PubDate}
+                className={'talk-history-comment-published-date'}
                 created_at={comment.created_at}
+                data={data}
+                queryData={queryData}
+                inline
               />
             </li>
           </ul>

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 PubDate} from 'coral-framework/components/PubDate';

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,9 +1,9 @@
 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 {PubDate} from 'plugin-api/beta/client/components';
 
 export const FakeComment = ({username, created_at, body}) => (
   <div className={styles.root}>

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, PubDate} 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={PubDate}
+            className={cn(styles.timestamp, `${pluginName}-comment-timeago`)}
+            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({