forgeplus-react/src/forge/users/CIList.jsx

import React , { useEffect , useState } from 'react';
import { Button ,Spin , Pagination , Popconfirm } from 'antd';
import { Link } from 'react-router-dom';
import Nodata from '../Nodata';
import axios from 'axios';

const limit = 10;
function CIList(props){
  const [ page , setPage ] = useState(1);
  const [ total , setTotal ] = useState(0);
  const [ isSpining , setIsSpining] = useState(true);
  const [ list , setList ] = useState(undefined);
  let user = props.current_user;

  useEffect(()=>{
    setIsSpining(true);
    if(user && user.login){
      getInfo();
    }
  },[user,page])

  function getInfo(){
    const url = `/users/${user.login}/projects.json`;
    axios.get(url,{
      params:{
      limit , page , category:"manage"
      }
    }).then(result=>{
      if(result && result.data){
        setList(result.data.projects);
        setTotal(result.data.count);
        setIsSpining(false);
      }
    }).catch(error=>{
      console.log(error);
    })
  }

  function changePage(page){
    setPage(page);
  }

  // 取消激活
  function cancelActivate(author,identifier){
    setIsSpining(true);
    const url =`/${author && author.login}/${identifier}/deactivate.json`;
    axios.delete(url).then(result=>{
      if(result){
        getInfo();
      }else{
        setIsSpining(false);
      }
    }).catch(error=>{setIsSpining(false);})
  }
  return(
    <div style={{minHeight:"400px"}}>
      <Spin spinning={isSpining}>
        {
          list && list.length > 0 ?
            <ul className="CIList">
              {list.map((item,key)=>{
                return(
                  <li key={key}>
                    <span>
                      <Link to={`/projects/${item.author && item.author.login}/${item.identifier}${ item.open_devops ? "/devops/dispose":""}`}>{item.name}</Link>
                      { item.open_devops ? 
                        <span className="authTag green ml20">已激活</span>
                        :
                        <span className="authTag red ml20">未激活</span>
                      }
                    </span>
                    { item.open_devops ? 
                      <Popconfirm
                        title="确定取消激活？"
                        onConfirm={()=>cancelActivate(item.author,item.identifier)}
                        okText="确定"
                        cancelText="取消"
                      >
                        <Button>取消激活</Button>
                      </Popconfirm>
                      : 
                      <Button type={"primary"} onClick={()=>{props.history.push(`/projects/${item.author && item.author.login}/${item.identifier}/devops`)}}>马上激活</Button> 
                    }
                  </li>
                )
              })}
            </ul>
          :<Nodata _html="暂无数据"/>
        }
        {
          total > limit &&
          <div className="mt20 mb30" style={{textAlign:"center"}}>
            <Pagination simple onChange={changePage} pageSize={limit} current={page} total={total}></Pagination>
          </div>
        }
      </Spin>
    </div>
  )
}
export default CIList;