Translations, Proptypes, NoComments Component

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

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"