126 lines
4.6 KiB
JavaScript
126 lines
4.6 KiB
JavaScript
import React , { useEffect , useState } from 'react';
|
|
import './Index.scss';
|
|
import SubBanner from './SubBanner';
|
|
import SubUnitBanner from './SubUnitBanner';
|
|
import Icon from '../img/index/icon.png';
|
|
import { Link } from 'react-router-dom';
|
|
import { Spin } from 'antd';
|
|
import SubList from './SubList';
|
|
import more from '../img/index/more.png';
|
|
import axios from 'axios';
|
|
import { getImageUrl } from 'educoder';
|
|
import Nodata from '../../Nodata';
|
|
|
|
const LIMIT = 20;
|
|
function Index() {
|
|
|
|
const [ cateList , setCateList ] = useState(undefined);
|
|
const [ projectsList , setProjectsList ] = useState(undefined);
|
|
const [ cateID, setCateID ] = useState(undefined);
|
|
const [ isSpin, setIsSpin ] = useState(true);
|
|
|
|
useEffect(()=>{
|
|
getCate();
|
|
},[])
|
|
|
|
useEffect(()=>{
|
|
setIsSpin(true);
|
|
getProject();
|
|
},[cateID])
|
|
|
|
function getCate() {
|
|
const url = `/project_categories/pinned_index.json`;
|
|
axios.get(url).then(result=>{
|
|
if(result && result.data){
|
|
setCateList(result.data.project_categories);
|
|
}
|
|
}).catch(error=>{})
|
|
}
|
|
|
|
function getProject() {
|
|
const url = `/projects.json`;
|
|
axios.get(url,{
|
|
params:{
|
|
pinned:"d",
|
|
category_id:cateID,
|
|
limit:LIMIT
|
|
}
|
|
}).then(result=>{
|
|
if(result && result.data){
|
|
setProjectsList(result.data.projects);
|
|
setIsSpin(false);
|
|
}
|
|
}).catch(error=>{})
|
|
}
|
|
|
|
return(
|
|
<div>
|
|
<SubBanner />
|
|
<SubUnitBanner />
|
|
<div className="dataPanel">
|
|
<div className="left">
|
|
<ul className="leftTypes">
|
|
<a className={cateID ? "" : "active"} onClick={()=>setCateID(undefined)}><img src={Icon} alt="" /><span>最近更新</span></a>
|
|
{
|
|
cateList && cateList.length>0?
|
|
cateList.map((i,k)=>{
|
|
return(
|
|
<a className={cateID === i.id ?"active":""} onClick={()=>setCateID(i.id)}><img src={i.logo_url || Icon} alt="" /><span>{i.name}</span></a>
|
|
)
|
|
})
|
|
:""
|
|
}
|
|
</ul>
|
|
<div className="leftLists">
|
|
<div className="leftTitles">
|
|
<span>开源项目</span>
|
|
<Link to={`/explore/all`}>更多<i className="iconfont icon-triangle font-12"></i></Link>
|
|
</div>
|
|
<Spin spinning={isSpin}>
|
|
<div style={{minHeight:"400px"}}>
|
|
{
|
|
projectsList && projectsList.length > 0 ?
|
|
<div className="leftlistItem">
|
|
{
|
|
projectsList.map((i,k)=>{
|
|
return(
|
|
<li>
|
|
<Link to={`/${i.author && i.author.login}`}><img src={getImageUrl(`/${i.author && i.author.image_url}`)} alt="" /></Link>
|
|
<div className="itemTitle">
|
|
<div className="item-title-infos">
|
|
<Link to={`/${i.author && i.author.login}/${i.identifier}`} className="infotitle">{i.author && i.author.name}/{i.name}</Link>
|
|
{i.praises_count > 0 ? <span><i className="iconfont icon-dianzan11 mr3 font-16"></i>{i.praises_count}</span> :"" }
|
|
{i.forked_count > 0 ? <span><i className="iconfont icon-fork2 mr3 font-13"></i>{i.forked_count}</span>:""}
|
|
</div>
|
|
<div className="item-desc task-hide-2">
|
|
{i.description}
|
|
</div>
|
|
<div className="item-data">
|
|
{i.category && i.category.id ? <span className="category">{i.category.name}</span> :"" }
|
|
{i.language && i.language.id ? <span className="language mr30">{i.language.name}</span> :""}
|
|
<span style={{lineHeight:"15px",display:"flex"}}><i className="iconfont icon-shijian font-15 mr5"></i>更新于{i.time_ago}</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
:""
|
|
}
|
|
{
|
|
projectsList && projectsList.length === 0 && <Nodata _html="暂无数据" />
|
|
}
|
|
</div>
|
|
</Spin>
|
|
<div className="left-bottom-btn">
|
|
<Link to={`/explore/all`}>查看更多开源项目<img src={more} alt="" /></Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<SubList />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
export default Index; |