new folder modal / key indexing for article / login bugfix

browser/main/HomePage/ArticleDetail.js

@@ -19,7 +19,7 @@ var modeOptions = aceModes.map(function (mode) {
 
 function makeInstantArticle (article) {
   let instantArticle = Object.assign({}, article)
-  instantArticle.Tags = instantArticle.Tags.map(tag => tag.name)
+  instantArticle.Tags = typeof instantArticle.Tags === 'array' ? instantArticle.Tags.map(tag => tag.name) : []
   return instantArticle
 }
 
@@ -102,8 +102,12 @@ export default class ArticleDetail extends React.Component {
             <div className='deleteConfirm'>
               <div className='right'>
                 Are you sure to delete this article?
-                <button onClick={e => this.handleDeleteConfirmButtonClick(e)} className='primary'><i className='fa fa-fw fa-check'/> Sure</button>
-                <button onClick={e => this.handleDeleteCancleButtonClick(e)}><i className='fa fa-fw fa-times'/> Cancle</button>
+                <button onClick={e => this.handleDeleteConfirmButtonClick(e)} className='primary'>
+                  <i className='fa fa-fw fa-check'/> Sure
+                </button>
+                <button onClick={e => this.handleDeleteCancleButtonClick(e)}>
+                  <i className='fa fa-fw fa-times'/> Cancle
+                </button>
               </div>
             </div>
           )
@@ -133,7 +137,10 @@ export default class ArticleDetail extends React.Component {
               <ModeIcon className='mode' mode={activeArticle.mode}/>
               <div className='title'>{activeArticle.title}</div>
             </div>
-            {activeArticle.mode === 'markdown' ? <MarkdownPreview content={activeArticle.content}/> : <CodeEditor readOnly={true} onChange={this.handleContentChange} mode={activeArticle.mode} code={activeArticle.content}/>}
+            {activeArticle.mode === 'markdown'
+              ? <MarkdownPreview content={activeArticle.content}/>
+              : <CodeEditor readOnly={true} onChange={this.handleContentChange} mode={activeArticle.mode} code={activeArticle.content}/>
+            }
           </div>
         </div>
       </div>
@@ -147,7 +154,7 @@ export default class ArticleDetail extends React.Component {
   handleSaveButtonClick (e) {
     let { activeArticle } = this.props
 
-    if (typeof activeArticle.id === 'string') this.saveAsNew()
+    if (activeArticle.id == null) this.saveAsNew()
     else this.save()
   }
 
@@ -254,7 +261,7 @@ export default class ArticleDetail extends React.Component {
         <div className='detailInfo'>
           <div className='left'>
             <Select ref='folder' onChange={value => this.handleFolderIdChange(value)} clearable={false} placeholder='select folder...' options={folderOptions} value={this.state.article.FolderId} className='folder'/>
-            <Select onChange={(tag, tags) => this.handleTagsChange(tag, tags)} clearable={false} multi={true} placeholder='add some tags...' allowCreate={true} value={this.state.article.Tags} className='tags'/>
+            <Select onChange={(tag, tags) => this.handleTagsChange(tag, tags)} clearable={false} multi placeholder='add some tags...' allowCreate value={this.state.article.Tags} className='tags'/>
           </div>
           <div className='right'>
             <button onClick={e => this.handleCancelButtonClick(e)}>Cancel</button>

browser/main/HomePage/ArticleList.js

@@ -5,10 +5,10 @@ import moment from 'moment'
 import { IDLE_MODE, CREATE_MODE, EDIT_MODE, switchArticle, NEW } from '../actions'
 
 export default class ArticleList extends React.Component {
-  handleArticleClick (id) {
+  handleArticleClick (key) {
     let { dispatch } = this.props
     return function (e) {
-      dispatch(switchArticle(id))
+      dispatch(switchArticle(key))
     }
   }
 
@@ -25,8 +25,8 @@ export default class ArticleList extends React.Component {
       )
 
       return (
-        <div key={'article-' + article.id}>
-          <div onClick={e => this.handleArticleClick(article.id)(e)} className={'articleItem' + (activeArticle.id === article.id ? ' active' : '')}>
+        <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'/>
               by <ProfileImage className='profileImage' size='20' email={article.User.email}/> {article.User.profileName}

browser/main/HomePage/ArticleNavigator.js

@@ -2,6 +2,8 @@ import React, { PropTypes } from 'react'
 import ProfileImage from 'boost/components/ProfileImage'
 import { findWhere } from 'lodash'
 import { switchMode, CREATE_MODE } from '../actions'
+import { openModal } from 'boost/modal'
+import CreateNewFolder from 'boost/components/modal/CreateNewFolder'
 
 export default class ArticleNavigator extends React.Component {
   handleNewPostButtonClick (e) {
@@ -10,6 +12,11 @@ export default class ArticleNavigator extends React.Component {
     dispatch(switchMode(CREATE_MODE))
   }
 
+  handleNewFolderButton (e) {
+    let { activeUser } = this.props
+    openModal(CreateNewFolder, {user: activeUser})
+  }
+
   render () {
     let { activeUser, status } = this.props
     if (activeUser == null) return (<div className='ArticleNavigator'/>)
@@ -48,7 +55,7 @@ export default class ArticleNavigator extends React.Component {
         <div className='folders'>
           <div className='header'>
             <div className='title'>Folders</div>
-            <button 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>
@@ -75,7 +82,7 @@ export default class ArticleNavigator extends React.Component {
 
 ArticleNavigator.propTypes = {
   activeUser: PropTypes.object,
-  state: PropTypes.shape({
+  status: PropTypes.shape({
     folderId: PropTypes.number
   }),
   dispatch: PropTypes.func