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

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

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

class CoderRootCommit extends Component{
  constructor(props){
    super(props)
    this.state={
      branch:"master",
      data:undefined,
      dataCount:undefined,
      limit:50,
      page:1,
      isSpin:false
    }
  }

  componentDidMount=()=>{
    const { branch , page , limit } = this.state;
    this.setState({
      isSpin:true
    })
    this.getCommitList( branch , page , limit );
  }

  getCommitList=(branch , page , limit)=>{
    const { projectsId } = this.props.match.params;
    const url = `/repositories/${projectsId}/commits.json`;
    axios.get(url,{
      params:{
        sha:branch,
        page,
        limit
      }
    }).then((result)=>{
      if(result){
        const array = [];
        result.data && 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,
            image_url:item.author && item.author.image_url,
            sha:item.sha,
            time_from_now:item.time_from_now,
            message:item.message
          })
        })
        this.setState({
          data:array,
          dataCount:result.data.total_count,
          isSpin:false
        })
      }
    }).catch((error)=>{console.log(error)})
  }

  // 切换分支 search:tag为根据标签搜索
  changeBranch=(value)=>{
    const { page , limit } = this.state;
    this.setState({
      isSpin:true,
      branch:value,
    })
    this.getCommitList(value , page , limit);
  }

  ChangePage=(page)=>{
    const { branch , limit } = this.state;
    this.getCommitList(branch , page , limit);
  }

  render(){
    const { branch , data , dataCount , limit , page , isSpin } = this.state;
    const { branchs , projectDetail } = this.props;
    const title =()=>{
      return(
        <div className="f-wrap-between" style={{alignItems:"center"}}>
          <span className="font-16">{dataCount}次提交代码({branch})</span>
        </div>
      )
    }

    const Pagination =()=> {
      if(dataCount > limit){
        return(
          <div className="edu-txt-center pt30 mb30">
            <Pagination simple defaultCurrent={page} total={dataCount} pageSize={limit} onChange={this.ChangePage}></Pagination>
          </div>
        )
      }
    }
    return(
      <React.Fragment>
        <div className="main">
          <div className="f-wrap-between">
            <SelectBranch repo_id={projectDetail && projectDetail.repo_id} branch={branch} branchs={branchs} changeBranch={this.changeBranch}></SelectBranch>
          </div>
          <Spin spinning={isSpin}>
            <div className="commonBox">
              <div className="commonBox-title">
                {title()}
              </div>
              <div className="commitList">
                {
                  data && data.length > 0 && data.map((item,key)=>{
                    return(
                      <div>
                        <p className="df">
                          <span className="commitKey" style={{marginLeft:0}}>{truncateCommitId(`${item.sha}`)}</span>
                          <span className="flex1 ml20 font-16 color-grey-3">{item.message}</span>
                          {/* <Link to={''} className="color-blue">浏览代码</Link> */}
                        </p>
                        <p className="f-wrap-alignCenter mt15">
                          <Link to={`/users/${item.login}/projects`} className="show-user-link">
                            <img src={getImageUrl(`images/${item.image_url}`)} alt="" width="28px" height="28px" className="mr15 radius"/>
                            <label className="font-14 color-grey-6" style={{'verticalAlign':'middle'}}>{item.name}:提交于 {item.time_from_now}</label>
                          </Link>
                        </p>
                      </div>
                    )
                  })
                }
              </div>
            </div>
            { Pagination() }
          </Spin>
        </div>
      </React.Fragment>
    )
  }
}
export default CoderRootCommit;