From e7c78a2465054755cfd5a2aa99ce1fbfa34a7284 Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Wed, 20 Sep 2017 22:53:04 +0700 Subject: [PATCH 1/5] Pluginize timestamp --- .../src/components/Comment.js | 11 +++++++++-- .../src/containers/Comment.js | 3 ++- .../components}/PubDate.js | 5 +++++ .../containers/ProfileContainer.js | 3 ++- client/talk-plugin-history/Comment.js | 16 +++++++++++----- plugin-api/beta/client/components/index.js | 1 + .../client/components/CreateUsernameDialog.js | 2 +- .../client/components/FakeComment.js | 2 +- .../client/components/Comment.css | 6 +++++- .../client/components/Comment.js | 19 +++++++++++++------ .../client/containers/Comment.js | 1 + 11 files changed, 51 insertions(+), 18 deletions(-) rename client/{talk-plugin-pubdate => coral-framework/components}/PubDate.js (72%) diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index c6a3b740d..e5272f2db 100644 --- a/client/coral-embed-stream/src/components/Comment.js +++ b/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 { /> - + { (comment.editing && comment.editing.edited) ?  ({t('comment.edited')}) diff --git a/client/coral-embed-stream/src/containers/Comment.js b/client/coral-embed-stream/src/containers/Comment.js index bd3160643..694314bd7 100644 --- a/client/coral-embed-stream/src/containers/Comment.js +++ b/client/coral-embed-stream/src/containers/Comment.js @@ -17,7 +17,8 @@ const slots = [ 'commentReactions', 'commentAvatar', 'commentAuthorName', - 'commentAuthorTags' + 'commentAuthorTags', + 'commentTimestamp', ]; /** diff --git a/client/talk-plugin-pubdate/PubDate.js b/client/coral-framework/components/PubDate.js similarity index 72% rename from client/talk-plugin-pubdate/PubDate.js rename to client/coral-framework/components/PubDate.js index 7afd45e2c..843909852 100644 --- a/client/talk-plugin-pubdate/PubDate.js +++ b/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}) =>
{timeago(created_at)}
; +PubDate.propTypes = { + created_at: PropTypes.string, +}; + export default PubDate; diff --git a/client/coral-settings/containers/ProfileContainer.js b/client/coral-settings/containers/ProfileContainer.js index aab0e2a6a..1391fa83f 100644 --- a/client/coral-settings/containers/ProfileContainer.js +++ b/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` diff --git a/client/talk-plugin-history/Comment.js b/client/talk-plugin-history/Comment.js index 51ab5c84a..8152e431a 100644 --- a/client/talk-plugin-history/Comment.js +++ b/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 (
@@ -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} />
@@ -37,7 +38,7 @@ class Comment extends React.Component { - {comment.replyCount} + {comment.replyCount} {comment.replyCount === 1 ? t('common.reply') : t('common.replies')} @@ -59,9 +60,14 @@ class Comment extends React.Component {
  • -
    • diff --git a/plugin-api/beta/client/components/index.js b/plugin-api/beta/client/components/index.js index 4367d3420..634859e06 100644 --- a/plugin-api/beta/client/components/index.js +++ b/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'; diff --git a/plugins/talk-plugin-auth/client/components/CreateUsernameDialog.js b/plugins/talk-plugin-auth/client/components/CreateUsernameDialog.js index 4b0babed6..5c289c1c7 100644 --- a/plugins/talk-plugin-auth/client/components/CreateUsernameDialog.js +++ b/plugins/talk-plugin-auth/client/components/CreateUsernameDialog.js @@ -31,7 +31,7 @@ const CreateUsernameDialog = ({

    diff --git a/plugins/talk-plugin-auth/client/components/FakeComment.js b/plugins/talk-plugin-auth/client/components/FakeComment.js index 6997ca984..9d195b0ec 100644 --- a/plugins/talk-plugin-auth/client/components/FakeComment.js +++ b/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}) => (

    diff --git a/plugins/talk-plugin-featured-comments/client/components/Comment.css b/plugins/talk-plugin-featured-comments/client/components/Comment.css index b800401e3..9481b4396 100644 --- a/plugins/talk-plugin-featured-comments/client/components/Comment.css +++ b/plugins/talk-plugin-featured-comments/client/components/Comment.css @@ -64,4 +64,8 @@ .actionsContainer { text-align: right; -} \ No newline at end of file +} + +.timestamp { + padding-left: 6px; +} diff --git a/plugins/talk-plugin-featured-comments/client/components/Comment.js b/plugins/talk-plugin-featured-comments/client/components/Comment.js index 779844177..8c355192f 100644 --- a/plugins/talk-plugin-featured-comments/client/components/Comment.js +++ b/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 (
    @@ -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 /> - - ,{' '}{timeago(comment.created_at)} - +