decidim-comments 0.0.3 → 0.0.5

data/app/frontend/comments/comment_thread.component.test.jsx

@@ -41,16 +41,16 @@ describe('<CommentThread />', () => {
     comment = filter(fragment, commentsData[0]);
   });
 
-  describe("when comment doesn't have replies", () => {
+  describe("when comment doesn't have comments", () => {
     it("should not render a title with author name", () => {
       const wrapper = shallow(<CommentThread comment={comment} session={session} />);
       expect(wrapper.find('h6.comment-thread__title')).not.to.present();
     });
   });
 
-  describe("when comment does have replies", () => {
+  describe("when comment does has comments", () => {
     beforeEach(() => {
-      comment.hasReplies = true;
+      comment.hasComments = true;
     });
 
     it("should render a h6 comment-thread__title with author name", () => {

data/app/frontend/comments/comment_thread.fragment.graphql

@@ -2,6 +2,6 @@ fragment CommentThread on Comment {
   author {
     name
   }
-  hasReplies,
+  hasComments
   ...Comment
 }

data/app/frontend/comments/comments.component.jsx

@@ -21,7 +21,7 @@ import commentsQuery            from './comments.query.graphql';
  */
 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 });
 
@@ -42,6 +42,7 @@ export class Comments extends Component {
               defaultOrderBy={orderBy}
             />
           </div>
+          {this._renderBlockedCommentsWarning()}
           {this._renderCommentThreads()}
           {this._renderAddCommentForm()}
         </section>
@@ -49,20 +50,39 @@ export class Comments extends Component {
     );
   }
 
+  /**
+   * 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}
       />
     ))
   }
@@ -73,15 +93,15 @@ export class Comments extends Component {
    * @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}
         />
       );
     }
@@ -92,21 +112,29 @@ export class Comments extends Component {
 
 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,
+  session: null,
+  commentable: {
+    comments: []
+  }
+};
+
 /**
  * Wrap the Comments component with a GraphQL query and children
  * fragments.
@@ -116,20 +144,18 @@ 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
@@ -143,12 +169,11 @@ const CommentsWithData = graphql(gql`
  * 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>
@@ -156,14 +181,8 @@ const CommentsApplication = ({ locale, commentableId, commentableType, options }
 
 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
+  commentableId: PropTypes.string.isRequired,
+  commentableType: PropTypes.string.isRequired
 };
 
 export default CommentsApplication;

data/app/frontend/comments/comments.component.test.jsx

@@ -15,10 +15,10 @@ import generateUserData     from '../support/generate_user_data';
 import resolveGraphQLQuery  from '../support/resolve_graphql_query';
 
 describe('<Comments />', () => {
-  let comments = [];
+  let commentable = {};
   let session = null;
   const commentableId = "1";
-  const commentableType = "Decidim::ParticipatoryProcess";
+  const commentableType = "Decidim::DummyResource";
   const orderBy = "older";
   const reorderComments = () => {};
 
@@ -28,14 +28,20 @@ describe('<Comments />', () => {
     }
   `;
 
-  const addCommentFragment = gql`
-    fragment AddCommentForm on User {
+  const addCommentFormSessionFragment = gql`
+    fragment AddCommentFormSession on Session {
       verifiedUserGroups {
         id
       }
     }
   `;
 
+  const addCommentFormCommentableFragment = gql`
+    fragment AddCommentFormCommentable on Commentable {
+      id
+    }
+  `;
+
   stubComponent(CommentOrderSelector)
 
   stubComponent(CommentThread, {
@@ -46,7 +52,8 @@ describe('<Comments />', () => {
 
   stubComponent(AddCommentForm, {
     fragments: {
-      user: addCommentFragment
+      session: addCommentFormSessionFragment,
+      commentable: addCommentFormCommentableFragment
     }
   });
 
@@ -57,7 +64,8 @@ describe('<Comments />', () => {
     const query = gql`
       ${commentsQuery}
       ${commentThreadFragment}
-      ${addCommentFragment}
+      ${addCommentFormSessionFragment}
+      ${addCommentFormCommentableFragment}
     `;
 
     const result = resolveGraphQLQuery(query, {
@@ -66,7 +74,12 @@ describe('<Comments />', () => {
         session: {
           user: userData
         },
-        comments: commentsData
+        commentable: {
+          acceptsNewComments: true,
+          commentsHaveAlignment: true,
+          commentsHaveVotes: true,
+          comments: commentsData
+        }
       },
       variables: {
         orderBy,
@@ -76,82 +89,82 @@ describe('<Comments />', () => {
     });
 
     session = result.session;
-    comments = result.comments;
+    commentable = result.commentable;
   });
 
-  it("should render loading-comments calss and the respective loading text", () => {
-    const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} session={session} options={{}} reorderComments={reorderComments} orderBy={orderBy} loading />);
+  it("renders loading-comments class and the respective loading text", () => {
+    const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} loading />);
     expect(wrapper.find('.loading-comments')).to.be.present();
     expect(wrapper.find('h2')).to.have.text("Loading comments ...");
   });
 
-  it("should render a div of id comments", () => {
-    const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} session={session} options={{}} reorderComments={reorderComments} orderBy={orderBy} />);
+  it("renders a div of id comments", () => {
+    const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
     expect(wrapper.find('#comments')).to.be.present();
   });
 
-  describe("should render a CommentThread component for each comment", () => {
+  describe("renders a CommentThread component for each comment", () => {
     it("and pass filter comment data as a prop to it", () => {
-      const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} session={session} options={{}} reorderComments={reorderComments} orderBy={orderBy} />);
-      expect(wrapper).to.have.exactly(comments.length).descendants(CommentThread);
+      const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
+      expect(wrapper).to.have.exactly(commentable.comments.length).descendants(CommentThread);
       wrapper.find(CommentThread).forEach((node, idx) => {
-        expect(node).to.have.prop("comment").deep.equal(filter(commentThreadFragment, comments[idx]));
+        expect(node).to.have.prop("comment").deep.equal(filter(commentThreadFragment, commentable.comments[idx]));
       });
     });
 
     it("and pass the session as a prop to it", () => {
-      const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} session={session} options={{}} reorderComments={reorderComments} orderBy={orderBy} />);
-      expect(wrapper).to.have.exactly(comments.length).descendants(CommentThread);
+      const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
+      expect(wrapper).to.have.exactly(commentable.comments.length).descendants(CommentThread);
       wrapper.find(CommentThread).forEach((node) => {
         expect(node).to.have.prop("session").deep.equal(session);
       });
     });
 
-    it("and pass the option votable as a prop to it", () => {
-      const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} session={session} options={{ votable: true }} reorderComments={reorderComments} orderBy={orderBy} />);
-      expect(wrapper).to.have.exactly(comments.length).descendants(CommentThread);
+    it("and pass the commentable 'commentsHaveVotes' property as a prop to it", () => {
+      const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
+      expect(wrapper).to.have.exactly(commentable.comments.length).descendants(CommentThread);
       wrapper.find(CommentThread).forEach((node) => {
         expect(node).to.have.prop("votable").equal(true);
       });
     });
   });
 
-  it("should render comments count", () => {
-    const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} session={session} options={{}} reorderComments={reorderComments} orderBy={orderBy} />);
-    const rex = new RegExp(`${comments.length} comments`);
+  it("renders comments count", () => {
+    const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
+    const rex = new RegExp(`${commentable.comments.length} comments`);
     expect(wrapper.find('h2.section-heading')).to.have.text().match(rex);
   });
 
-  it("should render a AddCommentForm component and pass 'options.arguable' as a prop", () => {
-    const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} session={session} options={{ arguable: true }} reorderComments={reorderComments} orderBy={orderBy} />);
+  it("renders a AddCommentForm component and pass the commentable 'commentsHaveAlignment' as a prop", () => {
+    const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
     expect(wrapper).to.have.exactly(1).descendants(AddCommentForm);
     expect(wrapper.find(AddCommentForm)).to.have.prop('arguable').equal(true);
   });
 
-  describe("if session is not present", () => {
+  describe("when the commentable cannot accept new comments", () => {
     beforeEach(() => {
-      session = null;
+      commentable.acceptsNewComments = false;
     });
 
-    it("should not render a AddCommentForm component", () => {
-      const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} session={session} options={{}} reorderComments={reorderComments} orderBy={orderBy} />);
+    it("doesn't render an AddCommentForm component", () => {
+      const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
       expect(wrapper.find(AddCommentForm)).not.to.be.present();
     });
-  });
 
-  describe("should render a CommentOrderSelector component", () => {
-    it("should render a CommentOrderSelector component", () => {
-        const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} session={session} options={{}} reorderComments={reorderComments} orderBy={orderBy} />);
-        expect(wrapper.find(CommentOrderSelector)).to.be.present();
-      });
+    it("renders a callout message to inform the user that comments are blocked", () => {
+      const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
+      expect(wrapper.find('.callout.warning')).to.include.text("disabled");
+    });
+  });
 
+  describe("renders a CommentOrderSelector component", () => {
     it("and pass the reorderComments as a prop to it", () => {
-      const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} session={session} options={{}} reorderComments={reorderComments} orderBy={orderBy} />);
+      const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
       expect(wrapper.find(CommentOrderSelector)).to.have.prop('reorderComments').deep.equal(reorderComments);
     });
 
     it("and pass the orderBy as a prop to it", () => {
-      const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} session={session} options={{}} reorderComments={reorderComments} orderBy={orderBy} />);
+      const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
       expect(wrapper.find(CommentOrderSelector)).to.have.prop('defaultOrderBy').equal('older');
     });
   });

data/app/frontend/comments/comments.query.graphql

@@ -4,10 +4,16 @@ query GetComments($commentableId: String!, $commentableType: String!, $orderBy:
       name
       avatarUrl
     }
-    ...AddCommentForm
+    ...AddCommentFormSession
   }
-  comments(commentableId: $commentableId, commentableType: $commentableType, orderBy: $orderBy) {
-    id
-    ...CommentThread
+  commentable(id: $commentableId, type: $commentableType) {
+    acceptsNewComments
+    commentsHaveAlignment
+    commentsHaveVotes
+    comments(orderBy: $orderBy) {
+      id
+      ...CommentThread
+    }
+    ...AddCommentFormCommentable
   }
 }

data/app/frontend/comments/down_vote_button.component.jsx

@@ -71,20 +71,23 @@ const DownVoteButtonWithMutation = graphql(gql`
       updateQueries: {
         GetComments: (prev, { mutationResult: { data } }) => {
           const commentReducer = (comment) => {
-            const replies = comment.replies || [];
+            const replies = comment.comments || [];
 
             if (comment.id === ownProps.comment.id) {
               return data.comment.downVote;
             }
             return {
               ...comment,
-              replies: replies.map(commentReducer)
+              comments: replies.map(commentReducer)
             };
           };
 
           return {
             ...prev,
-            comments: prev.comments.map(commentReducer)
+            commentable: {
+              ...prev.commentable,
+              comments: prev.commentable.comments.map(commentReducer)
+            }
           }
         }
       }

data/app/frontend/comments/up_vote_button.component.jsx

@@ -46,7 +46,7 @@ UpVoteButton.propTypes = {
 
 const UpVoteButtonWithMutation = graphql(gql`
   ${upVoteMutation}
-  ${commentFragment}  
+  ${commentFragment}
   ${commentDataFragment}
   ${upVoteFragment}
   ${downVoteFragment}
@@ -71,20 +71,23 @@ const UpVoteButtonWithMutation = graphql(gql`
       updateQueries: {
         GetComments: (prev, { mutationResult: { data } }) => {
           const commentReducer = (comment) => {
-            const replies = comment.replies || [];
+            const replies = comment.comments || [];
 
             if (comment.id === ownProps.comment.id) {
               return data.comment.upVote;
             }
             return {
               ...comment,
-              replies: replies.map(commentReducer)
+              comments: replies.map(commentReducer)
             };
           };
 
           return {
             ...prev,
-            comments: prev.comments.map(commentReducer)
+            commentable: {
+              ...prev.commentable,
+              comments: prev.commentable.comments.map(commentReducer)
+            }
           }
         }
       }