time

public/react/src/forge/Main/Index.js

@@ -1,6 +1,6 @@
 import React , { Component } from 'react';
 
-import { Menu , Input , Dropdown , Icon, Result } from 'antd';
+import { Menu , Input , Dropdown , Icon, Spin , Pagination } from 'antd';
 import { Link } from 'react-router-dom';
 import '../css/index.css'
 import './list.css';
@@ -18,7 +18,9 @@ class Index extends Component{
       page:1,
       limit:15,
       search:undefined,
-      sort:undefined
+      sort:undefined,
+      total:0,
+      isSpin:true,
     }
   }
   
@@ -34,30 +36,67 @@ class Index extends Component{
       user_id:current_user && current_user.user_id,
       page,
       limit,
-      name:search,
+      search,
       sort_by:sort
     }}).then((result)=>{
       if(result){
         this.setState({
-          projectsList:result.data
+          projectsList:result.data.projects,
+          total:result.data.total_count,
+          isSpin:false
         })
       }
     }).catch((error)=>{})
   }
 
+  // 排序
+  ChangeSoryBy=(e)=>{
+    this.setState({
+      sort_by:e.key,
+      page:1,
+      search:undefined,
+      isSpin:true
+    })
+    const { limit } = this.state;
+    this.getListData(1 ,limit , undefined , e.key);
+  }
+
+  // 搜索
+  searchFun=(value)=>{
+    // console.log(value)
+    this.setState({
+      page:1,
+      search:value,
+      isSpin:true
+    })
+    const { limit , sort } = this.state;
+    this.getListData(1 ,limit, value , sort);
+  }
+  // 翻页
+  ChangePage=(page)=>{
+    this.setState({
+      page
+    })
+    const { limit, search , sort } = this.state;
+    this.getListData(page,limit, search , sort);
+  }
+
   render(){
     const menu=(
-      <Menu>
-        <Menu.Item key="0">
-          <a href="http://www.alipay.com/">1st menu item</a>
-        </Menu.Item>
-        <Menu.Item key="1">
-          <a href="http://www.taobao.com/">2nd menu item</a>
-        </Menu.Item>
+      <Menu onClick={this.ChangeSoryBy}>
+        <Menu.Item key="updated_on">更新时间排序</Menu.Item>
+        <Menu.Item key="created_on">创建时间排序</Menu.Item>
+        <Menu.Item key="forked_count">fork数据排序</Menu.Item>
+        <Menu.Item key="praises_count">点赞数量排序</Menu.Item>
       </Menu>
     )
 
-    const { projectsList } = this.state;
+    const { projectsList , isSpin , total , limit , page } = this.state;
+
+    const pagination = (
+      total && total > 0 && 
+      <Pagination showQuickJumper pageSize={limit} total={total} current={page} onChange={this.ChangePage}></Pagination>
+    )
     return(
       <div className="main ProjectListIndex">
         <div className="list-left">
@@ -100,12 +139,13 @@ class Index extends Component{
           </ul>
         </div>
         <div className="list-right">
+          <Spin spinning={isSpin}>
             <div className="list-r-operation">
               <Search
                 placeholder="输入项目名称关键字进行搜索"
                 enterButton="搜索"
                 size="large"
-              onSearch={value => console.log(value)}
+                onSearch={this.searchFun}
                 className="list-r-Search"
               />
               <Dropdown overlay={menu} trigger={['click']} placement='bottomRight'>
@@ -115,6 +155,7 @@ class Index extends Component{
               </Dropdown>
             </div>
             <ListItem {...this.props} {...this.state} projects={projectsList}></ListItem>
+          </Spin>
         </div>
       </div>
     )

public/react/src/forge/Main/IndexItem.js

@@ -1,43 +1,46 @@
 import React , { Component } from 'react';
-
-import { Menu , Input , Dropdown , Icon, Result } from 'antd';
+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; 
   
-class IndexItem extends Component{
-  renderList=(list)=>{
-    if(list && list.length >0 ){
-      list.map((item,key)=>{
-        return(
-          <div className="p-r-Item">
-            <img className="p-r-photo" alt="" src="http://b-ssl.duitang.com/uploads/item/201901/17/20190117230425_eofqv.thumb.700_0.jpg" ></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">
-                  <span><label>Fork</label><span>{item.forked_count}</span></span>
-                  <span><label>Start</label><span>10</span></span>
-                  { item.language && item.language.id && <span><label>{ item.language.name }</label></span>}
-                  <span><label>Python</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>
-                <span>最后更新于9小时前</span>
-              </div>
-            </div>
-          </div>
-        )
-      })
+  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;
 
@@ -45,15 +48,14 @@ class IndexItem extends Component{
       projects && projects.length >0 && projects.map((item,key)=>{
         return(
           <div className="p-r-Item">
-            <img className="p-r-photo" alt="" src="http://b-ssl.duitang.com/uploads/item/201901/17/20190117230425_eofqv.thumb.700_0.jpg" ></img>
+            <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>:"" }
-                  { item.prasies_count ? <span><label>Start</label><span>{ item.prasies_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><label>Python</label></span>
                 </span>
               </div>
               <div className="p-r-content">
@@ -64,14 +66,13 @@ class IndexItem extends Component{
                   <span><label>浏览量：</label>{item.visits}</span>
                   { item.category && item.category.id && <span><label>项目类别：</label>{item.category.name}</span>}
                 </span>
-                <span>最后更新于9小时前</span>
+                {item.last_update_time ? <span>{getDateDiff(item.last_update_time)}</span> : "" }
               </div>
             </div>
           </div>
         )
       })
     )
-    console.log(renderList);
     return(
       <div className="project-list">
         { renderList }

public/react/src/forge/Main/list.css

@@ -120,6 +120,7 @@
   border-left: #efefef;
   padding:0px 4px;
   border-radius: 0px 4px 4px 0px;
+  color: #999;
 }
 .p-r-content{
   margin-top:10px;