revive articledetail

browser/main/HomeContainer/Components/ArticleList.js

@@ -1,11 +1,66 @@
 import React, { PropTypes } from 'react'
+import ProfileImage from '../../components/ProfileImage'
+import ModeIcon from '../../Components/ModeIcon'
+import moment from 'moment'
+import { IDLE_MODE, CREATE_MODE, EDIT_MODE } from '../actions'
+
+export default class ArticleList extends React.Component {
+  render () {
+    let { articles, status } = this.props
+
+    let articlesEl = articles.map(article => {
+      let tags = Array.isArray(article.Tags) && article.Tags.length > 0 ? article.Tags.map(tag => {
+        return (
+          <a key={tag.id}>#{tag.name}</a>
+        )
+      }) : (
+        <span>Not tagged yet</span>
+      )
+
+      return (
+        <div key={'article-' + article.id}>
+          <div className={'articleItem' + (false ? ' active' : '')}>
+            <div className='top'>
+              <i className='fa fa-fw fa-square'/>
+              by <ProfileImage className='profileImage' size='20' email={article.User.email}/> {article.User.profileName}
+            <span className='updatedAt'>{article.status != null ? article.status : moment(article.updatedAt).fromNow()}</span>
+            </div>
+            <div className='middle'>
+              <ModeIcon className='mode' mode={article.mode}/> <div className='title'>{article.status !== 'new' ? article.title : '(New article)'}</div>
+            </div>
+            <div className='bottom'>
+              <div className='tags'><i className='fa fa-fw fa-tags'/>{tags}</div>
+            </div>
+          </div>
+          <div className='divider'></div>
+        </div>
+      )
+    })
 
-class ArticleList extends React.Component {
-  render() {
     return (
-      <div className='ArticleList'></div>
+      <div className='ArticleList'>
+        { status.mode === 'CREATE_MODE' ? (
+          <div key={'article-' + article.id}>
+            <div className={'articleItem'}>
+              <div className='top'>
+              <span className='updatedAt'>{}</span>
+              </div>
+              <div className='middle'>
+                <ModeIcon className='mode' mode={article.mode}/> <div className='title'>'(New article)'</div>
+              </div>
+              <div className='bottom'>
+                <div className='tags'><i className='fa fa-fw fa-tags'/></div>
+              </div>
+            </div>
+            <div className='divider'></div>
+          </div>
+        ) : null}
+        {articlesEl}
+      </div>
     )
   }
 }
 
-export default ArticleList
+ArticleList.propTypes = {
+  articles: PropTypes.array
+}