comment/src/components/CommentList/index.js

import React, { Component } from "react";
import { Spin, Pagination, Checkbox } from "antd";
import intl from "react-intl-universal";
import Comment from "../../Comment";
import CommentBox from "../CommentBox";
import "./index.css";

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

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

  renderPagination() {
    const {
      list,
      total,
      page,
      pageType,
      limit,
      isNoMoreComment,
      sGetComment,
      onPageChange,
      onGetMoreBtnClick
    } = this.props.app;
    const { filterSpeak } = this.state;
    if (pageType === "slice") {
      // 截断多余评论，通过点击查看更多跳转
      return (
        <div className="comment-list-show-more" onClick={onGetMoreBtnClick}>
          <span>查看更多</span>
        </div>
      );
    } else if (pageType === "more") {
      if (!isNoMoreComment && list.length !== total) {
        return (
          <div
            className="comment-list-show-more"
            onClick={() => {
              sGetComment({ page: page + 1, filterSpeak });
              onPageChange(page + 1);
            }}
          >
            <span>{intl.get("comment.moreComment")}</span>
          </div>
        );
      } else {
        return null;
      }
    } else if (pageType === "pagination") {
      return (
        <div className="comment-list-pagination">
          <Pagination
            pageSize={limit}
            current={page}
            total={total}
            onChange={p => {
              sGetComment({ page: p, filterSpeak });
              onPageChange(p);
            }}
          />
        </div>
      );
    }
  }

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

    const spinning = Boolean(
      loading.sGetComment || loading.sCommentFavor || loading.sReplyFavor
    );
    return (
      <div>
        <Spin spinning={spinning}>
          {/* <div>共 {total} 条评论</div> */}
          <div>
            {intl.get("comment.totalComment", { total })}
            {isSpeak && (
              <Checkbox
                className="comment-list-filter-speak"
                onChange={e => {
                  this.setState({
                    filterSpeak: e.target.checked ? 1 : 0
                  });
                  sGetComment({
                    page: 1,
                    filterSpeak: e.target.checked ? 1 : 0
                  });
                  onPageChange(1);
                }}
              >
                {intl.get("comment.filterSpeak")}
              </Checkbox>
            )}
          </div>
          {list.map(item => (
            <CommentBox
              content={item}
              user_id={item.user_id}
              key={item.id}
              commentId={item.id}
            />
          ))}
          {this.renderPagination()}
        </Spin>
      </div>
    );
  }
}

CommentList.propTypes = {};

export default Comment(CommentList);