forgeplus-react/src/forge/Merge/merge_footer.js

import React, { Component } from "react";
import { Tabs, Spin } from "antd";
import "../Order/order.css";
import "./merge.css";
import Commits from "./Commits";
import Comments from "../comments/comments";
import Files from "./Files";
import axios from 'axios';
const { TabPane } = Tabs;

class MergeFooter extends Component {
  constructor(props){
    super(props);
    this.state={
      pageData:undefined,
      commitsData:undefined,
      filesData:undefined,
      isSpin:false,
      activeKey:"1",
      commitCount:0,
      filesCount:0
    }
  }
  componentDidMount=()=>{
    const { footer_type ,data } = this.props;
    if(footer_type){
      const { projectsId , owner , mergeId } = this.props.match.params;
      this.getCommit(owner,projectsId,mergeId);
      this.getFile(owner,projectsId,mergeId);
    }
    this.setState({
      activeKey:footer_type ? "1" : "2",
      commitCount:data && data.commits_count,
      filesCount:data && data.files_count
    })
  }
  componentDidUpdate=(prevProps)=>{
    const { comparesData } = this.props;
    const { footer_type } = this.props;
    if(footer_type){
      const { data } = this.props;
      if(data !== prevProps.data){
        this.setState({
          commitCount:data && data.commits_count,
          filesCount:data && data.files_count
        })
      }
    }
    if(comparesData !== prevProps.comparesData){
      this.setState({
        activeKey:footer_type ? "1" : "2"
      })
      this.changeTab(footer_type ? "1" : "2");
    }
  }

  changeTab=(index)=>{
    this.setState({
      isSpin:true
    })
    this.setState({
      activeKey:index
    })
    const { footer_type , comparesData } = this.props;
    const { projectsId , owner , mergeId } = this.props.match.params;

    if(footer_type){
      if(index === "2"){
        this.getCommit(owner,projectsId,mergeId);
      }else if(index === "3"){
        this.getFile(owner,projectsId,mergeId);
      }else{
        this.setState({
          isSpin:false
        })
      }
    }else{
      this.setState({
        commitsData:comparesData.commits,
        filesData:comparesData.diff,
        commitCount:comparesData.commits_count,
        filesCount:comparesData.diff && comparesData.diff.files_count,
        isSpin:false
      })
    }
  }

  getCommit =(owner,projectsId,mergeId)=>{
    const url = `/${owner}/${projectsId}/pulls/${mergeId}/commits.json`;
    axios.get(url).then(result=>{
      if(result){
        this.setState({
          commitsData:result.data.commits,
          isSpin:false,
          commitCount:result.data.commits_count
        })
      }
    }).catch(error=>{})
  }
  
  getFile =(owner,projectsId,mergeId)=>{
    const url = `/${owner}/${projectsId}/pulls/${mergeId}/files.json`;
    axios.get(url).then(result=>{
      if(result){
        this.setState({
          filesData:result.data,
          isSpin:false,
          filesCount:result.data.files_count,
        })
      }
    }).catch(error=>{})
  }

  render() {
    const { projectsId , owner } = this.props.match.params;

    const { footer_type, order_id, data , comparesData } = this.props;
    let { isSpin , activeKey , filesCount, commitCount , filesData , commitsData } = this.state;

    return (
      !footer_type && !comparesData || (comparesData && ((comparesData.commits && comparesData.commits.length===0)||(comparesData && !comparesData.diff)) )?"":
      <div className="main mergeRequest" style={{paddingTop:"0px"}}>
        <Spin spinning={isSpin}>
          <Tabs
            activeKey={activeKey}
            className="custom-commit-tabs"
            animated={false}
            onChange={this.changeTab}
          >
            {
              footer_type &&
              <TabPane
                tab={
                  <span><span className="font-16">评论</span>
                    {data && parseInt(data.comments_count) > 0 && <span className="tabNum">{data.comments_count}</span>}
                  </span>
                } key="1">
                <Comments
                  order_id={order_id}
                  showNotification={this.props.showNotification}
                  only_show_content={true}
                  {...this.props}
                />
              </TabPane>
            }
            {
              commitsData && commitsData.length > 0 &&
              <TabPane tab={<span><span className="font-16">提交</span>
                {commitCount > 0 && <span className="tabNum">{commitCount}</span>}
              </span>} key="2">
                <Commits {...this.props} commits={commitsData} projectsId={projectsId} owner={owner}></Commits>
              </TabPane>
            }
            {
              filesData && filesData.files && filesData.files.length>0 &&
                <TabPane tab={
                  <span><span className="font-16">文件</span>
                    {filesCount > 0 && <span className="tabNum">{filesCount}</span>}
                  </span>
                } key="3">
                <Files {...this.props} data={filesData} projectsId={projectsId} owner={owner}/>
              </TabPane>
            }
            
          </Tabs>
        </Spin>
      </div>
    );
  }
}
export default MergeFooter;