|
|
import React , { Component } from 'react';
|
|
|
import { getImageUrl } from 'educoder';
|
|
|
import { Link } from 'react-router-dom';
|
|
|
import '../css/index.css'
|
|
|
import './list.css';
|
|
|
//把时间戳转换为几分钟或几小时前或几天前
|
|
|
function getDateDiff(dateTimeStamp){
|
|
|
var minute = 1000 * 60;
|
|
|
var hour = minute * 60;
|
|
|
var day = hour * 24;
|
|
|
var month = day * 30;
|
|
|
|
|
|
var now = new Date().getTime();
|
|
|
var diffValue = now - dateTimeStamp;
|
|
|
if(diffValue < 0){return;}
|
|
|
var monthC =diffValue/month;
|
|
|
var weekC =diffValue/(7*day);
|
|
|
var dayC =diffValue/day;
|
|
|
var hourC =diffValue/hour;
|
|
|
var minC =diffValue/minute;
|
|
|
|
|
|
var result = "";
|
|
|
if(monthC>=1){
|
|
|
result="" + parseInt(monthC) + "月前";
|
|
|
}
|
|
|
else if(weekC>=1){
|
|
|
result="" + parseInt(weekC) + "周前";
|
|
|
}
|
|
|
else if(dayC>=1){
|
|
|
result=""+ parseInt(dayC) +"天前";
|
|
|
}
|
|
|
else if(hourC>=1){
|
|
|
result=""+ parseInt(hourC) +"小时前";
|
|
|
}
|
|
|
else if(minC>=1){
|
|
|
result=""+ parseInt(minC) +"分钟前";
|
|
|
}else
|
|
|
result="刚刚";
|
|
|
return result;
|
|
|
}
|
|
|
|
|
|
class IndexItem extends Component{
|
|
|
|
|
|
render(){
|
|
|
const { projects } = this.props;
|
|
|
|
|
|
const renderList = (
|
|
|
projects && projects.length >0 && projects.map((item,key)=>{
|
|
|
return(
|
|
|
<div className="p-r-Item">
|
|
|
<img className="p-r-photo" alt="" src={getImageUrl(`images/${item.author && item.author.image_url}`)} ></img>
|
|
|
<div className="p-r-Infos">
|
|
|
<div className="p-r-name">
|
|
|
<Link to={""} className="hide-1 font-16 color-grey-3">{item.name}</Link>
|
|
|
<span className="p-r-tags">
|
|
|
{ item.forked_count ? <span><label>Fork</label><span>{ item.forked_count}</span></span>:"" }
|
|
|
<span><label>Start</label><span>{ item.praises_count }</span></span>
|
|
|
{ item.language && item.language.id ? <span><label>{ item.language.name }</label></span>:"" }
|
|
|
</span>
|
|
|
</div>
|
|
|
<div className="p-r-content">
|
|
|
<p className="break_word hide-2">{item.description}</p>
|
|
|
</div>
|
|
|
<div className="p-r-name mt8 color-grey-6">
|
|
|
<span className="p-r-detail">
|
|
|
<span><label>浏览量：</label>{item.visits}</span>
|
|
|
{ item.category && item.category.id && <span><label>项目类别：</label>{item.category.name}</span>}
|
|
|
</span>
|
|
|
{item.last_update_time ? <span>{getDateDiff(item.last_update_time)}</span> : "" }
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
)
|
|
|
})
|
|
|
)
|
|
|
return(
|
|
|
<div className="project-list">
|
|
|
{ renderList }
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
}
|
|
|
export default IndexItem; |
