forgeplus-react/src/forge/Team/List.jsx

import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import Search from '../Component/Search';
import Sort from '../Component/Sort';
import './Index.scss';
import Item from './ListItem';
import Right from './RightBox';
import NoData from '../Nodata';

import { Menu , Pagination , Dropdown , Spin } from 'antd';
import axios from 'axios';

const limit = 15;
function List(props){
  const [ list , setList ] = useState(undefined);
  const [ isSpin , setIsSpin ] = useState(false);
  const [ totalCount , setTotalCount ] = useState(undefined);
  const [ search , setSearch ] = useState(undefined);
  const [ page , setPage ] = useState(1);
  const [ sortBy , setSortBy ] = useState("updated_on");
  const [ sortDirection , setSortDirection ] = useState("asc");

  const OIdentifier = props.match.params.OIdentifier;
  const organizeDetail = props.organizeDetail;

  useEffect(()=>{
    if(OIdentifier){
      setIsSpin(true);
      getProject();
    }
  },[OIdentifier,sortBy,page,search])

  function getProject(){
    const url = `/organizations/${OIdentifier}/projects.json`;
    axios.get(url,{
      params:{
        search,page,limit,
        sort_by:sortBy,
        sort_direction:sortDirection
      }
    }).then(result=>{
      if(result && result.data){
        setList(result.data.projects);
        setTotalCount(result.data.total_count);
      }
      setIsSpin(false);
    }).catch(error=>{setIsSpin(false);})
  }

  function onSearch(value){
    setSearch(value);
  }

  const menu=(
    <Menu onClick={(e)=>setSortBy(e.key)}>
      <Menu.Item key="updated_on">更新时间排序</Menu.Item>
      <Menu.Item key="created_on">创建时间排序</Menu.Item>
      <Menu.Item key="praises_count">点赞数排序</Menu.Item>
      <Menu.Item key="forked_count">fork数排序</Menu.Item>
    </Menu>
  )
  const menu_new=(
    <Menu>
      <Menu.Item key="updated_on"><Link to={`/projects/deposit/new/${OIdentifier}`}>新建托管项目</Link></Menu.Item>
      <Menu.Item key="created_on"><Link to={`/projects/mirror/new/${OIdentifier}`}>新建镜像项目</Link></Menu.Item>
    </Menu>
  )
  
  return(
    <div className="list">
      <div className="list-l">
          <div>
            <div className="head">
              <div style={{width:"370px"}}>
                <Search placeholder="输入仓库名称进行搜索" onSearch={onSearch}/>
              </div>
              <p>
                { organizeDetail && organizeDetail.can_create_project ?
                <Sort menu={menu_new}>
                  <a className="addBtn mr30">+&nbsp;新建项目</a>
                </Sort>
                :""}
                <Dropdown overlay={menu}>
                  <a className="color-blue">排序<i className="iconfont icon-sanjiaoxing-down ml3 font-14"></i></a>
                </Dropdown>
              </p>
            </div>
            <Spin spinning={isSpin}>
              <div className="team">
                {
                  list && list.length>0 ? list.map((item,key)=>{
                    return(
                      <Item item={item} keu={key} OIdentifier={OIdentifier}/>
                    )
                  })
                  :
                  <NoData _html="暂无数据"/>
                }
              </div>
            </Spin>
          </div>
          {
            totalCount > limit &&
            <div className="mb20 mt20" style={{textAlign:"center"}}>
              <Pagination simple current={page} total={totalCount} onChange={(page)=>setPage(page)}/>
            </div>
          }
        </div>
      <Right admin={organizeDetail && organizeDetail.is_admin} OIdentifier={OIdentifier} history={props.history}/>
    </div>
  )
}
export default List;