revive articledetail

browser/main/HomeContainer/Components/ArticleDetail.js

@@ -1,9 +1,59 @@
 import React, { PropTypes } from 'react'
+import moment from 'moment'
+import { findWhere } from 'lodash'
+import ModeIcon from '../../Components/ModeIcon'
+import MarkdownPreview from '../../Components/MarkdownPreview'
+import CodeEditor from '../../Components/CodeEditor'
 
 export default class ArticleDetail extends React.Component {
   render () {
+    let { article, status, user } = this.props
+
+    let tags = article.Tags.length > 0 ? article.Tags.map(tag => {
+      return (
+        <a key={tag.id}>{tag.name}</a>
+      )
+    }) : (
+      <span className='noTags'>Not tagged yet</span>
+    )
+    let folder = findWhere(user.Folders, {id: article.FolderId})
+    let folderName = folder != null ? folder.name : '(unknown)'
+
     return (
-      <div className='ArticleDetail'></div>
+      <div className='ArticleDetail show'>
+        <div className='detailInfo'>
+          <div className='left'>
+            <div className='info'>
+              <i className='fa fa-fw fa-square'/> {folderName}&nbsp;
+              by {article.User.profileName}&nbsp;
+              Created {moment(article.createdAt).format('YYYY/MM/DD')}&nbsp;
+              Updated {moment(article.updatedAt).format('YYYY/MM/DD')}
+            </div>
+            <div className='tags'><i className='fa fa-fw fa-tags'/>{tags}</div>
+          </div>
+
+          <div className='right'>
+            <button><i className='fa fa-fw fa-edit'/></button>
+            <button><i className='fa fa-fw fa-trash'/></button>
+            <button><i className='fa fa-fw fa-share-alt'/></button>
+          </div>
+        </div>
+        <div className='detailBody'>
+          <div className='detailPanel'>
+            <div className='header'>
+              <ModeIcon className='mode' mode={article.mode}/>
+              <div className='title'>{article.title}</div>
+            </div>
+            {article.mode === 'markdown' ? <MarkdownPreview content={article.content}/> : <CodeEditor readOnly={true} onChange={this.handleContentChange} mode={article.mode} code={article.content}/>}
+          </div>
+        </div>
+      </div>
     )
   }
 }
+
+ArticleDetail.propTypes = {
+  article: PropTypes.shape(),
+  status: PropTypes.shape(),
+  user: PropTypes.shape()
+}

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
+}

browser/main/HomeContainer/Components/ArticleNavigator.js

@@ -6,7 +6,6 @@ export default class ArticleNavigator extends React.Component {
   render () {
     let { user, status } = this.props
     if (user == null) return (<div className='ArticleNavigator'/>)
-    console.log(user.Folders)
 
     let activeFolder = findWhere(user.Folders, {id: status.folderId})
 
@@ -68,5 +67,8 @@ export default class ArticleNavigator extends React.Component {
 }
 
 ArticleNavigator.propTypes = {
-  user: PropTypes.object
+  user: PropTypes.object,
+  state: PropTypes.shape({
+    folderId: PropTypes.number
+  })
 }