forgeplus-react/src/forge/Main/projecthome/SubList.jsx

import React , { useEffect , useState } from 'react';
import hotAuthor from '../img/index/hotAuthor.png';
import week from '../img/index/week.png';
import month from '../img/index/month.png';
import { Link } from 'react-router-dom';
import axios from 'axios';
import { getImageUrl } from 'educoder';


function SubList() {

  const [ weekList ,setWeekList ] = useState(undefined);
  const [ monthList ,setMonthList ] = useState(undefined);
  const [ authorList ,setAuthorList ] = useState(undefined);

  useEffect(()=>{
    getList(7);
    getList(30);
    getAuthorList(7);
  },[])

  function getList(time){
    const url = `/project_rank.json`;
    axios.get(url,{
      params:{
        time
      }
    }).then(result=>{
      if(result && result.data){
        time === 7 ? setWeekList(result.data.projects) : setMonthList(result.data.projects);
      }
    }).catch(error=>{})
  }
  function getAuthorList(time){
    const url = `/user_rank.json`;
    axios.get(url,{
      params:{
        time
      }
    }).then(result=>{
      if(result && result.data){
        setAuthorList(result.data.users);
      }
    }).catch(error=>{})
  }

  return(
    <div className="right">
      {
        authorList && authorList.length > 0?
        <div>
          <div className="partTitle"><img src={hotAuthor} alt="" /><span>本周热门开发者</span></div>
          <div className="righthotAuthor">
            {
              authorList.map((i,k)=>{
                return(
                  <li>
                    <div>
                      <Link target="_blank" to={`/${i.login}`}><img src={getImageUrl(`/${i.avatar_url}`)} alt=""/></Link>
                      <div>
                        <Link target="_blank" to={`/${i.login}`} className="font-15">{i.name}</Link>
                        <p className="task-hide" style={{maxWidth:"260px"}}>
                          <Link target="_blank" to={`/${i.login}/${i.project && i.project.identifier}`}><i className="iconfont icon-daimakuicon1 font-14 mr8"></i>{i.project && i.project.name}</Link>
                        </p>
                      </div>
                    </div>
                  </li>
                )
              })
            }
          </div>
        </div>
        :""
      }
      
      {
        weekList && weekList.length > 0 ?
        <div>
          <div className="partTitle"><img src={week} alt="" /><span>本周热门项目</span></div>
          <div className="hotProjects">
            {
              weekList.map((i,k)=>{
                return(
                  <li>
                    <div className="mInfos">
                      <span className="num">{k+1}</span>
                      <Link target="_blank" to={`/${i.owner && i.owner.login}/${i.identifier}`} className="name task-hide">{i.owner && i.owner.name}/{i.name}</Link>
                      <span>
                        <i className="iconfont icon-dianzan11 font-16 mr4"></i>{i.praises}
                      </span>
                    </div>
                    {i.description && 
                      <div className="sInfos task-hide-2">
                        {i.description}
                      </div>
                    }
                  </li>
                )
              })
            }
          </div>
        </div>
        :""
      }
      {
        monthList && monthList.length > 0?
        <div>
          <div className="partTitle"><img src={month} alt="" /><span>本月热门项目</span></div>
          <div className="hotProjects">
            {
              monthList.map((i,k)=>{
                return(
                  <li>
                    <div className="mInfos">
                      <span className="num">{k+1}</span>
                      <Link target="_blank" to={`/${i.owner && i.owner.login}/${i.identifier}`} className="name task-hide">{i.owner && i.owner.name}/{i.name}</Link>
                      <span>
                        <i className="iconfont icon-dianzan11 font-16 mr4"></i>{i.praises}
                      </span>
                    </div>
                    {i.description && 
                      <div className="sInfos task-hide-2">
                        {i.description}
                      </div>
                    }
                  </li>
                )
              })
            }
          </div>
        </div>
        :""
      }
      
    </div>
  )
}
export default SubList;