No edit mode

browser/main/HomePage/ArticleList.js

@@ -2,7 +2,7 @@ import React, { PropTypes } from 'react'
 import ReactDOM from 'react-dom'
 import ModeIcon from 'browser/components/ModeIcon'
 import moment from 'moment'
-import { switchArticle, NEW } from '../actions'
+import { switchArticle } from '../actions'
 import FolderMark from 'browser/components/FolderMark'
 import TagLink from './TagLink'
 import _ from 'lodash'
@@ -64,40 +64,58 @@ export default class ArticleList extends React.Component {
   handleArticleClick (article) {
     let { dispatch } = this.props
     return function (e) {
-      if (article.status === NEW) return null
       dispatch(switchArticle(article.key))
     }
   }
 
   render () {
-    let { articles, activeArticle, folders } = this.props
+    let { articles, modified, activeArticle, folders } = this.props
 
     let articleElements = articles.map(article => {
+      let modifiedArticle = _.findWhere(modified, {key: article.key})
+      let originalArticle = article
+      if (modifiedArticle) {
+        article = Object.assign({}, article, modifiedArticle)
+      }
       let tagElements = Array.isArray(article.tags) && article.tags.length > 0
         ? article.tags.map(tag => {
           return (<TagLink key={tag} tag={tag}/>)
         })
         : (<span>Not tagged yet</span>)
       let folder = _.findWhere(folders, {key: article.FolderKey})
+      let folderChanged = originalArticle.FolderKey !== article.FolderKey
+      let originalFolder = folderChanged ? _.findWhere(folders, {key: originalArticle.FolderKey}) : null
 
-      let title = article.status !== NEW
-        ? article.title.trim().length === 0
+      let title = article.title.trim().length === 0
         ? <small>(Untitled)</small>
         : article.title
-        : '(New article)'
 
       return (
         <div key={'article-' + article.key}>
           <div onClick={e => this.handleArticleClick(article)(e)} className={'articleItem' + (activeArticle.key === article.key ? ' active' : '')}>
             <div className='top'>
               {folder != null
-                ? <span className='folderName'><FolderMark color={folder.color}/>{folder.name}</span>
+                ? folderChanged
+                  ? <span className='folderName'>
+                      <FolderMark color={originalFolder.color}/>{originalFolder.name}
+                      ->
+                      <FolderMark color={folder.color}/>{folder.name}
+                    </span>
+                  : <span className='folderName'>
+                      <FolderMark color={folder.color}/>{folder.name}
+                    </span>
                 : <span><FolderMark color={-1}/>Unknown</span>
               }
-            <span className='updatedAt'>{article.status != null ? article.status : moment(article.updatedAt).fromNow()}</span>
+              <span className='updatedAt'
+                children={
+                  modifiedArticle != null
+                    ? <span><span className='unsaved-mark'>●</span> Unsaved</span>
+                    : moment(article.updatedAt).fromNow()
+                }
+              />
             </div>
             <div className='middle'>
-              <ModeIcon className='mode' mode={article.mode}/> <div className='title'>{title}</div>
+              <ModeIcon className='mode' mode={article.mode}/> <div className='title' children={title}/>
             </div>
             <div className='bottom'>
               <div className='tags'><i className='fa fa-fw fa-tags'/>{tagElements}</div>
@@ -119,6 +137,7 @@ export default class ArticleList extends React.Component {
 ArticleList.propTypes = {
   folders: PropTypes.array,
   articles: PropTypes.array,
+  modified: PropTypes.array,
   activeArticle: PropTypes.shape(),
   dispatch: PropTypes.func
 }