sort by time & add FolderMark

Author: Rokt33r

browser/main/HomePage.js

@@ -69,6 +69,9 @@ function remap (state) {
 
   let articles = state.articles['team-' + activeUser.id]
   if (articles == null) articles = []
+  articles.sort((a, b) => {
+    return new Date(b.updatedAt) - new Date(a.updatedAt)
+  })
 
   let activeArticle = findWhere(articles, {key: status.articleKey})
   if (activeArticle == null) activeArticle = articles[0]

browser/main/HomePage/ArticleDetail.js

@@ -9,6 +9,7 @@ import aceModes from 'boost/ace-modes'
 import Select from 'react-select'
 import linkState from 'boost/linkState'
 import api from 'boost/api'
+import FolderMark from 'boost/components/FolderMark'
 
 var modeOptions = aceModes.map(function (mode) {
   return {
@@ -19,7 +20,7 @@ var modeOptions = aceModes.map(function (mode) {
 
 function makeInstantArticle (article) {
   let instantArticle = Object.assign({}, article)
-  instantArticle.Tags = typeof instantArticle.Tags === 'array' ? instantArticle.Tags.map(tag => tag.name) : []
+  instantArticle.Tags = (typeof instantArticle.Tags === 'array') ? instantArticle.Tags.map(tag => tag.name) : []
   return instantArticle
 }
 
@@ -115,7 +116,7 @@ export default class ArticleDetail extends React.Component {
             <div className='detailInfo'>
               <div className='left'>
                 <div className='info'>
-                  <i className='fa fa-fw fa-square'/> {folderName}&nbsp;
+                  <FolderMark id={folder.id}/> {folderName}&nbsp;
                   by {activeArticle.User.profileName}&nbsp;
                   Created {moment(activeArticle.createdAt).format('YYYY/MM/DD')}&nbsp;
                   Updated {moment(activeArticle.updatedAt).format('YYYY/MM/DD')}
@@ -139,7 +140,7 @@ export default class ArticleDetail extends React.Component {
             </div>
             {activeArticle.mode === 'markdown'
               ? <MarkdownPreview content={activeArticle.content}/>
-              : <CodeEditor readOnly={true} onChange={this.handleContentChange} mode={activeArticle.mode} code={activeArticle.content}/>
+              : <CodeEditor readOnly onChange={this.handleContentChange} mode={activeArticle.mode} code={activeArticle.content}/>
             }
           </div>
         </div>

browser/main/HomePage/ArticleList.js

@@ -3,6 +3,7 @@ import ProfileImage from 'boost/components/ProfileImage'
 import ModeIcon from 'boost/components/ModeIcon'
 import moment from 'moment'
 import { switchArticle, NEW } from '../actions'
+import FolderMark from 'boost/components/FolderMark'
 
 export default class ArticleList extends React.Component {
   handleArticleClick (key) {
@@ -26,7 +27,7 @@ export default class ArticleList extends React.Component {
         <div key={'article-' + article.key}>
           <div onClick={e => this.handleArticleClick(article.key)(e)} className={'articleItem' + (activeArticle.key === article.key ? ' active' : '')}>
             <div className='top'>
-              <i className='fa fa-fw fa-square'/>
+              <FolderMark id={article.FolderId}/>
               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>

browser/main/HomePage/ArticleNavigator.js

@@ -4,6 +4,7 @@ import { findWhere } from 'lodash'
 import { switchMode, CREATE_MODE } from '../actions'
 import { openModal } from 'boost/modal'
 import CreateNewFolder from 'boost/components/modal/CreateNewFolder'
+import FolderMark from 'boost/components/FolderMark'
 
 export default class ArticleNavigator extends React.Component {
   handleNewPostButtonClick (e) {
@@ -23,9 +24,10 @@ export default class ArticleNavigator extends React.Component {
 
     let activeFolder = findWhere(activeUser.Folders, {id: status.folderId})
 
-    let folders = activeUser.Folders.map(folder => {
+    let folders = activeUser.Folders.map((folder, index) => {
       return (
-        <button key={'folder-' + folder.id} className={activeFolder != null && activeFolder.id === folder.id ? 'active' : ''}><i className='fa fa-fw fa-square'/> {folder.name}</button>
+        <button key={'folder-' + folder.id} className={activeFolder != null && activeFolder.id === folder.id ? 'active' : ''}>
+        <FolderMark id={folder.id}/> {folder.name}</button>
       )
     })
 
@@ -55,7 +57,7 @@ export default class ArticleNavigator extends React.Component {
         <div className='folders'>
           <div className='header'>
             <div className='title'>Folders</div>
-            <button onCLick={e => this.handleNewFolderButton(e)} className='addBtn'><i className='fa fa-fw fa-plus'/></button>
+            <button onClick={e => this.handleNewFolderButton(e)} className='addBtn'><i className='fa fa-fw fa-plus'/></button>
           </div>
           <div className='folderList'>
             <button className={activeFolder == null ? 'active' : ''}>All folders</button>

lib/components/FolderMark.js

@@ -0,0 +1,46 @@
+import React, { PropTypes } from 'react'
+
+const BLUE = '#3460C7'
+const LIGHTBLUE = '#2BA5F7'
+const ORANGE = '#FF8E00'
+const YELLOW = '#EAEF31'
+const GREEN = '#02FF26'
+const DARKGREEN = '#008A59'
+const RED = '#E10051'
+const PURPLE = '#B013A4'
+
+function getColorByIndex (index) {
+  switch (index % 8) {
+    case 0:
+      return LIGHTBLUE
+    case 1:
+      return ORANGE
+    case 2:
+      return RED
+    case 3:
+      return GREEN
+    case 4:
+      return DARKGREEN
+    case 5:
+      return YELLOW
+    case 6:
+      return BLUE
+    case 7:
+      return PURPLE
+    default:
+      return 'gray'
+  }
+}
+
+export default class FolderMark extends React.Component {
+  render () {
+    let color = getColorByIndex(this.props.id)
+    return (
+      <i className='fa fa-square fa-fw' style={{color: color}}/>
+    )
+  }
+}
+
+FolderMark.propTypes = {
+  id: PropTypes.number
+}