decidim-comments 0.0.6 → 0.0.7

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

@@ -1,72 +0,0 @@
-import { Component, PropTypes } 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
- */
-class CommentOrderSelector extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      orderBy: this.props.defaultOrderBy
-    }
-  }
-
-  render() {
-    const { orderBy } =  this.state;
-
-    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
-          data-close-on-click-inside="false">
-          <li>
-            <a>{ I18n.t(`components.comment_order_selector.order.${orderBy}`) }</a>
-            <ul className="menu">
-              <li>
-                <a href="" className="test" onClick={(event) => this._updateOrder(event, "best_rated")} >
-                  { I18n.t("components.comment_order_selector.order.best_rated") }
-                </a>
-              </li>
-              <li>
-                <a href="" onClick={(event) => this._updateOrder(event, "recent")} >
-                  { I18n.t("components.comment_order_selector.order.recent") }
-                </a>
-              </li>
-              <li>
-                <a href="" onClick={(event) => this._updateOrder(event, "older")} >
-                  { I18n.t("components.comment_order_selector.order.older") }
-                </a>
-              </li>
-              <li>
-                <a href="" onClick={(event) => this._updateOrder(event, "most_discussed")} >
-                  { I18n.t("components.comment_order_selector.order.most_discussed") }
-                </a>
-              </li>
-            </ul>
-          </li>
-        </ul>
-      </div>
-    );
-  }
-
-  _updateOrder(event, orderBy) {
-    event.preventDefault();
-    this.setState({ orderBy });
-    this.props.reorderComments(orderBy);
-  }
-
-}
-
-CommentOrderSelector.propTypes = {
-  reorderComments: PropTypes.func.isRequired,
-  defaultOrderBy: PropTypes.string.isRequired
-};
-
-export default CommentOrderSelector;

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

@@ -1,20 +0,0 @@
-import { shallow }          from 'enzyme';
-import CommentOrderSelector from './comment_order_selector.component';
-
-describe('<CommentOrderSelector />', () => {
-  const orderBy = "older";
-  const reorderComments = sinon.spy();
-
-  it("renders a div with classes order-by__dropdown order-by__dropdown--right", () => {
-    const wrapper = shallow(<CommentOrderSelector reorderComments={reorderComments} defaultOrderBy={orderBy} />);
-    expect(wrapper.find('div.order-by__dropdown.order-by__dropdown--right')).to.present();
-  })
-
-   it("should set state order to best_rated if user clicks on the first element", () => {
-      const preventDefault = sinon.spy();
-      const wrapper = shallow(<CommentOrderSelector reorderComments={reorderComments} defaultOrderBy={orderBy} />);
-      wrapper.find('a.test').simulate('click', {preventDefault});
-      expect(reorderComments).to.calledWith("best_rated");
-    });
-})
-

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

@@ -1,75 +0,0 @@
-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, session, votable } = this.props;
-
-    return (
-      <div>
-        {this._renderTitle()}
-        <div className="comment-thread">
-          <Comment
-            comment={filter(Comment.fragments.comment, comment)}
-            session={session}
-            votable={votable}
-            isRootComment
-          />
-        </div>
-      </div>
-    );
-  }
-
-  /**
-   * Render conversation title if comment has commments
-   * @private
-   * @returns {Void|DOMElement} - The conversation's title
-   */
-  _renderTitle() {
-    const { comment: { author, hasComments } } = this.props;
-
-    if (hasComments) {
-      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 = {
-  session: PropTypes.shape({
-    user: PropTypes.any.isRequired
-  }),
-  comment: propType(CommentThread.fragments.comment).isRequired,
-  votable: PropTypes.bool
-};
-
-CommentThread.defaultProps = {
-  session: null,
-  votable: false
-};
-
-export default CommentThread;

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

@@ -1,83 +0,0 @@
-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 generateCUserData     from '../support/generate_user_data';
-
-describe('<CommentThread />', () => {
-  let comment = {};
-  let session = null;
-
-  const commentFragment = gql`
-    fragment Comment on Comment {
-      body
-    }
-  `;
-
-  stubComponent(Comment, {
-    fragments: {
-      comment: commentFragment
-    }
-  });
-
-  beforeEach(() => {
-    const commentsData = generateCommentsData(1);
-
-    const fragment = gql`
-      ${commentThreadFragment}
-      ${commentFragment}
-    `;
-
-    session = {
-      user: generateCUserData()
-    };
-    comment = filter(fragment, commentsData[0]);
-  });
-
-  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 has comments", () => {
-    beforeEach(() => {
-      comment.hasComments = true;
-    });
-
-    it("should render a h6 comment-thread__title with author name", () => {
-      const wrapper = shallow(<CommentThread comment={comment} session={session} />);
-      expect(wrapper.find('h6.comment-thread__title')).to.have.text(`Conversation with ${comment.author.name}`);
-    });
-  });
-
-  describe("should render a Comment", () => {
-    it("and pass the session as a prop to it", () => {
-      const wrapper = shallow(<CommentThread comment={comment} session={session} />);
-      expect(wrapper.find(Comment).first()).to.have.prop("session").deep.equal(session);
-    });
-
-    it("and pass filter comment data as a prop to it", () => {
-      const wrapper = shallow(<CommentThread comment={comment} session={session} />);
-      expect(wrapper.find(Comment).first()).to.have.prop("comment").deep.equal(filter(commentFragment, comment));
-    });
-
-    it("and pass the votable as a prop to it", () => {
-      const wrapper = shallow(<CommentThread comment={comment} session={session} votable />);
-      expect(wrapper.find(Comment).first()).to.have.prop("votable").equal(true);
-    });
-
-    it("and pass the isRootComment equal true", () => {
-      const wrapper = shallow(<CommentThread comment={comment} session={session} votable isRootComment />);
-      expect(wrapper.find(Comment).first()).to.have.prop("isRootComment").equal(true);
-    });
-  });
-});

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

@@ -1,98 +0,0 @@
-import { PropTypes }       from 'react';
-import { propType }        from 'graphql-anywhere';
-import { graphql }         from 'react-apollo';
-import gql                 from 'graphql-tag';
-
-import VoteButton          from './vote_button.component';
-
-import downVoteMutation    from './down_vote.mutation.graphql';
-
-import commentFragment     from './comment.fragment.graphql';
-import commentDataFragment from './comment_data.fragment.graphql';
-import upVoteFragment      from './up_vote.fragment.graphql';
-import downVoteFragment    from './down_vote.fragment.graphql';
-
-export const DownVoteButton = ({ comment: { downVotes, upVoted, downVoted }, downVote }) => {
-  let selectedClass = '';
-
-  if (downVoted) {
-    selectedClass = 'is-vote-selected';
-  } else if (upVoted) {
-     selectedClass = 'is-vote-notselected';
-  }
-
-  return (
-    <VoteButton
-      buttonClassName="comment__votes--down"
-      iconName="icon-chevron-bottom"
-      votes={downVotes}
-      voteAction={downVote}
-      disabled={upVoted || downVoted}
-      selectedClass={selectedClass}
-    />
-  );
-};
-
-DownVoteButton.fragments = {
-  comment: gql`
-    ${downVoteFragment}
-  `
-};
-
-DownVoteButton.propTypes = {
-  comment: propType(DownVoteButton.fragments.comment).isRequired,
-  downVote: PropTypes.func.isRequired
-};
-
-const DownVoteButtonWithMutation = graphql(gql`
-  ${downVoteMutation}
-  ${commentFragment}
-  ${commentDataFragment}
-  ${upVoteFragment}
-  ${downVoteFragment}
-`, {
-  props: ({ ownProps, mutate }) => ({
-    downVote: () => mutate({
-      variables: {
-        id: ownProps.comment.id
-      },
-      optimisticResponse: {
-        __typename: 'Mutation',
-        comment: {
-          __typename: 'CommentMutation',
-          downVote: {
-            __typename: 'Comment',
-            ...ownProps.comment,
-            downVotes: ownProps.comment.downVotes + 1,
-            downVoted: true
-          }
-        }
-      },
-      updateQueries: {
-        GetComments: (prev, { mutationResult: { data } }) => {
-          const commentReducer = (comment) => {
-            const replies = comment.comments || [];
-
-            if (comment.id === ownProps.comment.id) {
-              return data.comment.downVote;
-            }
-            return {
-              ...comment,
-              comments: replies.map(commentReducer)
-            };
-          };
-
-          return {
-            ...prev,
-            commentable: {
-              ...prev.commentable,
-              comments: prev.commentable.comments.map(commentReducer)
-            }
-          }
-        }
-      }
-    })
-  })
-})(DownVoteButton);
-
-export default DownVoteButtonWithMutation;

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

@@ -1,48 +0,0 @@
-import { shallow }          from 'enzyme';
-import { filter }           from 'graphql-anywhere';
-import gql                  from 'graphql-tag';
-
-import { DownVoteButton }   from './down_vote_button.component';
-
-import VoteButton           from './vote_button.component';
-
-import downVoteFragment     from './down_vote.fragment.graphql';
-
-import stubComponent        from '../support/stub_component';
-import generateCommentsData from '../support/generate_comments_data';
-
-describe("<DownVoteButton />", () => {
-  let comment = {};
-  const downVote = () => {};
-
-  stubComponent(VoteButton);
-
-  beforeEach(() => {
-    let commentsData = generateCommentsData(1);
-    
-    const fragment = gql`
-      ${downVoteFragment}
-    `;
-
-    comment = filter(fragment, commentsData[0]);
-  });
-
-  it("should render a VoteButton component with the correct props", () => {
-    const wrapper = shallow(<DownVoteButton comment={comment} downVote={downVote} />);
-    expect(wrapper.find(VoteButton)).to.have.prop("buttonClassName").equal("comment__votes--down");
-    expect(wrapper.find(VoteButton)).to.have.prop("iconName").equal("icon-chevron-bottom");
-    expect(wrapper.find(VoteButton)).to.have.prop("votes").equal(comment.downVotes);    
-  });
-
-  it("should pass disabled prop as true if comment downVoted is true", () => {
-    comment.downVoted = true;
-    const wrapper = shallow(<DownVoteButton comment={comment} downVote={downVote} />);
-    expect(wrapper.find(VoteButton)).to.have.prop("disabled").equal(true);        
-  });
-
-  it("should pass disabled prop as true if comment downVoted is true", () => {
-    comment.downVoted = true;
-    const wrapper = shallow(<DownVoteButton comment={comment} downVote={downVote} />);
-    expect(wrapper.find(VoteButton)).to.have.prop("disabled").equal(true);        
-  });
-});

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

@@ -1,23 +0,0 @@
-import { Component } from 'react';
-import { I18n }      from 'react-i18nify';
-
-import Comment       from './comment.component';
-
-/**
- * A wrapper component for a highlighted component.
- * @class
- * @augments Component
- * @todo It's not used right now
- */
-export default class FeaturedComment extends Component {
-  render() {
-    return (
-      <section className="comments">
-        <h4 className="section-heading">{ I18n.t("components.featured_comment.title") }</h4>
-        <div className="comment-thread comment--pinned">
-          <Comment />
-        </div>
-      </section>
-    );
-  }
-}

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

@@ -1,15 +0,0 @@
-import { shallow }     from 'enzyme';
-
-import FeaturedComment from './featured_comment.component';
-import Comment         from './comment.component';
-
-import stubComponent   from '../support/stub_component';
-
-describe('<FeaturedComment />', () => {
-  stubComponent(Comment);
-
-  it("should render a section of class comments", () => {
-    const wrapper = shallow(<FeaturedComment />);
-    expect(wrapper.find('section.comments')).to.be.present();
-  });
-});

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

@@ -1,98 +0,0 @@
-import { PropTypes }       from 'react';
-import { propType }        from 'graphql-anywhere';
-import { graphql }         from 'react-apollo';
-import gql                 from 'graphql-tag';
-
-import VoteButton          from './vote_button.component';
-
-import upVoteMutation      from './up_vote.mutation.graphql';
-
-import commentFragment     from './comment.fragment.graphql';
-import commentDataFragment from './comment_data.fragment.graphql';
-import upVoteFragment      from './up_vote.fragment.graphql';
-import downVoteFragment    from './down_vote.fragment.graphql';
-
-export const UpVoteButton = ({ comment: { upVotes, upVoted, downVoted }, upVote }) => {
-  let selectedClass = '';
-
-  if (upVoted) {
-    selectedClass = 'is-vote-selected';
-  } else if (downVoted) {
-     selectedClass = 'is-vote-notselected';
-  }
-
-  return (
-    <VoteButton
-      buttonClassName="comment__votes--up"
-      iconName="icon-chevron-top"
-      votes={upVotes}
-      voteAction={upVote}
-      disabled={upVoted || downVoted}
-      selectedClass={selectedClass}
-    />
-  );
-}
-
-UpVoteButton.fragments = {
-  comment: gql`
-    ${upVoteFragment}
-  `
-};
-
-UpVoteButton.propTypes = {
-  comment: propType(UpVoteButton.fragments.comment).isRequired,
-  upVote: PropTypes.func.isRequired
-};
-
-const UpVoteButtonWithMutation = graphql(gql`
-  ${upVoteMutation}
-  ${commentFragment}
-  ${commentDataFragment}
-  ${upVoteFragment}
-  ${downVoteFragment}
-`, {
-  props: ({ ownProps, mutate }) => ({
-    upVote: () => mutate({
-      variables: {
-        id: ownProps.comment.id
-      },
-      optimisticResponse: {
-        __typename: 'Mutation',
-        comment: {
-          __typename: 'CommentMutation',
-          upVote: {
-            __typename: 'Comment',
-            ...ownProps.comment,
-            upVotes: ownProps.comment.upVotes + 1,
-            upVoted: true
-          }
-        }
-      },
-      updateQueries: {
-        GetComments: (prev, { mutationResult: { data } }) => {
-          const commentReducer = (comment) => {
-            const replies = comment.comments || [];
-
-            if (comment.id === ownProps.comment.id) {
-              return data.comment.upVote;
-            }
-            return {
-              ...comment,
-              comments: replies.map(commentReducer)
-            };
-          };
-
-          return {
-            ...prev,
-            commentable: {
-              ...prev.commentable,
-              comments: prev.commentable.comments.map(commentReducer)
-            }
-          }
-        }
-      }
-    })
-  })
-})(UpVoteButton);
-
-export default UpVoteButtonWithMutation;