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

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

const limit = 15;
function Apply(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])

  function getList() {
    const url =  `/users/${username}/applied_projects.json`;
    Axios.get(url).then(result=>{
      if(result){
        setList(result.data.applied_projects);
        setTotal(result.data.total_count);
        setIsSpin(false);
      }
    }).catch(error=>{})
  }

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

  // 拒绝
  function revertDivert(id){
    const url =  `/users/${username}/applied_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 key={k}>
                      <Link to={`/${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={`/${i.user && i.user.login}`} className="font-15 mr20">{i.user && i.user.name}</Link>
                          <span className="color-grey-9">{i.time_ago}</span>
                        </p>
                        <FlexAJ>
                          <p>申请以【{i.role === "developer" ?"开发者":i.role === "manager" ? "管理者":"报告者"}】身份加入【{i.project && i.project.name}】项目。是否同意？</p>
                          {
                            i.status === "common" &&
                            <span>
                              <Popconfirm title={`确定同意${i.user && i.user.name}加入【${i.project && i.project.name}】项目？`} okText="确定" cancelText="取消" onConfirm={()=>acceptDivert(i.id)}>
                                <a className="color-blue">同意</a>
                              </Popconfirm>
                              <Popconfirm title={`确定拒绝${i.user && i.user.name}加入【${i.project && i.project.name}】项目？`} okText="确定" cancelText="取消" onConfirm={()=>revertDivert(i.id)}>
                                <a className="color-red ml20">拒绝</a>
                              </Popconfirm>
                            </span>
                          }
                          {
                            i.status === "accepted" && <span className="color-grey-9">已接受</span>
                          }
                          {
                            i.status === "refused" && <span className="color-grey-9">已拒绝</span>
                          }
                        </FlexAJ>
                      </div>
                    </li>
                  )
                })
              }
            </ul>
            :
            ""
          }
          {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>
      </Spin>
    </div>
  )
}
export default Apply;