comments.component.jsx in decidim-0.0.5

- old
+ new

@@ -19,11 +19,11 @@
  * @class
  * @augments Component
  */
 export class Comments extends Component {
   render() {
-    const { comments, reorderComments, orderBy, loading } = this.props;
+    const { commentable: { comments }, reorderComments, orderBy, loading } = this.props;
     let commentClasses = "comments";
     let commentHeader = I18n.t("components.comments.title", { count: comments.length });
 
     if (loading) {
       commentClasses += " loading-comments"
@@ -40,80 +40,101 @@
             <CommentOrderSelector
               reorderComments={reorderComments}
               defaultOrderBy={orderBy}
             />
           </div>
+          {this._renderBlockedCommentsWarning()}
           {this._renderCommentThreads()}
           {this._renderAddCommentForm()}
         </section>
       </div>
     );
   }
 
   /**
+   * Renders a warning message if the commentable doesn't accept new comments.
+   * @private
+   * @returns {Void|DOMElement} - A warning message or nothing.
+   */
+  _renderBlockedCommentsWarning() {
+    const { commentable: { acceptsNewComments } } = this.props;
+
+    if (!acceptsNewComments) {
+      return (
+        <div className="callout warning">
+          <p>{ I18n.t("components.comments.blocked_comments_warning") }</p>
+        </div>
+      );
+    }
+
+    return null;
+  }
+
+  /**
    * Iterates the comment's collection and render a CommentThread for each one
    * @private
    * @returns {ReactComponent[]} - A collection of CommentThread components
    */
   _renderCommentThreads() {
-    const { comments, session, options: { votable } } = this.props;
+    const { session, commentable: { comments, commentsHaveVotes } } = this.props;
 
     return comments.map((comment) => (
       <CommentThread
         key={comment.id}
         comment={filter(CommentThread.fragments.comment, comment)}
         session={session}
-        votable={votable}
+        votable={commentsHaveVotes}
       />
     ))
   }
 
   /**
    * If current user is present it renders the add comment form
    * @private
    * @returns {Void|ReactComponent} - A AddCommentForm component or nothing
    */
   _renderAddCommentForm() {
-    const { session, commentableId, commentableType, options: { arguable } } = this.props;
+    const { session, commentable } = this.props;
+    const { acceptsNewComments, commentsHaveAlignment } = commentable;
 
-    if (session) {
+    if (acceptsNewComments) {
       return (
         <AddCommentForm
           session={session}
-          commentableId={commentableId}
-          commentableType={commentableType}
-          arguable={arguable}
+          commentable={commentable}
+          arguable={commentsHaveAlignment}
         />
       );
     }
 
     return null;
   }
 }
 
 Comments.propTypes = {
   loading: PropTypes.bool,
-  comments: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string.isRequired
-  })),
   session: PropTypes.shape({
     user: PropTypes.any.isRequired
   }),
-  commentableId: PropTypes.string.isRequired,
-  commentableType: PropTypes.string.isRequired,
-  options: PropTypes.shape({
-    arguable: PropTypes.bool
-  }).isRequired,
+  commentable: PropTypes.shape({
+    acceptsNewComments: PropTypes.bool,
+    commentsHaveAlignment: PropTypes.bool,
+    commentsHaveVotes: PropTypes.bool,
+    comments: PropTypes.arrayOf(PropTypes.shape({
+      id: PropTypes.string.isRequired
+    }))
+  }),
   orderBy: PropTypes.string.isRequired,
   reorderComments: PropTypes.func.isRequired
 };
 
 Comments.defaultProps = {
   loading: false,
-  comments: null,
   session: null,
-  commentableId: null
+  commentable: {
+    comments: []
+  }
 };
 
 /**
  * Wrap the Comments component with a GraphQL query and children
  * fragments.
@@ -121,24 +142,22 @@
 
 window.Comments = Comments;
 
 const CommentsWithData = graphql(gql`
   ${commentsQuery}
-  ${AddCommentForm.fragments.user}
+  ${AddCommentForm.fragments.session}
+  ${AddCommentForm.fragments.commentable}
   ${CommentThread.fragments.comment}
 `, {
   options: {
     pollInterval: 15000
   },
-  props: ({ ownProps, data: { loading, session, comments, refetch }}) => ({
-    loading: loading,
-    comments: comments || [],
+  props: ({ ownProps, data: { loading, session, commentable, refetch }}) => ({
+    loading,
     session,
-    commentableId: ownProps.commentableId,
-    commentableType: ownProps.commentableType,
+    commentable,
     orderBy: ownProps.orderBy,
-    options: ownProps.options,
     reorderComments: (orderBy) => {
       return refetch({
         orderBy
       });
     }
@@ -148,33 +167,22 @@
 /**
  * Wrap the CommentsWithData component within an Application component to
  * connect it with Apollo client and store.
  * @returns {ReactComponent} - A component wrapped within an Application component
  */
-const CommentsApplication = ({ locale, commentableId, commentableType, options }) => (
+const CommentsApplication = ({ locale, commentableId, commentableType }) => (
   <Application locale={locale}>
     <CommentsWithData
       commentableId={commentableId}
       commentableType={commentableType}
-      options={options}
       orderBy="older"
     />
   </Application>
 );
 
 CommentsApplication.propTypes = {
   locale: PropTypes.string.isRequired,
-  commentableId: React.PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number
-  ]),
-  commentableType: PropTypes.string.isRequired,
-  options: PropTypes.shape({
-    arguable: PropTypes.bool
-  }).isRequired
-};
-
-CommentsApplication.defaultProps = {
-  commentableId: null
+  commentableId: PropTypes.string.isRequired,
+  commentableType: PropTypes.string.isRequired
 };
 
 export default CommentsApplication;