CREATE_MODE(1/2)

.gitignore

@@ -2,3 +2,4 @@
 node_modules/*
 !node_modules/boost
 Boost-darwin-x64/
+backup/

browser/main/HomePage.js

@@ -1,15 +1,14 @@
 import React, { PropTypes} from 'react'
 import { connect } from 'react-redux'
-import { switchUser } from './actions'
+import { CREATE_MODE, IDLE_MODE, switchUser } from './actions'
 import UserNavigator from './HomePage/UserNavigator'
 import ArticleNavigator from './HomePage/ArticleNavigator'
 import ArticleTopBar from './HomePage/ArticleTopBar'
 import ArticleList from './HomePage/ArticleList'
 import ArticleDetail from './HomePage/ArticleDetail'
-import { findWhere } from 'lodash'
+import { findWhere, pick } from 'lodash'
-
+import keygen from 'boost/keygen'
-// var AuthFilter = require('../Mixins/AuthFilter')
+import { NEW } from './actions'
-// var KeyCaster = require('../Mixins/KeyCaster')
 
 class HomeContainer extends React.Component {
   componentDidMount () {
@@ -27,15 +26,15 @@ class HomeContainer extends React.Component {
   }
 
   render () {
-    const { users, user, status, articles, article } = this.props
+    const { dispatch, status, users, activeUser, articles, activeArticle } = this.props
 
     return (
       <div className='HomeContainer'>
         <UserNavigator users={users} />
-        <ArticleNavigator user={user} status={status}/>
+        <ArticleNavigator dispatch={dispatch} activeUser={activeUser} status={status}/>
         <ArticleTopBar/>
-        <ArticleList articles={articles} status={status}/>
+        <ArticleList dispatch={dispatch} articles={articles} status={status} activeArticle={activeArticle}/>
-        <ArticleDetail user={user} article={article} status={status}/>
+        <ArticleDetail dispatch={dispatch} activeUser={activeUser} activeArticle={activeArticle} status={status}/>
       </div>
     )
   }
@@ -48,24 +47,48 @@ function remap (state) {
   let teams = Array.isArray(currentUser.Teams) ? currentUser.Teams : []
 
   let users = [currentUser, ...teams]
-  let user = findWhere(users, {id: parseInt(status.userId, 10)})
+  let activeUser = findWhere(users, {id: parseInt(status.userId, 10)})
-  if (user == null) user = users[0]
+  if (activeUser == null) activeUser = users[0]
-  let articles = state.articles['team-' + user.id]
+  let articles = state.articles['team-' + activeUser.id]
-  let article = findWhere(users, {id: status.articleId})
+  let activeArticle = findWhere(users, {id: status.articleId})
-  if (article == null) article = articles[0]
+  if (activeArticle == null) activeArticle = articles[0]
+
+  if (status.mode === CREATE_MODE && activeUser.Folders.length > 0) {
+    var newArticle = findWhere(articles, {status: 'NEW'})
+    if (newArticle == null) {
+      newArticle = {
+        id: keygen(),
+        title: '',
+        content: '',
+        mode: 'markdown',
+        Tags: [],
+        User: pick(currentUser, ['email', 'name', 'profileName']),
+        FolderId: activeUser.Folders[0].id,
+        status: NEW
+      }
+      articles.unshift(newArticle)
+    }
+    activeArticle = newArticle
+  } else if (status.mode === CREATE_MODE) {
+    status.mode = IDLE_MODE
+  }
+  if (status.mode !== CREATE_MODE && activeArticle != null && activeArticle.status === NEW) {
+    articles.splice(articles.indexOf(activeArticle), 1)
+    activeArticle = articles[0]
+  }
 
   return {
     users,
-    user,
+    activeUser,
     status,
     articles,
-    article
+    activeArticle
   }
 }
 
 HomeContainer.propTypes = {
   users: PropTypes.array,
-  user: PropTypes.object,
+  activeUser: PropTypes.object,
   params: PropTypes.shape({
     userId: PropTypes.string
   }),
@@ -74,6 +97,7 @@ HomeContainer.propTypes = {
     folderId: PropTypes.number
   }),
   articles: PropTypes.array,
+  activeArticle: PropTypes.shape(),
   dispatch: PropTypes.func
 }
 

browser/main/HomePage/ArticleDetail.js

@@ -1,22 +1,52 @@
 import React, { PropTypes } from 'react'
 import moment from 'moment'
-import { findWhere } from 'lodash'
+import { findWhere, uniq } from 'lodash'
 import ModeIcon from 'boost/components/ModeIcon'
 import MarkdownPreview from 'boost/components/MarkdownPreview'
 import CodeEditor from 'boost/components/CodeEditor'
+import { NEW, IDLE_MODE, CREATE_MODE, EDIT_MODE, switchMode } from '../actions'
+import aceModes from 'boost/ace-modes'
+import Select from 'react-select'
+import linkState from 'boost/linkState'
+
+var modeOptions = aceModes.map(function (mode) {
+  return {
+    label: mode,
+    value: mode
+  }
+})
 
 export default class ArticleDetail extends React.Component {
-  render () {
+  constructor (props) {
-    let { article, status, user } = this.props
+    super(props)
+    this.state = {
+      article: Object.assign({}, props.activeArticle)
+    }
+  }
 
-    let tags = article.Tags.length > 0 ? article.Tags.map(tag => {
+  componentWillReceiveProps (nextProps) {
+    this.setState({article: nextProps.activeArticle})
+  }
+
+  renderEmpty () {
+    return (
+      <div className='ArticleDetail'>
+        Empty article
+      </div>
+    )
+  }
+
+  renderIdle () {
+    let { status, activeArticle, activeUser } = this.props
+
+    let tags = activeArticle.Tags.length > 0 ? activeArticle.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 folder = findWhere(activeUser.Folders, {id: activeArticle.FolderId})
     let folderName = folder != null ? folder.name : '(unknown)'
 
     return (
@@ -25,9 +55,9 @@ export default class ArticleDetail extends React.Component {
           <div className='left'>
             <div className='info'>
               <i className='fa fa-fw fa-square'/> {folderName}&nbsp;
-              by {article.User.profileName}&nbsp;
+              by {activeArticle.User.profileName}&nbsp;
-              Created {moment(article.createdAt).format('YYYY/MM/DD')}&nbsp;
+              Created {moment(activeArticle.createdAt).format('YYYY/MM/DD')}&nbsp;
-              Updated {moment(article.updatedAt).format('YYYY/MM/DD')}
+              Updated {moment(activeArticle.updatedAt).format('YYYY/MM/DD')}
             </div>
             <div className='tags'><i className='fa fa-fw fa-tags'/>{tags}</div>
           </div>
@@ -41,19 +71,112 @@ export default class ArticleDetail extends React.Component {
         <div className='detailBody'>
           <div className='detailPanel'>
             <div className='header'>
-              <ModeIcon className='mode' mode={article.mode}/>
+              <ModeIcon className='mode' mode={activeArticle.mode}/>
-              <div className='title'>{article.title}</div>
+              <div className='title'>{activeArticle.title}</div>
             </div>
-            {article.mode === 'markdown' ? <MarkdownPreview content={article.content}/> : <CodeEditor readOnly={true} onChange={this.handleContentChange} mode={article.mode} code={article.content}/>}
+            {activeArticle.mode === 'markdown' ? <MarkdownPreview content={activeArticle.content}/> : <CodeEditor readOnly={true} onChange={this.handleContentChange} mode={activeArticle.mode} code={activeArticle.content}/>}
           </div>
         </div>
       </div>
     )
   }
+
+  handleCancelButtonClick (e) {
+    this.props.dispatch(switchMode(IDLE_MODE))
+  }
+
+  handleSaveButtonClick (e) {
+    console.log(this.state.article)
+  }
+
+  handleFolderIdChange (value) {
+    let article = this.state.article
+    article.FolderId = value
+    this.setState({article: article})
+  }
+
+  handleTagsChange (tag, tags) {
+    tags = uniq(tags, function (tag) {
+      return tag.value
+    })
+
+    var article = this.state.article
+    article.Tags = tags.map(function (tag) {
+      return tag.value
+    })
+
+    this.setState({article: article})
+  }
+
+  handleModeChange (value) {
+    let article = this.state.article
+    article.mode = value
+    this.setState({article: article})
+  }
+
+  handleContentChange (e, value) {
+    let article = this.state.article
+    article.content = value
+    this.setState({article: article})
+  }
+
+  renderEdit () {
+    let { status, activeUser } = this.props
+
+    let folderOptions = activeUser.Folders.map(folder => {
+      return {
+        label: folder.name,
+        value: folder.id
+      }
+    })
+
+    return (
+      <div className='ArticleDetail edit'>
+        <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'/>
+          </div>
+          <div className='right'>
+            <button onClick={e => this.handleCancelButtonClick(e)}>Cancel</button>
+            <button onClick={e => this.handleSaveButtonClick(e)} className='primary'>Save</button>
+          </div>
+        </div>
+        <div className='detailBody'>
+          <div className='detailPanel'>
+            <div className='header'>
+              <div className='title'>
+                <input ref='title' valueLink={this.linkState('article.title')}/>
+              </div>
+              <Select ref='mode' onChange={value => this.handleModeChange(value)} clearable={false} options={modeOptions}placeholder='select mode...' value={this.state.article.mode} className='mode'/>
+            </div>
+            <CodeEditor onChange={(e, value) => this.handleContentChange(e, value)} mode={this.state.article.mode} code={this.state.article.content}/>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  render () {
+    let { status, activeArticle } = this.props
+
+    if (activeArticle == null) return this.renderEmpty()
+
+    switch (status.mode) {
+      case CREATE_MODE:
+      case EDIT_MODE:
+        return this.renderEdit()
+      case IDLE_MODE:
+      default:
+        return this.renderIdle()
+
+    }
+  }
 }
 
 ArticleDetail.propTypes = {
-  article: PropTypes.shape(),
   status: PropTypes.shape(),
-  user: PropTypes.shape()
+  activeArticle: PropTypes.shape(),
+  activeUser: PropTypes.shape()
 }
+ArticleDetail.prototype.linkState = linkState

browser/main/HomePage/ArticleList.js

@@ -2,11 +2,11 @@ import React, { PropTypes } from 'react'
 import ProfileImage from 'boost/components/ProfileImage'
 import ModeIcon from 'boost/components/ModeIcon'
 import moment from 'moment'
-import { IDLE_MODE, CREATE_MODE, EDIT_MODE } from '../actions'
+import { IDLE_MODE, CREATE_MODE, EDIT_MODE, NEW } from '../actions'
 
 export default class ArticleList extends React.Component {
   render () {
-    let { articles, status } = this.props
+    let { status, articles, activeArticle } = this.props
 
     let articlesEl = articles.map(article => {
       let tags = Array.isArray(article.Tags) && article.Tags.length > 0 ? article.Tags.map(tag => {
@@ -19,14 +19,14 @@ export default class ArticleList extends React.Component {
 
       return (
         <div key={'article-' + article.id}>
-          <div className={'articleItem' + (false ? ' active' : '')}>
+          <div className={'articleItem' + (activeArticle.id === article.id ? ' 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>
+              <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>
@@ -39,22 +39,6 @@ export default class ArticleList extends React.Component {
 
     return (
       <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>
     )
@@ -62,5 +46,7 @@ export default class ArticleList extends React.Component {
 }
 
 ArticleList.propTypes = {
-  articles: PropTypes.array
+  status: PropTypes.shape(),
+  articles: PropTypes.array,
+  activeArticle: PropTypes.shape()
 }

browser/main/HomePage/ArticleNavigator.js

@@ -1,21 +1,28 @@
 import React, { PropTypes } from 'react'
 import ProfileImage from 'boost/components/ProfileImage'
 import { findWhere } from 'lodash'
+import { switchMode, CREATE_MODE } from '../actions'
 
 export default class ArticleNavigator extends React.Component {
+  handleNewPostButtonClick (e) {
+    let { dispatch } = this.props
+
+    dispatch(switchMode(CREATE_MODE))
+  }
+
   render () {
-    let { user, status } = this.props
+    let { activeUser, status } = this.props
-    if (user == null) return (<div className='ArticleNavigator'/>)
+    if (activeUser == null) return (<div className='ArticleNavigator'/>)
 
-    let activeFolder = findWhere(user.Folders, {id: status.folderId})
+    let activeFolder = findWhere(activeUser.Folders, {id: status.folderId})
 
-    let folders = user.Folders.map(folder => {
+    let folders = activeUser.Folders.map(folder => {
       return (
         <button key={'folder-' + folder.id} className={activeFolder != null && activeFolder.id === folder.id ? 'active' : ''}><i className='fa fa-fw fa-square'/> {folder.name}</button>
       )
     })
 
-    let members = Array.isArray(user.Members) ? user.Members.sort((a, b) => {
+    let members = Array.isArray(activeUser.Members) ? activeUser.Members.sort((a, b) => {
       return new Date(a._pivot_createdAt) - new Date(b._pivot_createdAt)
     }).map(member => {
       return (
@@ -29,13 +36,13 @@ export default class ArticleNavigator extends React.Component {
     return (
       <div className='ArticleNavigator'>
         <div className='userInfo'>
-          <div className='userProfileName'>{user.profileName}</div>
+          <div className='userProfileName'>{activeUser.profileName}</div>
-          <div className='userName'>{user.name}</div>
+          <div className='userName'>{activeUser.name}</div>
           <button className='settingBtn'><i className='fa fa-fw fa-chevron-down'/></button>
         </div>
 
         <div className='controlSection'>
-          <button className='newPostBtn'>New Post</button>
+          <button onClick={e => this.handleNewPostButtonClick(e)} className='newPostBtn'>New Post</button>
         </div>
 
         <div className='folders'>
@@ -49,7 +56,7 @@ export default class ArticleNavigator extends React.Component {
           </div>
         </div>
 
-        {user.userType === 'team' ? (
+        {activeUser.userType === 'team' ? (
           <div className='members'>
             <div className='header'>
               <div className='title'>Members</div>
@@ -67,8 +74,9 @@ export default class ArticleNavigator extends React.Component {
 }
 
 ArticleNavigator.propTypes = {
-  user: PropTypes.object,
+  activeUser: PropTypes.object,
   state: PropTypes.shape({
     folderId: PropTypes.number
-  })
+  }),
+  dispatch: PropTypes.func
 }

browser/main/actions.js

@@ -8,6 +8,10 @@ export const IDLE_MODE = 'IDLE_MODE'
 export const CREATE_MODE = 'CREATE_MODE'
 export const EDIT_MODE = 'EDIT_MODE'
 
+export const NEW = 'NEW'
+export const SYNCING = 'SYNCING'
+export const UNSYNCED = 'UNSYNCED'
+
 export function updateUser (user) {
   return {
     type: USER_UPDATE,

browser/styles/main/HomeContainer/components/ArticleList.styl

@@ -7,11 +7,10 @@ articleItemColor = #777
   left 260px
   width 250px
   border-top 1px solid borderColor
-  border-right 4px solid #E6E6E6
+  border-right 1px solid borderColor
   overflow-y auto
   noSelect()
   &>div
-    border-right 1px solid borderColor
     .articleItem
       border solid 2px transparent
       position relative

lib/ace-modes.js

@@ -1,6 +1,8 @@
 var fs = require('fs')
+var path = require('path')
+var url = path.resolve(process.cwd(), './submodules/ace/src-min')
 
-module.exports = fs.readdirSync(__dirname + '/../browser/ace/src-min')
+module.exports = fs.readdirSync(url)
   .filter(function (file) {
     return file.match(/^mode-/)
   })

lib/components/modal/CreateNewTeam.js

@@ -24,6 +24,7 @@ function getUsers (input, cb) {
 export default class CreateNewTeam extends React.Component {
   constructor (props) {
     super(props)
+
     this.state = {
       create: {
         name: '',
@@ -99,7 +100,7 @@ export default class CreateNewTeam extends React.Component {
       <div className='createTab'>
         <div className='title'>Create new team</div>
 
-        <input valueLink={linkState(this, 'create.name')} className='ipt' type='text' placeholder='Enter your team name'/>
+        <input valueLink={this.linkState('create.name')} className='ipt' type='text' placeholder='Enter your team name'/>
         {alertEl}
         <button onClick={e => this.handleContinueClick(e)} disabled={createState.isSending} className='confirmBtn'>Continue <i className='fa fa-arrow-right fa-fw'/></button>
       </div>
@@ -260,3 +261,4 @@ export default class CreateNewTeam extends React.Component {
 CreateNewTeam.propTypes = {
   close: PropTypes.func
 }
+CreateNewTeam.prototype.linkState = linkState

lib/linkState.js

@@ -1,5 +1,5 @@
 function getIn (object, path) {
-  var stack = path.split('.')
+  let stack = path.split('.')
   while (stack.length > 1) {
     object = object[stack.shift()]
   }
@@ -7,8 +7,8 @@ function getIn (object, path) {
 }
 
 function updateIn (object, path, value) {
-  var current = object
+  let current = object
-  var stack = path.split('.')
+  let stack = path.split('.')
   while (stack.length > 1) {
     current = current[stack.shift()]
   }
@@ -21,7 +21,14 @@ function setPartialState (component, path, value) {
     updateIn(component.state, path, value))
 }
 
-export default function linkState (el, path) {
+export default function linkState (path) {
+  return {
+    value: getIn(this.state, path),
+    requestChange: setPartialState.bind(null, this, path)
+  }
+}
+
+export function linkState2 (el, path) {
   return {
     value: getIn(el.state, path),
     requestChange: setPartialState.bind(null, el, path)