Merge pull request #1116 from coralproject/no-comments

No Comments Text

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' ? (
     <div className="close-comments-intro-wrapper">
       <p>
@@ -20,3 +20,10 @@ export default ({status, onClick}) => (
     </div>
   )
 );
+
+CloseCommentsInfo.propTypes = {
+  status: PropTypes.string,
+  onClick: PropTypes.func,
+};
+
+export default CloseCommentsInfo;

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);

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 (
-      <div className="talk-stream-comments-container">
-        <NewCount
-          count={comments.nodes.length - view.length}
-          loadMore={this.viewNewComments}
-        />
-        <TransitionGroup component='div' className="embed__stream">
-          {view.map((comment) => {
-            return (
-              <Comment
-                commentClassNames={commentClassNames}
-                data={data}
-                root={root}
-                disableReply={disableReply}
-                setActiveReplyBox={setActiveReplyBox}
-                activeReplyBox={activeReplyBox}
-                notify={notify}
-                depth={0}
-                postComment={postComment}
-                asset={asset}
-                currentUser={currentUser}
-                postFlag={postFlag}
-                postDontAgree={postDontAgree}
-                loadMore={loadNewReplies}
-                deleteAction={deleteAction}
-                showSignInDialog={showSignInDialog}
-                key={comment.id}
-                comment={comment}
-                charCountEnable={charCountEnable}
-                maxCharCount={maxCharCount}
-                editComment={editComment}
-                emit={emit}
-              />
-            );
-          })}
-        </TransitionGroup>
-        <LoadMore
-          topLevel={true}
-          moreComments={asset.comments.hasNextPage}
-          loadMore={this.loadMore}
-          loadingState={loadingState}
-        />
+      <div>
+        {visibleComments.length ? (
+          <div className="talk-stream-comments-container">
+            <NewCount
+              count={comments.nodes.length - visibleComments.length}
+              loadMore={this.viewNewComments}
+            />
+            <TransitionGroup component='div' className="embed__stream">
+              {visibleComments.map((comment) => {
+                return (
+                  <Comment
+                    commentClassNames={commentClassNames}
+                    data={data}
+                    root={root}
+                    disableReply={disableReply}
+                    setActiveReplyBox={setActiveReplyBox}
+                    activeReplyBox={activeReplyBox}
+                    notify={notify}
+                    depth={0}
+                    postComment={postComment}
+                    asset={asset}
+                    currentUser={currentUser}
+                    postFlag={postFlag}
+                    postDontAgree={postDontAgree}
+                    loadMore={loadNewReplies}
+                    deleteAction={deleteAction}
+                    showSignInDialog={showSignInDialog}
+                    key={comment.id}
+                    comment={comment}
+                    charCountEnable={charCountEnable}
+                    maxCharCount={maxCharCount}
+                    editComment={editComment}
+                    emit={emit}
+                  />
+                );
+              })}
+            </TransitionGroup>
+            <LoadMore
+              topLevel={true}
+              moreComments={asset.comments.hasNextPage}
+              loadMore={this.loadMore}
+              loadingState={loadingState}
+            />
+          </div>
+        ) : (
+          <NoComments assetClosed={asset.isClosed} />
+        )}
       </div>
     );
   }
 }
 
+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;

client/coral-embed-stream/src/components/CommentTombstone.css

@@ -0,0 +1,6 @@
+.commentTombstone {
+  background-color: #F0F0F0;
+  text-align: center;
+  padding: 1em;
+  color: #3E4F71;
+}

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 <action>
 class CommentTombstone extends React.Component {
@@ -19,14 +20,9 @@ class CommentTombstone extends React.Component {
 
   render() {
     return (
-      <div>
+      <div className="talk-comment-tombstone">
         <hr aria-hidden={true} />
-        <p style={{
-          backgroundColor: '#F0F0F0',
-          textAlign: 'center',
-          padding: '1em',
-          color: '#3E4F71',
-        }}>
+        <p className={styles.commentTombstone}>
           {this.getCopy()}
         </p>
       </div>
@@ -34,4 +30,8 @@ class CommentTombstone extends React.Component {
   }
 }
 
+CommentTombstone.propTypes = {
+  action: PropTypes.string,
+};
+
 export default CommentTombstone;

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;
+}

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}) => (
+  <div className="talk-stream-no-comments">
+    {assetClosed ? (
+      <div className={cn(styles.message, 'talk-stream-no-comments-closed-message')}>
+        {t('stream.no_comments_and_closed')}
+      </div>
+    ) : (
+      <div className={cn(styles.message, 'talk-stream-no-comments-message')}>
+        {t('stream.no_comments')}
+      </div>
+    )}
+  </div>
+);
+
+NoComments.propTypes = {
+  assetClosed: PropTypes.bool,
+};
+
+export default NoComments;

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;

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,

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"

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"