forked from Gitlink/forgeplus-react
127 lines
4.0 KiB
JavaScript
127 lines
4.0 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
||
import { FlexAJ , AlignCenter } from '../../Component/layout';
|
||
import { Link } from 'react-router-dom';
|
||
import axios from 'axios';
|
||
import Box from './ConcentrateBox';
|
||
import './Index.scss';
|
||
|
||
function ConcentrateProject({
|
||
userLogin,
|
||
current,
|
||
showCompeleteDialog,
|
||
completeProfile,
|
||
history,
|
||
type,
|
||
title,
|
||
typeFlag,
|
||
btn,
|
||
emptyContent
|
||
}) {
|
||
const [ list , setList ] = useState(undefined);
|
||
const [ visible , setVisible ] = useState(false);
|
||
const [ value , setValue ] = useState([]);
|
||
|
||
useEffect(()=>{
|
||
getList();
|
||
},[])
|
||
|
||
function getList() {
|
||
const url = `/${type || `users`}/${userLogin}/is_pinned_projects.json`;
|
||
axios.get(url).then(result=>{
|
||
if(result && result.data){
|
||
let p = result.data.projects;
|
||
setList(p);
|
||
if(p && p.length > 0){
|
||
let array = p.map(i=>{
|
||
return i.project_id
|
||
})
|
||
setValue(array);
|
||
}
|
||
}
|
||
}).catch(erroer=>{})
|
||
}
|
||
|
||
function onSure(is_pinned_project_ids) {
|
||
if(is_pinned_project_ids && is_pinned_project_ids.length===0){
|
||
setValue([]);
|
||
}
|
||
const url = `/${type || `users`}/${userLogin}/is_pinned_projects/pin.json`;
|
||
axios.post(url,{
|
||
is_pinned_project_ids
|
||
}).then(result=>{
|
||
if(result && result.data){
|
||
setVisible(false);
|
||
getList();
|
||
}
|
||
}).catch(error=>{})
|
||
}
|
||
return(
|
||
<React.Fragment>
|
||
<Box
|
||
visible={visible}
|
||
onCancel={()=>setVisible(false)}
|
||
onSure={onSure}
|
||
username={userLogin}
|
||
choosed={value}
|
||
completeProfile={completeProfile}
|
||
showCompeleteDialog={showCompeleteDialog}
|
||
history={history}
|
||
type={type}
|
||
/>
|
||
<div className="concentrate">
|
||
<FlexAJ>
|
||
{
|
||
title || <span className="font-18">精选项目</span>
|
||
}
|
||
{ (current && ((btn && list && list.length > 0) || !btn)) &&
|
||
<a className="color-blue" onClick={()=>setVisible(true)}>
|
||
{btn || "自定义精选项目"}
|
||
</a>
|
||
}
|
||
</FlexAJ>
|
||
{
|
||
list && list.length>0 &&
|
||
<div>
|
||
<ul className="concentrateUl">
|
||
{
|
||
list.map((i,k)=>{
|
||
return(
|
||
<li key={i.id}>
|
||
<Link to={`/${i.author && i.author.login}/${i.identifier}`} className="name task-hide">{i.name}</Link>
|
||
<p className="task-hide desc">{i.description}</p>
|
||
{/* 项目标签 */}
|
||
{i.topics && <div className='viewProListTopics mt10'>
|
||
{i.topics.map(item=><Link to={`/explore/topic/${item.id}/${encodeURIComponent(item.name)}`} className='viewProListTopic mr15 font-13 task-hide'>{item.name}</Link>)}
|
||
</div>}
|
||
<AlignCenter>
|
||
{ i.category && !typeFlag && <span className="tagName">{i.category.name}</span> }
|
||
<span className="pariseCount ml2"><i className="iconfont icon-xingzhuang"></i>{i.watchers_count}</span>
|
||
<span className="forkCount"><i className="iconfont icon-morenfuke_icon1"></i>{i.forked_count}</span>
|
||
</AlignCenter>
|
||
</li>
|
||
)
|
||
})
|
||
}
|
||
</ul>
|
||
</div>
|
||
}
|
||
</div>
|
||
{
|
||
(!emptyContent && list && list.length === 0 && current) &&
|
||
<div className="ConcentrateTip">
|
||
<i className="iconfont icon-tishi2"></i>
|
||
你还没有设置精选项目，<a onClick={()=>setVisible(true)}>点击设置</a>
|
||
</div>
|
||
}
|
||
{
|
||
emptyContent && list && list.length === 0 ?
|
||
<div className="ConcentrateTipImg">
|
||
{emptyContent}
|
||
<span className="font-15">暂无数据{current && <span>，<a className="color-blue" onClick={()=>setVisible(true)}>点击设置</a></span>}</span>
|
||
</div>
|
||
:""
|
||
}
|
||
</React.Fragment>
|
||
)
|
||
}
|
||
export default ConcentrateProject; |