import React, { Component, PropTypes } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import CommentsList from './CommentsList';
import * as commentsActions from './commentsActions';
import { getCommentsFromState } from './../helpers/stateHelpers';

import './Comments.scss';

@connect(
  state => ({
    comments: state.comments,
  }),
  dispatch => bindActionCreators({
    getComments: commentsActions.getComments,
    showMoreComments: commentsActions.showMoreComments,
  }, dispatch)
)
export default class Comments extends Component {
  constructor(props) {
    super(props);
  }

  static propTypes = {
    postId: PropTypes.string.isRequired,
    comments: PropTypes.object,
    getComments: PropTypes.func,
  };

  componentWillMount() {
    this.props.getComments(this.props.postId);
  }

  handleShowMore = (e) => {
    e.stopPropagation();
    this.props.showMoreComments(this.props.postId);
  };

  render() {
    const { postId, comments } = this.props;
    const hasMore = (comments.lists[postId] && comments.lists[postId].hasMore);

    return (
      <div className="Comments">
        <CommentsList postId={postId} comments={comments} />

        { hasMore &&
          <button
            className="Comments__showMore"
            onClick={this.handleShowMore}
          >
            Load more comments...
          </button>
        }

      </div>
    );
  }
}

@@ -291,16 +291,60 @@
 elpers';
+%0Aimport Loading from './../widgets/Loading';
 %0A%0Aimport
@@ -1134,16 +1134,102 @@
 asMore);
+%0A    const isFetching = (comments.lists%5BpostId%5D && comments.lists%5BpostId%5D.isFetching);
 %0A%0A    re
@@ -1330,16 +1330,73 @@
 ts%7D /%3E%0A%0A
+        %7B isFetching &&%0A          %3CLoading /%3E%0A        %7D%0A%0A
         

add loading to comments