forgeplus-react/src/forge/Main/CoderRootCommit.js

import React , { Component } from 'react';
import { Spin , Pagination } from 'antd';
import { getImageUrl } from 'educoder';
import { truncateCommitId } from '../common/util';
import SelectBranch from '../Branch/Select';
import Nodata from '../Nodata';

import axios from 'axios';
import {Link} from "react-router-dom";

class CoderRootCommit extends Component{
  constructor(props){
    super(props)
    this.state={
      commitDatas:undefined,
      dataCount:undefined,
      limit:20,
      page:1,
      isSpining:false,
      branchList:undefined
    }
  }

  componentDidMount=()=>{
    this.Init();
    this.getBranchs();
  }

  // 获取分支列表
  getBranchs=()=>{
    const { projectsId , owner } = this.props.match.params;
    axios.get(`/${owner}/${projectsId}/branches.json`).then(result=>{
      this.setState({
        branchList:result.data
      })
    }).catch((error)=>{})
  }

  componentDidUpdate=(prevProps)=>{
    const { location } = this.props;
    const prevlocation = prevProps && prevProps.location;
    if (location !== prevlocation) {
      this.Init();
    }
  }
  Init =()=>{
    const { branchName } = this.props.match.params;
    const { page , limit } = this.state;
    this.setState({
      isSpining:true
    })
    this.getCommitList( branchName , page , limit );
  }

  getCommitList=(branch , page , limit)=>{
    this.setState({
      isSpining:true
    })
    const { projectsId , owner } = this.props.match.params;
    const url = `/${owner}/${projectsId}/commits.json`;
    axios.get(url,{
      params:{
        sha:branch,
        page,
        limit
      }
    }).then((result)=>{
      if(result && result.data){
        this.setState({
          isSpining:false
        })
        const array = [];
        result.data.commits && result.data.commits.length > 0 && result.data.commits.map((item,key)=>{
          array.push({
            name:item.author && item.author.name,
            login: item.author && item.author.login,
            id: item.author && item.author.id,
            image_url:item.author && item.author.image_url,
            sha:item.sha,
            time_from_now:item.time_from_now,
            message:item.message
          })
        })
        this.setState({
          commitDatas:array,
          dataCount:result.data.total_count,
          isSpining:false
        })
      }
    }).catch((error)=>{console.log(error)})
  }

  // 切换分支 search:tag为根据标签搜索
  changeBranch=(value)=>{
    const { projectsId , owner } = this.props.match.params;
    this.props.history.push(`/projects/${owner}/${projectsId}/commits/branch/${value}`);
  }

  ChangePage=(page)=>{
    const { branchName } = this.props.match.params;
    const { limit } = this.state;
    this.getCommitList(branchName , page , limit);
  }
  render(){
    const { commitDatas , dataCount , limit , page , isSpining , branchList } = this.state;
    const { projectDetail, commit_class , defaultBranch } = this.props;
    const { projectsId , owner , branchName } = this.props.match.params;
    let branch = branchName || defaultBranch;
    return(
      <React.Fragment>
        <div className={"main"}>
          <div className="f-wrap-between">
            <SelectBranch 
              repo_id={projectDetail && projectDetail.repo_id} 
              projectsId={projectsId} 
              branch={branch}
              changeBranch={this.changeBranch}
              owner={owner}
              history={this.props.history}
              branchList={branchList}
            ></SelectBranch>
          </div>
          <Spin spinning={isSpining}>
            <div className="commonBox">
              <div className="commonBox-title">
                <div className="f-wrap-between" style={{alignItems:"center"}}>
                  <span className="font-16">{dataCount}次提交代码({branch})</span>
                </div>
              </div>
              <div className="commitList">
                {
                  commitDatas && commitDatas.length > 0 && commitDatas.map((item,k)=>{
                    return(
                      <div key={k}>
                        <p className="f-wrap-alignCenter">
                          <Link to={`/projects/${owner}/${projectsId}/commits/${truncateCommitId(`${item.sha}`)}`} className="commitKey" style={{marginLeft:0}}>{truncateCommitId(`${item.sha}`)}</Link>
                          <Link to={`/projects/${owner}/${projectsId}/commits/${truncateCommitId(`${item.sha}`)}`} className="flex1 ml20 font-16 color-grey-3">{item.message}</Link>
                        </p>
                        <p className="f-wrap-alignCenter mt15">
                          {
                            item.id ?
                            <Link to={`/users/${item.login}`} className="show-user-link">
                              {item.image_url?<img src={getImageUrl(`/${item.image_url}`)} alt="" width="28px" height="28px" className="mr15 radius"/>:""}
                              <label className="font-14 color-grey-6" style={{verticalAlign:'middle'}}>{item.name ?`${item.name}:`:""}提交于 {item.time_from_now}</label>
                            </Link>:
                            <span className="show-user-link">
                              {item.image_url?<img src={getImageUrl(`/${item.image_url}`)} alt="" width="28px" height="28px" className="mr15 radius"/>:""}
                              <label className="font-14 color-grey-6" style={{verticalAlign:'middle'}}>{item.name ?`${item.name}:`:""}提交于 {item.time_from_now}</label>
                            </span>
                          }
                          
                        </p> 
                      </div>
                    )
                  })
                }
                {commitDatas && commitDatas.length === 0 && <Nodata _html="暂无数据"/>}
              </div>
            </div>
            {
              dataCount > limit ?
                <div className="edu-txt-center pt30 mb30">
                  <Pagination simple defaultCurrent={page} total={dataCount} pageSize={limit} onChange={this.ChangePage}></Pagination>
                </div>
              :""
            }
          </Spin>
        </div>
      </React.Fragment>
    )
  }
}
export default CoderRootCommit;