Pluginize timestamp

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({