diff --git a/client/coral-configure/components/CloseCommentsInfo.js b/client/coral-configure/components/CloseCommentsInfo.js index b9c6371c4..d10419f3f 100644 --- a/client/coral-configure/components/CloseCommentsInfo.js +++ b/client/coral-configure/components/CloseCommentsInfo.js @@ -1,9 +1,9 @@ import React from 'react'; import {Button} from 'coral-ui'; - +import PropTypes from 'prop-types'; import t from 'coral-framework/services/i18n'; -export default ({status, onClick}) => ( +const CloseCommentsInfo = ({status, onClick}) => ( status === 'open' ? (

@@ -20,3 +20,10 @@ export default ({status, onClick}) => (

) ); + +CloseCommentsInfo.propTypes = { + status: PropTypes.string, + onClick: PropTypes.func, +}; + +export default CloseCommentsInfo; \ No newline at end of file diff --git a/client/coral-configure/containers/ConfigureStreamContainer.js b/client/coral-configure/containers/ConfigureStreamContainer.js index 0caa467f1..0ab71c1d7 100644 --- a/client/coral-configure/containers/ConfigureStreamContainer.js +++ b/client/coral-configure/containers/ConfigureStreamContainer.js @@ -1,12 +1,10 @@ import React, {Component} from 'react'; import {connect} from 'react-redux'; import {compose} from 'react-apollo'; - +import PropTypes from 'prop-types'; import {updateOpenStatus, updateConfiguration} from 'coral-embed-stream/src/actions/asset'; - import CloseCommentsInfo from '../components/CloseCommentsInfo'; import ConfigureCommentStream from '../components/ConfigureCommentStream'; - import t, {timeago} from 'coral-framework/services/i18n'; class ConfigureStreamContainer extends Component { @@ -134,6 +132,14 @@ const mapDispatchToProps = (dispatch) => ({ updateConfiguration: (newConfig) => dispatch(updateConfiguration(newConfig)), }); +ConfigureStreamContainer.propTypes = { + updateStatus: PropTypes.func, + closedTimeout: PropTypes.string, + created_at: PropTypes.string, + updateConfiguration: PropTypes.func, + asset: PropTypes.object, +}; + export default compose( connect(mapStateToProps, mapDispatchToProps) )(ConfigureStreamContainer); diff --git a/client/coral-embed-stream/src/components/AllCommentsPane.js b/client/coral-embed-stream/src/components/AllCommentsPane.js index 7602902df..2967b9972 100644 --- a/client/coral-embed-stream/src/components/AllCommentsPane.js +++ b/client/coral-embed-stream/src/components/AllCommentsPane.js @@ -1,10 +1,11 @@ import React from 'react'; - +import PropTypes from 'prop-types'; import LoadMore from './LoadMore'; import NewCount from './NewCount'; import {TransitionGroup} from 'react-transition-group'; import {forEachError} from 'coral-framework/utils'; import Comment from '../containers/Comment'; +import NoComments from './NoComments'; const hasComment = (nodes, id) => nodes.some((node) => node.id === id); @@ -144,53 +145,82 @@ class AllCommentsPane extends React.Component { } = this.props; const {loadingState} = this.state; - const view = this.getVisibleComments(); + const visibleComments = this.getVisibleComments(); return ( -
- - - {view.map((comment) => { - return ( - - ); - })} - - +
+ {visibleComments.length ? ( +
+ + + {visibleComments.map((comment) => { + return ( + + ); + })} + + +
+ ) : ( + + )}
); } } +AllCommentsPane.propTypes = { + data: PropTypes.object, + root: PropTypes.object, + comments: PropTypes.object, + commentClassNames: PropTypes.array, + setActiveReplyBox: PropTypes.func, + activeReplyBox: PropTypes.string, + notify: PropTypes.func, + disableReply: PropTypes.bool, + postComment: PropTypes.func, + asset: PropTypes.object, + currentUser: PropTypes.object, + postFlag: PropTypes.func, + postDontAgree: PropTypes.func, + loadNewReplies: PropTypes.func, + deleteAction: PropTypes.func, + showSignInDialog: PropTypes.func, + charCountEnable: PropTypes.bool, + maxCharCount: PropTypes.number, + editComment: PropTypes.func, + emit: PropTypes.func, +}; + export default AllCommentsPane; diff --git a/client/coral-embed-stream/src/components/CommentTombstone.css b/client/coral-embed-stream/src/components/CommentTombstone.css new file mode 100644 index 000000000..6119a5cd8 --- /dev/null +++ b/client/coral-embed-stream/src/components/CommentTombstone.css @@ -0,0 +1,6 @@ +.commentTombstone { + background-color: #F0F0F0; + text-align: center; + padding: 1em; + color: #3E4F71; +} \ No newline at end of file diff --git a/client/coral-embed-stream/src/components/CommentTombstone.js b/client/coral-embed-stream/src/components/CommentTombstone.js index 1d7e8d7e5..cc3362563 100644 --- a/client/coral-embed-stream/src/components/CommentTombstone.js +++ b/client/coral-embed-stream/src/components/CommentTombstone.js @@ -1,6 +1,7 @@ import React from 'react'; - +import PropTypes from 'prop-types'; import t from 'coral-framework/services/i18n'; +import styles from './CommentTombstone.css'; // Render in place of a Comment when the author of the comment is class CommentTombstone extends React.Component { @@ -19,14 +20,9 @@ class CommentTombstone extends React.Component { render() { return ( -
+
-

+

{this.getCopy()}

@@ -34,4 +30,8 @@ class CommentTombstone extends React.Component { } } +CommentTombstone.propTypes = { + action: PropTypes.string, +}; + export default CommentTombstone; diff --git a/client/coral-embed-stream/src/components/NoComments.css b/client/coral-embed-stream/src/components/NoComments.css new file mode 100644 index 000000000..51dc053f5 --- /dev/null +++ b/client/coral-embed-stream/src/components/NoComments.css @@ -0,0 +1,6 @@ +.message { + padding: 20px 10px; + background-color: #f7f7f7; + margin: 20px 0; + text-align: center; +} \ No newline at end of file diff --git a/client/coral-embed-stream/src/components/NoComments.js b/client/coral-embed-stream/src/components/NoComments.js new file mode 100644 index 000000000..378c908d6 --- /dev/null +++ b/client/coral-embed-stream/src/components/NoComments.js @@ -0,0 +1,25 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import cn from 'classnames'; +import t from 'coral-framework/services/i18n'; +import styles from './NoComments.css'; + +const NoComments = ({assetClosed}) => ( +
+ {assetClosed ? ( +
+ {t('stream.no_comments_and_closed')} +
+ ) : ( +
+ {t('stream.no_comments')} +
+ )} +
+); + +NoComments.propTypes = { + assetClosed: PropTypes.bool, +}; + +export default NoComments; diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js index 1ec780e63..96101c1e5 100644 --- a/client/coral-embed-stream/src/components/Stream.js +++ b/client/coral-embed-stream/src/components/Stream.js @@ -303,11 +303,32 @@ class Stream extends React.Component { } Stream.propTypes = { + activeStreamTab: PropTypes.string, + data: PropTypes.object, + root: PropTypes.object, + activeReplyBox: PropTypes.string, + setActiveReplyBox: PropTypes.func, + commentClassNames: PropTypes.array, + setActiveStreamTab: PropTypes.func, + loadMoreComments: PropTypes.func, + postFlag: PropTypes.func, + postDontAgree: PropTypes.func, + deleteAction: PropTypes.func, + showSignInDialog: PropTypes.func, + loadNewReplies: PropTypes.func, + auth: PropTypes.object, + emit: PropTypes.func, + sortOrder: PropTypes.string, + sortBy: PropTypes.string, + loading: PropTypes.bool, + editName: PropTypes.func, + appendItemArray: PropTypes.func, + updateItem: PropTypes.func, + viewAllComments: PropTypes.func, notify: PropTypes.func.isRequired, postComment: PropTypes.func.isRequired, - - // edit a comment, passed (id, asset_id, { body }) - editComment: PropTypes.func + editComment: PropTypes.func, + userIsDegraged: PropTypes.bool, }; export default Stream; diff --git a/client/coral-embed-stream/src/containers/AutomaticAssetClosure.js b/client/coral-embed-stream/src/containers/AutomaticAssetClosure.js index 8d336bb24..487e927a8 100644 --- a/client/coral-embed-stream/src/containers/AutomaticAssetClosure.js +++ b/client/coral-embed-stream/src/containers/AutomaticAssetClosure.js @@ -17,6 +17,7 @@ function getFragmentId(assetId) { * AutomaticAssetClosure updates the graphql state of the provide asset * to `isClosed=true` when passed `closedAt`. */ + class AutomaticAssetClosure extends React.Component { static contextTypes = { client: PropTypes.object.isRequired, diff --git a/locales/en.yml b/locales/en.yml index 76e0f4bac..2d560fedc 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -325,6 +325,8 @@ en: all_comments: "All Comments" temporarily_suspended: "In accordance with {0}'s community guidelines, your account has been temporarily suspended. Please rejoin the conversation {1}." comment_not_found: "Comment was not found" + no_comments: "There are no comments yet, why don’t you write one?" + no_comments_and_closed: "There were no comments on this article." step_1_header: "Report an issue" step_2_header: "Help us understand" step_3_header: "Thank you for your input" diff --git a/locales/es.yml b/locales/es.yml index de3d06692..3f01b8457 100644 --- a/locales/es.yml +++ b/locales/es.yml @@ -350,6 +350,8 @@ es: all_comments: "Todos los comentarios" temporarily_suspended: "De acuerdo con la guía de la comunidad de {0}, su cuenta ha sido temporalmente suspendida. Por favor unirse a la conversación {1}." comment_not_found: "Comentario no encontrado" + no_comments: "Todavía no hay comentarios. ¿Por qué no escribes uno?" + no_comments_and_closed: "No hubo comentarios en este artículo." streams: all: "Todos" article: "Artículo"