import React, { Component } from "react";
import { Spin } from "antd";
import Comment from "../../Comment";
import CommentBox from "../CommentBox";
import "./index.css";

class CommentList extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentWillMount() {
    this.props.app.sGetComment();
  }

  render() {
    const {
      list,
      total,
      page,
      loading,
      isNoMoreComment,
      sGetComment
    } = this.props.app;

    const spinning = Boolean(
      loading.sGetComment || loading.sCommentFavor || loading.sReplyFavor
    );
    return (
      <div>
        <Spin spinning={spinning}>
          <div>共 {total} 条评论</div>
          {list.map(item => (
            <CommentBox content={item} key={item.id} commentId={item.id} />
          ))}

          {!isNoMoreComment &&
            list.length !== total && (
              <div
                className="comment-list-show-more"
                onClick={() => sGetComment({ page: page + 1 })}
              >
                <span>查看更多评论</span>
              </div>
            )}
        </Spin>
      </div>
    );
  }
}

CommentList.propTypes = {};

export default Comment(CommentList);