forgeplus-react/src/forge/Notice/UndoEvent.jsx

import React, { useEffect, useState } from "react";
import Nodata from '../Nodata';
import { FlexAJ } from '../Component/layout';
import { Pagination , Popconfirm , Spin } from 'antd';
import { Link } from 'react-router-dom';
import { getImageUrl } from 'educoder';
import Axios from 'axios';

const limit = 15;
function UndoEvent(props){
  const username = props.match.params.username;
  const [ list , setList ] = useState(undefined);
  const [ page , setPage ] = useState(1);
  const [ total , setTotal ] = useState(0);
  const [ isSpin , setIsSpin ] = useState(true);

  useEffect(()=>{
    if(username){
      setIsSpin(true);
      getList();
    }
  },[username,page])

  function getList(){
    const url = `/users/${username}/applied_transfer_projects.json`;
    Axios.get(url,{
      params:{
        page,per_page:limit
      }
    }).then(result=>{
      if(result){
        setList(result.data.applied_transfer_projects);
        setTotal(result.data.total_count);
        setIsSpin(false);
      }
    }).catch(error=>{})
  }

  // 接受
  function acceptDivert(id){
    const url =  `/users/${username}/applied_transfer_projects/${id}/accept.json`;
    Axios.post(url).then(result=>{
      if(result && result.data){
        getList();
        props && props.deleteEvent("undo",1);
      }
    }).catch(error=>{})
  }

  // 拒绝
  function revertDivert(id){
    const url =  `/users/${username}/applied_transfer_projects/${id}/refuse.json`;
    Axios.post(url).then(result=>{
      if(result && result.data){
        getList();
        props && props.deleteEvent("apply",1);
      }
    }).catch(error=>{})
  }

  return(
    <div>
      <Spin spinning={isSpin}>
        <div style={{minHeight:"400px"}}>
          {
          list && list.length > 0 ? 
          <ul className="notifyList">
            {
              list.map((i,k)=>{
                return(
                  <li>
                    <Link to={`/users/${i.user && i.user.login}`}><img src={getImageUrl(`/${i.user && i.user.image_url}`)} alt="" className="notifyImg"/></Link>
                    <div className="notifyFlex">
                      <p className="notifyInfos">
                        <Link to={`/users/${i.login}`} className="font-15 mr20">{i.user && i.user.name}</Link>
                        <span className="color-grey-9">{i.time_ago}</span>
                      </p>
                      <FlexAJ>
                        <p className="color-grey-6">请求将仓库【<Link to={`/projects/${i.project && i.project.owner && i.project.owner.login}/${i.project && i.project.identifier}`}>{i.project && i.project.name}</Link>】
                        转移给【<Link to={`/users/${i.owner && i.owner.login}`}>{i.owner && i.owner.name}</Link>】，是否接受？</p>
                        {
                          i.status === "common" &&
                          <span>
                            <Popconfirm title={`确定接受仓库${i.project && i.project.name}？`} okText="确定" cancelText="取消" onConfirm={()=>acceptDivert(i.id)}>
                              <a className="color-blue">接受</a>
                            </Popconfirm>
                            <Popconfirm title={`确定拒绝接受仓库${i.project && i.project.name}？`} okText="确定" cancelText="取消" onConfirm={()=>revertDivert(i.id)}>
                              <a className="color-red ml20">拒绝</a>
                            </Popconfirm>
                          </span>
                        }
                        {
                          i.status === "canceled" && <span className="color-grey-9">对方已取消转移</span>
                        }
                        {
                          i.status === "accepted" && <span className="color-grey-9">已接受</span>
                        }
                        {
                          i.status === "refused" && <span className="color-grey-9">已拒绝</span>
                        }
                      </FlexAJ>
                    </div>
                  </li>
                )
              })
            }
          </ul>
          :
          ""
        }
        </div>
      </Spin>
      {list && list.length === 0 && <Nodata _html="暂无接收信息" />}
      {
        total > limit && 
        <div className="edu-txt-center pt20 pb20">
          <Pagination simple pageSize={limit} total={total} current={page} onChange={(p)=>{setPage(p)}}/>
        </div>
      }
    </div>
  )
}
export default UndoEvent;