diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js index 4f8426159..7ce143c55 100644 --- a/client/coral-embed-stream/src/components/Comment.js +++ b/client/coral-embed-stream/src/components/Comment.js @@ -197,7 +197,9 @@ class Comment extends React.Component { } +
+ {/* TODO implmement iPerformedThisAction for the like */} { + setActiveReplyBox = reactKey => { if (!this.props.auth.user) { this.props.showSignInDialog(); } else { this.props.setActiveReplyBox(reactKey); } - } + }; - render () { + render() { const { root: {asset, asset: {comments}, comment, myIgnoredUsers}, postItem, @@ -39,152 +40,158 @@ class Stream extends React.Component { ignoreUser, auth: {loggedIn, isAdmin, user}, commentCountCache, - editName, + editName } = this.props; const open = asset.closedAt === null; // even though the permalinked comment is the highlighted one, we're displaying its parent + replies - const highlightedComment = comment && comment.parent ? comment.parent : comment; + const highlightedComment = comment && comment.parent + ? comment.parent + : comment; const banned = user && user.status === 'BANNED'; - const hasOlderComments = !!( - asset && + const hasOlderComments = !!(asset && asset.lastComment && - asset.lastComment.id !== asset.comments[asset.comments.length - 1].id - ); + asset.lastComment.id !== asset.comments[asset.comments.length - 1].id); // Find the created_at date of the first comment. If no comments exist, set the date to a week ago. const firstCommentDate = asset.comments[0] ? asset.comments[0].created_at : new Date(Date.now() - 1000 * 60 * 60 * 24 * 7).toISOString(); - const commentIsIgnored = (comment) => myIgnoredUsers && myIgnoredUsers.includes(comment.user.id); + const commentIsIgnored = comment => + myIgnoredUsers && myIgnoredUsers.includes(comment.user.id); return ( -
- { - open - ?
- - - - }> - { - user - ? - : null - } - -
- :

{asset.settings.closedMessage}

- } - {!loggedIn && } - {loggedIn && user && } +
+ {open + ?
+ + + + } + > + {user + ? + : null} + +
+ :

{asset.settings.closedMessage}

} + {!loggedIn && + } + {loggedIn && + user && + } {loggedIn && } {/* the highlightedComment is isolated after the user followed a permalink */} - { - highlightedComment + {highlightedComment ? - :
- + :
+ -
- { - comments.map(comment => - commentIsIgnored(comment) - ? - : - ) - } -
- -
- } +
+ {comments.map( + comment => + (commentIsIgnored(comment) + ? + : ) + )} +
+ +
}
); } @@ -201,7 +208,7 @@ Stream.propTypes = { removeCommentTag: PropTypes.func, // dispatch action to ignore another user - ignoreUser: React.PropTypes.func, + ignoreUser: React.PropTypes.func }; export default Stream; diff --git a/client/coral-embed-stream/src/containers/Comment.js b/client/coral-embed-stream/src/containers/Comment.js index 524f7ec62..9b48e0809 100644 --- a/client/coral-embed-stream/src/containers/Comment.js +++ b/client/coral-embed-stream/src/containers/Comment.js @@ -3,7 +3,15 @@ import Comment from '../components/Comment'; import withFragments from 'coral-framework/hocs/withFragments'; import {getSlotsFragments} from 'coral-framework/helpers/plugins'; -const pluginFragments = getSlotsFragments(['commentInfoBar', 'commentDetail']); +const pluginFragments = getSlotsFragments([ + 'streamQuestionArea', + 'commentInputArea', + 'commentInputDetailArea', + 'commentInfoBar', + 'commentActions', + 'commentContent', + 'commentReactions' +]); export default withFragments({ root: gql` @@ -36,5 +44,5 @@ export default withFragments({ ${pluginFragments.spreads('comment')} } ${pluginFragments.definitions('comment')} - `, + ` })(Comment); diff --git a/client/coral-framework/components/Slot.js b/client/coral-framework/components/Slot.js index c1e5dfe65..8e2dd9502 100644 --- a/client/coral-framework/components/Slot.js +++ b/client/coral-framework/components/Slot.js @@ -1,20 +1,16 @@ -import React, {Component} from 'react'; -import {getSlotElements} from 'coral-framework/helpers/plugins'; +import React from 'react'; +import cn from 'classnames'; import styles from './Slot.css'; +import {getSlotElements} from 'coral-framework/helpers/plugins'; -class Slot extends Component { - render() { - const {fill, inline = false, ...rest} = this.props; - return ( -
- {getSlotElements(fill, rest)} -
- ); - } +export default function Slot ({fill, inline = false, ...rest}) { + return ( +
+ {getSlotElements(fill, rest)} +
+ ); } Slot.propTypes = { fill: React.PropTypes.string }; - -export default Slot; diff --git a/client/coral-framework/helpers/plugins.js b/client/coral-framework/helpers/plugins.js index 26311a513..20aee7abb 100644 --- a/client/coral-framework/helpers/plugins.js +++ b/client/coral-framework/helpers/plugins.js @@ -44,7 +44,7 @@ function getComponentFragments(components) { * Returns an object that can be used to compose fragments or queries. * * Example: - * const pluginFragments = getSlotsFragments(['commentInfoBar', 'commentDetail']); + * const pluginFragments = getSlotsFragments(['commentInfoBar', 'commentActions']); * const rootFragment = gql` * fragment Comment_root on RootQuery { + ${pluginFragments.spreads('root')} diff --git a/client/coral-plugin-commentbox/CommentBox.js b/client/coral-plugin-commentbox/CommentBox.js index 6dd2d486f..5d0906b6e 100644 --- a/client/coral-plugin-commentbox/CommentBox.js +++ b/client/coral-plugin-commentbox/CommentBox.js @@ -1,13 +1,13 @@ -import React, {Component, PropTypes} from 'react'; +import React, {PropTypes} from 'react'; +import {Button} from 'coral-ui'; +import {connect} from 'react-redux'; import {I18n} from '../coral-framework'; import translations from './translations.json'; -import {Button} from 'coral-ui'; import Slot from 'coral-framework/components/Slot'; -import {connect} from 'react-redux'; const name = 'coral-plugin-commentbox'; -class CommentBox extends Component { +class CommentBox extends React.Component { constructor(props) { super(props); @@ -151,13 +151,14 @@ class CommentBox extends Component { id={isReply ? 'replyText' : 'commentText'} onChange={this.handleChange} rows={3}/> +
maxCharCount ? `${name}-char-max` : ''}`}> {maxCharCount && `${maxCharCount - length} ${lang.t('characters-remaining')}`}
@@ -10,6 +11,7 @@ const QuestionBox = ({enable, content}) =>
{content}
+
; export default QuestionBox; diff --git a/plugins/coral-plugin-offtopic/client/index.js b/plugins/coral-plugin-offtopic/client/index.js index c006c9a9e..071f37a40 100644 --- a/plugins/coral-plugin-offtopic/client/index.js +++ b/plugins/coral-plugin-offtopic/client/index.js @@ -3,7 +3,7 @@ import OffTopicTag from './components/OffTopicTag'; export default { slots: { - commentBoxDetail: [OffTopicCheckbox], + commentInputDetailArea: [OffTopicCheckbox], commentInfoBar: [OffTopicTag] } }; diff --git a/plugins/coral-plugin-respect/client/index.js b/plugins/coral-plugin-respect/client/index.js index a336786d6..e5baccb59 100644 --- a/plugins/coral-plugin-respect/client/index.js +++ b/plugins/coral-plugin-respect/client/index.js @@ -2,6 +2,6 @@ import RespectButton from './containers/RespectButton'; export default { slots: { - commentDetail: [RespectButton], + commentActions: [RespectButton], } };