decidim-comments 0.0.1

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

@@ -0,0 +1,12 @@
+fragment Comment on Comment {
+  ...CommentData
+  replies {
+    ...CommentData
+    replies {
+      ...CommentData
+      replies {
+        ...CommentData
+      } 
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+fragment CommentData on Comment {
+  id
+  body
+  createdAt
+  author {
+    name,
+    avatarUrl
+  }
+  canHaveReplies
+  alignment
+}

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

@@ -0,0 +1,28 @@
+import { Component } from 'react';
+import { I18n }      from 'react-i18nify';
+
+/**
+ * A simple static component with the comment's order selector markup
+ * @class
+ * @augments Component
+ * @todo Needs a proper implementation
+ */
+export default class CommentOrderSelector extends Component {
+  render() {
+    return (
+      <div className="order-by__dropdown order-by__dropdown--right">
+        <span className="order-by__text">{ I18n.t("components.comment_order_selector.title") }</span>
+        <ul className="dropdown menu" data-dropdown-menu>
+          <li>
+            <a>{ I18n.t("components.comment_order_selector.order.most_voted") }</a>
+            <ul className="menu">
+              <li><a>{ I18n.t("components.comment_order_selector.order.most_voted") }</a></li>
+              <li><a>{ I18n.t("components.comment_order_selector.order.recent") }</a></li>
+              <li><a>{ I18n.t("components.comment_order_selector.order.older") }</a></li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,9 @@
+import { shallow }          from 'enzyme';
+import CommentOrderSelector from './comment_order_selector.component';
+
+describe('<CommentOrderSelector />', () => {
+  it("renders a div with classes order-by__dropdown order-by__dropdown--right", () => {
+    const wrapper = shallow(<CommentOrderSelector />);
+    expect(wrapper.find('div.order-by__dropdown.order-by__dropdown--right')).to.present();
+  })
+})

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

@@ -0,0 +1,64 @@
+import { Component, PropTypes } from 'react';
+import { filter, propType }     from 'graphql-anywhere';
+import gql                      from 'graphql-tag';
+import { I18n }                 from 'react-i18nify';
+
+import Comment                  from './comment.component';
+
+import commentThreadFragment    from './comment_thread.fragment.graphql'
+
+/**
+ * Define a collection of comments. It represents a conversation with multiple users.
+ * @class
+ * @augments Component
+ * @todo It doesn't handle multiple comments yet
+ */
+class CommentThread extends Component {
+  render() {
+    const { comment, currentUser } = this.props;
+
+    return (
+      <div>
+        {this._renderTitle()}
+        <div className="comment-thread">
+          <Comment comment={filter(Comment.fragments.comment, comment)} currentUser={currentUser} />
+        </div>
+      </div>
+    );
+  }
+
+  /**
+   * Render conversation title if comment has replies
+   * @private
+   * @returns {Void|DOMElement} - The conversation's title
+   */
+  _renderTitle() {
+    const { comment: { author, replies } } = this.props;
+    
+    if (replies.length > 0) {
+      return (
+        <h6 className="comment-thread__title">
+          { I18n.t("components.comment_thread.title", { authorName: author.name }) }
+        </h6>
+      );
+    }
+
+    return null;
+  }
+}
+
+CommentThread.fragments = {
+  comment: gql`
+    ${commentThreadFragment}
+    ${Comment.fragments.comment}
+  `
+};
+
+CommentThread.propTypes = {
+  currentUser: PropTypes.shape({
+    name: PropTypes.string.isRequired
+  }),
+  comment: propType(CommentThread.fragments.comment).isRequired
+};
+
+export default CommentThread;

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

@@ -0,0 +1,71 @@
+import { shallow }             from 'enzyme';
+import { filter }              from 'graphql-anywhere';
+import gql                     from 'graphql-tag';
+
+import CommentThread           from './comment_thread.component';
+import Comment                 from './comment.component';
+
+import commentThreadFragment   from './comment_thread.fragment.graphql'
+
+import stubComponent           from '../support/stub_component';
+import generateCommentsData    from '../support/generate_comments_data';
+import generateCurrentUserData from '../support/generate_current_user_data';
+
+describe('<CommentThread />', () => {
+  let comment = {};
+  let currentUser = null;
+
+  const commentFragment = gql`
+    fragment Comment on Comment {
+      body
+    }
+  `;
+
+  stubComponent(Comment, {
+    fragments: {
+      comment: commentFragment
+    }
+  });
+
+  beforeEach(() => {
+    const commentsData = generateCommentsData(1);
+  
+    const fragment = gql`
+      ${commentThreadFragment}
+      ${commentFragment}
+    `;
+
+    currentUser = generateCurrentUserData();
+    comment = filter(fragment, commentsData[0]);
+  });
+
+  describe("when comment doesn't have replies", () => {
+    it("should not render a title with author name", () => {
+      const wrapper = shallow(<CommentThread comment={comment} currentUser={currentUser} />);
+      expect(wrapper.find('h6.comment-thread__title')).not.to.present();
+    });
+  });
+
+  describe("when comment does have replies", () => {
+    beforeEach(() => {
+      comment.replies = generateCommentsData(3);  
+    });
+
+    it("should render a h6 comment-thread__title with author name", () => {
+      const wrapper = shallow(<CommentThread comment={comment} currentUser={currentUser} />);
+      expect(wrapper.find('h6.comment-thread__title')).to.have.text(`Conversation with ${comment.author.name}`);
+    });
+  });
+
+  describe("should render a Comment", () => {
+    it("and pass the currentUser as a prop to it", () => {
+      const wrapper = shallow(<CommentThread comment={comment} currentUser={currentUser} />);
+      expect(wrapper.find(Comment).first()).to.have.prop("currentUser").deep.equal(currentUser);
+    });
+
+    it("and pass filter comment data as a prop to it", () => {
+      const wrapper = shallow(<CommentThread comment={comment} currentUser={currentUser} />);
+      expect(wrapper.find(Comment).first()).to.have.prop("comment").deep.equal(filter(commentFragment, comment));
+    });  
+  });
+});

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

@@ -0,0 +1,9 @@
+fragment CommentThread on Comment {
+  author {
+    name
+  }
+  replies {
+    id
+  }
+  ...Comment
+}

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

@@ -0,0 +1,139 @@
+import { Component, PropTypes } from 'react';
+import { graphql }              from 'react-apollo';
+import gql                      from 'graphql-tag';
+import { filter }               from 'graphql-anywhere';
+import { I18n }                 from 'react-i18nify';
+
+import Application              from '../application/application.component';
+
+import CommentThread            from './comment_thread.component';
+import AddCommentForm           from './add_comment_form.component';
+
+import commentsQuery            from './comments.query.graphql';
+
+/**
+ * The core class of the Decidim Comments engine.
+ * It renders a collection of comments given a commentable id and type.
+ * @global
+ * @class
+ * @augments Component
+ */
+export class Comments extends Component {
+  render() {
+    const { comments } = this.props;
+
+    return (
+      <div className="columns large-9" id="comments">
+        <section className="comments">
+          <div className="row collapse order-by">
+            <h2 className="order-by__text section-heading">
+              { I18n.t("components.comments.title", { count: comments.length }) }
+            </h2>
+          </div>
+          {this._renderCommentThreads()}
+          {this._renderAddCommentForm()}
+        </section>
+      </div>
+    );
+  }
+ 
+  /**
+   * Iterates the comment's collection and render a CommentThread for each one
+   * @private
+   * @returns {ReactComponent[]} - A collection of CommentThread components
+   */
+  _renderCommentThreads() {
+    const { comments, currentUser } = this.props;
+
+    return comments.map((comment) => (
+      <CommentThread 
+        key={comment.id} 
+        comment={filter(CommentThread.fragments.comment, comment)} 
+        currentUser={currentUser}
+      />
+    ))
+  }
+ 
+  /**
+   * If current user is present it renders the add comment form
+   * @private
+   * @returns {Void|ReactComponent} - A AddCommentForm component or nothing
+   */
+  _renderAddCommentForm() {
+    const { currentUser, commentableId, commentableType, options: { arguable } } = this.props;
+    
+    if (currentUser) {
+      return (
+        <AddCommentForm 
+          currentUser={currentUser}
+          commentableId={commentableId}
+          commentableType={commentableType}
+          arguable={arguable}
+        />
+      );
+    }
+
+    return null;
+  }
+}
+
+Comments.propTypes = {
+  comments: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired
+  })),
+  currentUser: PropTypes.shape({
+    name: PropTypes.string.isRequired
+  }),
+  commentableId: PropTypes.string.isRequired,
+  commentableType: PropTypes.string.isRequired,
+  options: PropTypes.shape({
+    arguable: PropTypes.bool
+  }).isRequired
+};
+
+/**
+ * Wrap the Comments component with a GraphQL query and children
+ * fragments.
+ */
+const CommentsWithData = graphql(gql`
+  ${commentsQuery}
+  ${CommentThread.fragments.comment}
+`, {
+  options: { pollInterval: 15000 },
+  props: ({ ownProps, data: { currentUser, comments }}) => ({
+    comments: comments || [],
+    currentUser: currentUser || null,
+    commentableId: ownProps.commentableId,
+    commentableType: ownProps.commentableType,
+    options: ownProps.options
+  })
+})(Comments);
+
+/**
+ * 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 }) => (
+  <Application locale={locale}>
+    <CommentsWithData 
+      commentableId={commentableId}
+      commentableType={commentableType}
+      options={options}
+    />
+  </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
+};
+
+export default CommentsApplication;

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

@@ -0,0 +1,106 @@
+import { shallow }             from 'enzyme';
+import { filter }              from 'graphql-anywhere';
+import gql                     from 'graphql-tag';
+
+import { Comments }            from './comments.component';
+import CommentThread           from './comment_thread.component';
+import AddCommentForm          from './add_comment_form.component';
+
+import commentsQuery           from './comments.query.graphql'
+
+import stubComponent           from '../support/stub_component';
+import generateCommentsData    from '../support/generate_comments_data';
+import generateCurrentUserData from '../support/generate_current_user_data';
+import resolveGraphQLQuery     from '../support/resolve_graphql_query';
+
+describe('<Comments />', () => {
+  let comments = [];
+  let currentUser = null;
+  const commentableId = "1";
+  const commentableType = "Decidim::ParticipatoryProcess";
+
+  const commentThreadFragment = gql`
+    fragment CommentThread on Comment {
+      author
+    }
+  `;
+
+  stubComponent(CommentThread, {
+    fragments: {
+      comment: commentThreadFragment
+    }
+  });
+  
+  stubComponent(AddCommentForm);
+
+  beforeEach(() => {
+    const currentUserData = generateCurrentUserData();
+    const commentsData = generateCommentsData(15);
+
+    const query = gql`
+      ${commentsQuery}
+      ${commentThreadFragment}
+    `;
+
+    const result = resolveGraphQLQuery(query, {
+      filterResult: false,
+      rootValue: {
+        currentUser: currentUserData,
+        comments: commentsData
+      },
+      variables: {
+        commentableId,
+        commentableType
+      }
+    });
+
+    currentUser = result.currentUser;
+    comments = result.comments;
+  });
+
+  it("should render a div of id comments", () => {
+    const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} currentUser={currentUser} options={{}} />);
+    expect(wrapper.find('#comments')).to.be.present();
+  });
+
+  describe("should render 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} currentUser={currentUser} options={{}} />);
+      expect(wrapper).to.have.exactly(comments.length).descendants(CommentThread);
+      wrapper.find(CommentThread).forEach((node, idx) => {
+        expect(node).to.have.prop("comment").deep.equal(filter(commentThreadFragment, comments[idx]));
+      });
+    });
+
+    it("and pass the currentUser as a prop to it", () => {
+      const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} currentUser={currentUser} options={{}} />);
+      expect(wrapper).to.have.exactly(comments.length).descendants(CommentThread);
+      wrapper.find(CommentThread).forEach((node) => {
+        expect(node).to.have.prop("currentUser").deep.equal(currentUser);
+      });
+    });
+  });
+
+  it("should render comments count", () => {
+    const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} currentUser={currentUser} options={{}} />);
+    const rex = new RegExp(`${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} currentUser={currentUser} options={{ arguable: true }} />);
+    expect(wrapper).to.have.exactly(1).descendants(AddCommentForm);
+    expect(wrapper.find(AddCommentForm)).to.have.prop('arguable').equal(true);
+  });
+
+  describe("if currentUser is not present", () => {
+    beforeEach(() => {
+      currentUser = null;
+    });
+
+    it("should not render a AddCommentForm component", () => {
+      const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} currentUser={currentUser} options={{}} />);
+      expect(wrapper.find(AddCommentForm)).not.to.be.present();
+    });
+  });
+});