forgeplus-react/src/forge/Main/sub/Contribute.jsx

import React, { useEffect, useState } from 'react';
import { WhiteBack , AlignCenter } from '../../Component/layout';
import "./sub.scss";
import axios from 'axios';
import { Pagination , Spin } from 'antd';
import NoData from '../../Nodata';
import { getImageUrl } from 'educoder';
import { Link } from 'react-router-dom';

function Contribute(props){
  const [ list , setList ] = useState(undefined);
  const [ page , setPage ] = useState(1);
  const [ total , setTotal ] = useState(0);
  const [ isSpin , setIsSpin ] = useState(true);

  const owner = props.match.params.owner;
  const projectsId = props.match.params.projectsId;
  const LIMIT = 20;
  useEffect(()=>{
    if(owner && projectsId){
      getData();
    }
  },[owner,projectsId,page]);

  function getData(){
    setIsSpin(true);
    const url = `/${owner}/${projectsId}/contributors.json`;
    axios.get(url,{
      params:{
        limit:LIMIT,page,
      }
    }).then(result=>{
      if(result){
        setList(result.data.contributors);
        setTotal(result.data.total_count);
        setIsSpin(false);
      }
    }).catch(error=>{})
  }

  return(
    <WhiteBack>
      <Spin spinning={isSpin}>
        <div className="boxPanel">
          <p className="font-18 padding10-20" style={{borderBottom:"1px solid #eee"}}>贡献者列表</p>
          {
            list && list.length > 0 ?
            <div className="contrbuteList">
              {
                list.map((item,key)=>{
                  return(
                    <AlignCenter>
                      <img alt="" style={{borderRadius:"50%",marginRight:"10px"}} src={getImageUrl(`/${item.image_url}`)} width="50px" height="50px"/>
                      <div>
                        <Link to={`/${item.login}`} className="font-16">{item.name}</Link>
                        <p className="font-12 color-grey-9">提交{item.contributions}次</p>
                      </div>
                    </AlignCenter>
                  )
                })
              }
            </div>
            :""
          }
          {
            list && list.length === 0 ? <NoData _html="暂无贡献者" />:""
          }
          {
            total > LIMIT ?
            <div className="mt20 edu-txt-center">
              <Pagination simple pageSize={LIMIT} onChange={(p)=>{setPage(p)}} current={page} total={total}/>
            </div>
            :""
          }
        </div>
      </Spin>
    </WhiteBack>
  )
}
export default Contribute;