forgeplus-react/src/forge/Merge/MergeLinkFooter.jsx

import React, { Component } from 'react';
import { Tabs, Spin } from 'antd';
import { Link } from 'react-router-dom';
import axios from 'axios';

import Commits from './Commits';
import Comments from '../comments/comments';
import Files from './Files';

import '../Order/order.css';
import './merge.css';

const { TabPane } = Tabs;

class MergeFooter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      commitsData: undefined,
      filesData: undefined,
      isSpin: false,
      activeKey: '1',
      commitCount: 0,
      filesCount: 0,
      // 总评论数量，包含回复
      commentsTotalCount: 0,
    };
  }
  componentDidMount() {
    this.Init();
  }

  componentDidUpdate(prevProps) {
    // 解决切换tab后浏览器回退不刷新的问题、点击tab后url变化但tab未切换的问题
    const newPathname = this.props.location.pathname;
    const prevPathname = prevProps.location.pathname;
    if (newPathname !== prevPathname) {
      this.Init();
    }
  }

  Init = () => {
    const { data, location, match } = this.props;
    const { pathname } = location;
    const { projectsId, owner, mergeId } = match.params;

    let activeKey = '1';
    if (pathname.indexOf('commits') > -1) {
      activeKey = '2';
      this.getCommit(owner, projectsId, mergeId);
    } else if (pathname.indexOf('files') > -1) {
      activeKey = '3';
      this.getFile(owner, projectsId, mergeId);
    }
    this.setState({
      activeKey: activeKey,
      commitCount: data && data.commits_count,
      filesCount: data && data.files_count,
    });
  };

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

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

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

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

    // 评论数量优先取Comment组件中列表接口返回的，其次取合并请求详情接口中的，都没有取默认值0
    const commentsTotalCount = parseInt(
      this.state.commentsTotalCount || data.comments_total_count || 0,
      10
    );

    return (
      <div className="main" style={{ paddingTop: '0px' }}>
        <Spin spinning={isSpin}>
          <Tabs
            activeKey={activeKey}
            className="custom-commit-tabs"
            animated={false}
          >
            <TabPane
              tab={
                <Link to={`/${owner}/${projectsId}/pulls/${mergeId}`}>
                  <span className="font-16">评论</span>
                  {commentsTotalCount > 0 && (
                    <span className="tabNum">{commentsTotalCount}</span>
                  )}
                </Link>
              }
              key="1"
            >
              <Comments
                order_id={order_id}
                showNotification={this.props.showNotification}
                only_show_content={true}
                updateCommentsNum={(commentsCount) => {
                  this.setState({ commentsTotalCount: commentsCount || 0 });
                }}
                {...this.props}
              />
            </TabPane>
            <TabPane
              tab={
                <Link to={`/${owner}/${projectsId}/pulls/${mergeId}/commits`}>
                  <span className="font-16">提交</span>
                  {commitCount > 0 && (
                    <span className="tabNum">{commitCount}</span>
                  )}
                </Link>
              }
              key="2"
            >
              {commitsData && (
                <Commits
                  {...this.props}
                  commits={commitsData}
                  projectsId={projectsId}
                  owner={owner}
                ></Commits>
              )}
            </TabPane>
            <TabPane
              tab={
                <Link to={`/${owner}/${projectsId}/pulls/${mergeId}/files`}>
                  <span className="font-16">文件</span>
                  {filesCount > 0 && (
                    <span className="tabNum">{filesCount}</span>
                  )}
                </Link>
              }
              key="3"
            >
              <Files
                {...this.props}
                data={filesData}
                projectsId={projectsId}
                owner={owner}
              />
            </TabPane>
          </Tabs>
        </Spin>
      </div>
    );
  }
}
export default MergeFooter;