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

import React , { useEffect , useState } from 'react';
import styled from 'styled-components';
import Box from './Box';
import axios from 'axios';
import { getImageUrl } from 'educoder';
import { Link } from 'react-router-dom';
import Nodata from '../Nodata';

import CheckProfile from '../Component/ProfileModal/Profile';

const Span = styled.span`{
  color:#888;
  font-size:12px;
  margin-right:10px;
}`
const Align = styled.div`{
  display:flex;
  aligin:center;
}`
const ListName = styled.div`{
  font-size:14px;
  color:#333;
  margin-bottom:8px;
  height:18px;
  line-height:18px;
}`;
const ColorListName = styled.div`{
  color:#5091FF;
  font-size:14px;
  margin-bottom:8px;
  height:18px;
  line-height:18px;
}`
const Img = styled.img`{
  border-radius:50%;
  width:45px;
  height:45px;
  margin-right:12px;
}`
function RightBox({ OIdentifier , history , admin , showCompeleteDialog ,completeProfile  }) {
  const [ memberData, setMemberData ] = useState(undefined);
  const [ groupData, setGroupData ] = useState(undefined);

  useEffect(()=>{
    if(OIdentifier){
      getMember(OIdentifier);
      getGroup(OIdentifier);
    }
  },[OIdentifier])

  function getMember(iden){
    const url = `/organizations/${iden}/organization_users.json`;
    axios.get(url,{params:{limit:5}}).then(result=>{
      if(result && result.data){
        setMemberData(result.data);
      }
    }).catch(error=>{})
  }
  function getGroup(iden){
    const url = `/organizations/${iden}/teams.json`;
    axios.get(url,{params:{limit:5}}).then(result=>{
      if(result && result.data){
        setGroupData(result.data);
      }
    }).catch(error=>{})
  }
  return(
    <div className="list-r">
      {
        memberData && memberData.organization_users && memberData.organization_users.length>0 ?
        <Box name="组织成员" count={memberData && memberData.total_count} url={`/${OIdentifier}/member`}>
          {
            memberData.organization_users.map((item,key)=>{
              return(
                <div className="teammembers" key={key}>
                  <Link to={`/${item.user && item.user.login}`}><Img src={getImageUrl(`/${item.user && item.user.image_url}`)} alt="" className="m-img"/></Link>
                  <div>
                    <Link to={`/${item.user && item.user.login}`}><ListName>{item.user && item.user.name}</ListName></Link>
                    <Align><i className="iconfont icon-shijian color-green mr3 font-13"></i><Span>加入时间：{item.created_at}</Span></Align>
                  </div>
                </div>
              )
            })
          }
        </Box>
        :""
      }
      <Box 
        name="组织团队" 
        count={groupData && groupData.total_count} 
        bottom={
          admin && 
          <CheckProfile 
            showCompeleteDialog={showCompeleteDialog} 
            completeProfile={completeProfile}
            sureFunc={()=>history.push(`/${OIdentifier}/group/new`)}
            className={"ant-btn ant-btn-primary"}
          >新建团队</CheckProfile>
        }
        url={`/${OIdentifier}/group`}
      >
        {
          groupData && groupData.teams && groupData.teams.length>0? 
          <React.Fragment>
            {groupData.teams.map((item,key)=>{
            return(
              <div className="teammembers" key={key}>
                <div>
                  {
                    (item.is_admin || item.is_member) ?
                    <Link to={`/${OIdentifier}/group/${item.id}`}><ColorListName>{item.name}</ColorListName></Link>
                    :
                    <ColorListName>{item.name}</ColorListName>
                  }
                  <Align>
                    <Span>{item.num_users}名成员</Span>
                    <Span>{item.num_projects}个仓库</Span>
                  </Align>
                </div>
              </div>
            )
          })}
          </React.Fragment>:<Nodata _html="暂无团队" small/>
        }
      </Box>
    </div>
  )
}
export default RightBox;