forgeplus-react/src/forge/comments/children_comments.js

import React, { Component } from "react";
import { Link } from "react-router-dom";

import axios from "axios";
import { getImageUrl } from "educoder";
import { List, Popconfirm, Pagination, Button } from "antd";
import Attachments from "../Upload/attachment";
import MDEditor from "../../modules/tpm/challengesnew/tpm-md-editor";
import RenderHtml from "../../components/render-html";
import "../Order/order.css";

class comments extends Component {
  constructor(props) {
    super(props);
    this.state = {
      journalsdata: undefined,
      limit: 10,
      page: 1,
      journal_spin: false,
      search_count:0,
      orderId: this.props.order_id,
      parent_id: this.props.parent_id
    };
  }

  componentDidMount(){
    this.getChildrenJournals()
}
componentDidUpdate(prevProps, prevState) {
  if (this.props.children_comment_id) {
    if (prevProps.children_comment_id !== this.props.children_comment_id)
    this.getChildrenJournals()
  }
}
  //获取评论信息
  getChildrenJournals = (order_id, parentId) => {
    const { orderId, parent_id, page, limit } = this.state;
    let new_order_id = order_id ? order_id : orderId 
    let new_parent_id = parentId ? parentId : parent_id
    const url = `/issues/${new_order_id}/journals/${new_parent_id}/get_children_journals.json`;
    axios
      .get(url, {
        params: {
          page,
          limit,
        },
      })
      .then((result) => {
        if (result) {
          this.setState({
            journalsdata: result.data,
            search_count: result.data.journals_count,
            isSpin: false
          });
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };

  //删除评论
  deleteorder = (id) => {
    const { orderId } = this.state;
    const url = `/issues/${orderId}/journals/${id}.json`;
    axios
      .delete(url, {
        data: {
          issue_id: orderId,
          id: id,
        },
      })
      .then((result) => {
        if (result) {
          this.getChildrenJournals();
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };

  // 翻页
  ChangePage = (page) => {
    this.state.page = page 
    this.state.isSpin = true
    this.getChildrenJournals();
  };

  commentCtx = (v) => {
    return <RenderHtml className="break_word_comments" value={v} />;
  };

  render() {
    const {
      journalsdata,
      page,
      limit,
      search_count,
      isSpin
    } = this.state;
    const { current_user } = this.props;

    const Paginations = (
      <React.Fragment>
        {search_count > limit ? (
          <div className="pt30 mb50 edu-txt-center btp1">
            <Pagination
              simple
              defaultCurrent={page}
              total={search_count}
              pageSize={limit}
              onChange={this.ChangePage}
            ></Pagination>
          </div>
        ) : (
          ""
        )}
      </React.Fragment>
    );

    const renderList = (item) => {
      return (
        <div className="width100">
          <div className="grid-item pb10">
            <Link
              to={`/users/${item && item.user_login}/projects`}
              className="show-user-link"
            >
              <img
                className="radius"
                src={getImageUrl(`images/${item && item.user_picture}`)}
                alt=""
                width="30"
                height="30"
              />
            </Link>
            <span className="grid-item">
              <span>
                <Link
                  to={`/users/${item && item.user_login}/projects`}
                  className="show-user-link color-blue ml10"
                >
                  {item && item.user_name}
                </Link>
                <span className="color-grey-8 ml20">{item.created_at}</span>
              </span>

              <span className="text-right">
                {current_user &&
                (current_user.admin ||
                  current_user.login === item.user_login) ? (
                  <Popconfirm
                    placement="bottom"
                    title={"确定要删除当前评论吗?"}
                    okText="是"
                    cancelText="否"
                    onConfirm={() => this.deleteorder(item.id)}
                  >
                    <Button type="link">
                      <i className="iconfont icon-shanchu font-15 color-grey-6"></i>
                    </Button>
                  </Popconfirm>
                ) : (
                  ""
                )}
              </span>
            </span>
          </div>
          <div className="ml30">
            {this.commentCtx(item.content)}
            {item && item.attachments && item.attachments.length > 0 ? (
              <Attachments
                attachments={item.attachments}
                showNotification={this.props.showNotification}
                canDelete={
                  current_user &&
                  (current_user.admin || current_user.login === item.user_login)
                }
              />
            ) : (
              ""
            )}
          </div>
        </div>
      );
    };

    return (
      <div>
        {
          search_count > 0 && 
          <div className="children-comment-bg">
          <List
              size="large"
              loading={isSpin}
              dataSource={journalsdata.issue_journals}
              renderItem={(item) => <List.Item>{renderList(item)}</List.Item>}
            />
            {Paginations}
        </div>
        }
      </div>
    );
  }
}

export default comments;