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

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

import Tree from './img/tree.png';
import axios from 'axios';
import {Link} from "react-router-dom";
import CopyTool from '../Component/CopyTool';

import './tree/Index.scss'

function returnbar(str){
  if(str && str.length>0 && str.indexOf("%2F")>-1){
    return str.replaceAll('%2F','/');
  }
  return str;
}
//代码库--提交页面
class CoderRootCommit extends Component{
  constructor(props){
    super(props)
    this.state={
      commitDatas:undefined,
      dataCount:undefined,
      limit:10,
      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:returnbar(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(`/${owner}/${projectsId}/commits/branch/${value}`);
  }

  ChangePage=(page)=>{
    const { branchName } = this.props.match.params;
    const { limit } = this.state;
    this.setState({
      page: page
    })
    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 = returnbar(branchName || defaultBranch);
    return(
      <React.Fragment>
        <div className={"main"}style={{padding:"0px",border:"none"}}>
          <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}>
            <Timeline className="commitList">
              {
                commitDatas && commitDatas.length > 0 && commitDatas.map((item,k)=>{
                  return(
                    <Timeline.Item key={k} dot={page ===1 && k===0 ?<span className="new-conmmit">最新</span>:<i className="iconfont icon-a-yuanquan2x"></i>}>
                      <div className="commitList-item f-wrap-between">
                        <div>
                          <AlignTop>
                            <Link to={`/${owner}/${projectsId}/commits/${truncateCommitId(`${item.sha}`)}/${branch}`} className="commitDesc font-14 color-grey-3 font-bd">{item.message}</Link>
                          </AlignTop>
                          <p className="f-wrap-alignCenter mt15">
                            {
                              item.id ?
                              <Link to={`/${item.login}`} className="show-user-link">
                                {item.image_url?<img src={getImageUrl(`/${item.image_url}`)} alt="" width="28px" height="28px" className="mr8 radius"/>:""}
                                <label className="font-14 color-grey-3" style={{verticalAlign:'middle'}}><label className="font-bd">{item.name ?`${item.name}  `:""}</label>提交于 {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="mr8 radius"/>:""}
                                <label className="font-14 color-grey-3" style={{verticalAlign:'middle'}}><label className="font-bd">{item.name ?`${item.name}  `:""}</label>提交于 {item.time_from_now}</label>
                              </span>
                            }
                          </p>
                        </div>
                        <div>
                          <div className="treecopy">
                            <div className="shadow">
                              <span className="treecopy-cont">
                                <img src={Tree} alt="sha" width={"16px"}/>
                                <Link to={`/${owner}/${projectsId}/commits/${truncateCommitId(`${item.sha}`)}/${branch}`}>{truncateCommitId(`${item.sha}`)}</Link>
                                <input type="text" id={`value${k}`} value={`${truncateCommitId(`${item.sha}`)}`}/>
                              </span>
                              <CopyTool beforeText="复制commit id" afterText="复制成功" inputId={`value${k}`}/>
                            </div>
                            <button className="btn-83" onClick={()=>{window.location.href=`/${owner}/${projectsId}/tree/${truncateCommitId(item.sha)}`}}>浏览文件</button>
                          </div>
                        </div>
                      </div>
                    </Timeline.Item>
                  )
                })
              }
              {commitDatas && commitDatas.length === 0 && <Nodata _html="暂无数据"/>}
            </Timeline>
            {
              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;