Going LIte

atom-lib/finder-window.js

@@ -1,7 +1,8 @@
 var BrowserWindow = require('browser-window')
+var path = require('path')
 
 var finderWindow = new BrowserWindow({
-  width: 600,
+  width: 640,
   height: 400,
   show: false,
   frame: false,
@@ -15,7 +16,9 @@ var finderWindow = new BrowserWindow({
   'standard-window': false
 })
 
-finderWindow.loadUrl('file://' + __dirname + '/browser/finder/index.html')
+var url = path.resolve(__dirname, '../browser/finder/index.html')
+
+finderWindow.loadUrl('file://' + url)
 
 finderWindow.on('blur', function () {
   finderWindow.hide()

browser/finder/Components/FinderDetail.jsx

@@ -1,42 +0,0 @@
-var React = require('react')
-
-var CodeViewer = require('../../main/Components/CodeViewer')
-
-var MarkdownPreview = require('../../main/Components/MarkdownPreview')
-
-module.exports = React.createClass({
-  propTypes: {
-    currentArticle: React.PropTypes.object
-  },
-  render: function () {
-    var article = this.props.currentArticle
-
-    if (article != null) {
-      if (article.type === 'code') {
-        return (
-          <div className='FinderDetail'>
-            <div className='header'><i className='fa fa-code fa-fw'/> {article.description}</div>
-            <div className='content'>
-              <CodeViewer code={article.content} mode={article.mode}/>
-            </div>
-          </div>
-        )
-      } else if (article.type === 'note') {
-
-        return (
-          <div className='FinderDetail'>
-            <div className='header'><i className='fa fa-file-text-o fa-fw'/> {article.title}</div>
-            <div className='content'>
-              <MarkdownPreview className='marked' content={article.content}/>
-            </div>
-          </div>
-        )
-      }
-    }
-    return (
-      <div className='FinderDetail'>
-        <div className='nothing'>Nothing selected</div>
-      </div>
-    )
-  }
-})

browser/finder/Components/FinderInput.jsx

@@ -1,15 +0,0 @@
-var React = require('react')
-
-module.exports = React.createClass({
-  propTypes: {
-    onChange: React.PropTypes.func,
-    search: React.PropTypes.string
-  },
-  render: function () {
-    return (
-      <div className='FinderInput'>
-        <input value={this.props.search} onChange={this.props.onChange} type='text'/>
-      </div>
-    )
-  }
-})

browser/finder/Components/FinderList.jsx

@@ -1,79 +0,0 @@
-var React = require('react')
-
-module.exports = React.createClass({
-  propTypes: {
-    articles: React.PropTypes.arrayOf,
-    currentArticle: React.PropTypes.shape({
-      id: React.PropTypes.number,
-      type: React.PropTypes.string
-    }),
-    selectArticle: React.PropTypes.func
-  },
-  componentDidUpdate: function () {
-    var index = this.props.articles.indexOf(this.props.currentArticle)
-    var el = React.findDOMNode(this)
-    var li = el.querySelectorAll('li')[index]
-
-    if (li == null) {
-      return
-    }
-
-    var overflowBelow = el.clientHeight + el.scrollTop < li.offsetTop + li.clientHeight
-    if (overflowBelow) {
-      el.scrollTop = li.offsetTop + li.clientHeight - el.clientHeight
-    }
-    var overflowAbove = el.scrollTop > li.offsetTop
-    if (overflowAbove) {
-      el.scrollTop = li.offsetTop
-    }
-  },
-  handleArticleClick: function (article) {
-    return function () {
-      this.props.selectArticle(article)
-    }.bind(this)
-  },
-  render: function () {
-    var list = this.props.articles.map(function (article) {
-      if (article == null) {
-        return (
-          <li className={isActive ? 'active' : ''}>
-            <div className='articleItem'>Undefined</div>
-            <div className='divider'/>
-          </li>
-        )
-      }
-
-      var isActive = this.props.currentArticle != null && (article.type === this.props.currentArticle.type && article.id === this.props.currentArticle.id)
-      if (article.type === 'code') {
-        return (
-          <li onClick={this.handleArticleClick(article)} className={isActive ? 'active' : ''}>
-            <div className='articleItem'><i className='fa fa-code fa-fw'/> {article.description}</div>
-            <div className='divider'/>
-          </li>
-        )
-      }
-      if (article.type === 'note') {
-        return (
-          <li onClick={this.handleArticleClick(article)} className={isActive ? 'active' : ''}>
-            <div className='articleItem'><i className='fa fa-file-text-o fa-fw'/> {article.title}</div>
-            <div className='divider'/>
-          </li>
-        )
-      }
-      return (
-        <li className={isActive ? 'active' : ''}>
-          <div className='articleItem'>Undefined</div>
-          <div className='divider'/>
-        </li>
-      )
-    }.bind(this))
-
-    return (
-      <div className='FinderList'>
-        <ul>
-          {list}
-        </ul>
-      </div>
-    )
-  }
-})

browser/finder/FinderDetail.js

@@ -0,0 +1,34 @@
+import React, { PropTypes } from 'react'
+import CodeEditor from 'boost/components/CodeEditor'
+import MarkdownPreview from 'boost/components/MarkdownPreview'
+import ModeIcon from 'boost/components/ModeIcon'
+
+export default class FinderDetail extends React.Component {
+  render () {
+    let { activeArticle } = this.props
+
+    if (activeArticle != null) {
+      return (
+        <div className='FinderDetail'>
+          <div className='header'>
+          <ModeIcon mode={activeArticle.mode}/> {activeArticle.title}</div>
+          <div className='content'>
+            {activeArticle.mode === 'markdown'
+              ? <MarkdownPreview content={activeArticle.content}/>
+              : <CodeEditor readOnly mode={activeArticle.mode} code={activeArticle.content}/>
+            }
+          </div>
+        </div>
+      )
+    }
+    return (
+      <div className='FinderDetail'>
+        <div className='nothing'>Nothing selected</div>
+      </div>
+    )
+  }
+}
+
+FinderDetail.propTypes = {
+  activeArticle: PropTypes.shape()
+}

browser/finder/FinderInput.js

@@ -0,0 +1,16 @@
+import React, { PropTypes } from 'react'
+
+export default class FinderInput extends React.Component {
+  render () {
+    return (
+      <div className='FinderInput'>
+        <input ref='input' value={this.props.value} onChange={this.props.handleSearchChange} type='text'/>
+      </div>
+    )
+  }
+}
+
+FinderInput.propTypes = {
+  handleSearchChange: PropTypes.func,
+  value: PropTypes.string
+}

browser/finder/FinderList.js

@@ -0,0 +1,71 @@
+import React, { PropTypes } from 'react'
+import ReactDOM from 'react-dom'
+import ModeIcon from 'boost/components/ModeIcon'
+import { selectArticle } from './actions'
+
+export default class FinderList extends React.Component {
+  componentDidUpdate () {
+    var index = this.props.articles.indexOf(this.props.activeArticle)
+    var el = ReactDOM.findDOMNode(this)
+    var li = el.querySelectorAll('li')[index]
+
+    if (li == null) {
+      return
+    }
+
+    var overflowBelow = el.clientHeight + el.scrollTop < li.offsetTop + li.clientHeight
+    if (overflowBelow) {
+      el.scrollTop = li.offsetTop + li.clientHeight - el.clientHeight
+    }
+    var overflowAbove = el.scrollTop > li.offsetTop
+    if (overflowAbove) {
+      el.scrollTop = li.offsetTop
+    }
+  }
+
+  handleArticleClick (article) {
+    return (e) => {
+      let { dispatch } = this.props
+      dispatch(selectArticle(article.key))
+    }
+  }
+
+  render () {
+    let articleElements = this.props.articles.map(function (article) {
+      if (article == null) {
+        return (
+          <li className={isActive ? 'active' : ''}>
+            <div className='articleItem'>Undefined</div>
+            <div className='divider'/>
+          </li>
+        )
+      }
+
+      var isActive = this.props.activeArticle != null && (article.key === this.props.activeArticle.key)
+      return (
+        <li key={'article-' + article.key} onClick={this.handleArticleClick(article)} className={isActive ? 'active' : ''}>
+          <div className='articleItem'>
+            <ModeIcon mode={article.mode}/> {article.title}</div>
+          <div className='divider'/>
+        </li>
+      )
+    }.bind(this))
+
+    return (
+      <div className='FinderList'>
+        <ul>
+          {articleElements}
+        </ul>
+      </div>
+    )
+  }
+}
+
+FinderList.propTypes = {
+  articles: PropTypes.array,
+  activeArticle: PropTypes.shape({
+    type: PropTypes.string,
+    key: PropTypes.string
+  }),
+  dispatch: PropTypes.func
+}

browser/finder/actions.js

@@ -0,0 +1,33 @@
+export const SELECT_ARTICLE = 'SELECT_ARTICLE'
+export const SEARCH_ARTICLE = 'SEARCH_ARTICLE'
+export const REFRESH_DATA = 'REFRESH_DATA'
+
+export function selectArticle (key) {
+  return {
+    type: SELECT_ARTICLE,
+    data: { key }
+  }
+}
+
+export function searchArticle (input) {
+  return {
+    type: SEARCH_ARTICLE,
+    data: { input }
+  }
+}
+
+export function refreshData () {
+  console.log('refreshing data')
+  let data = JSON.parse(localStorage.getItem('local'))
+  if (data == null) return null
+
+  let { folders, articles } = data
+
+  return {
+    type: REFRESH_DATA,
+    data: {
+      articles,
+      folders
+    }
+  }
+}

browser/finder/index.html

@@ -6,8 +6,11 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
 
-  <link rel="stylesheet" href="../../node_modules/font-awesome/css/font-awesome.min.css" media="screen" title="no title" charset="utf-8">
+
+  <link rel="stylesheet" href="../../node_modules/font-awesome/css/font-awesome.min.css" media="screen" charset="utf-8">
+  <link rel="stylesheet" href="../../node_modules/devicon/devicon.min.css">
   <link rel="shortcut icon" href="favicon.ico">
+
   <style>
   @font-face {
     font-family: 'Lato';
@@ -19,21 +22,23 @@
     text-rendering: optimizeLegibility;
   }
   </style>
+</head>
+<body>
+  <div id="content"></div>
+  <script src="../../submodules/ace/src-min/ace.js"></script>
   <script>
     document.addEventListener('mousewheel', function(e) {
       if(e.deltaY % 1 !== 0) {
         e.preventDefault()
       }
     })
-  </script>
+    var scriptUrl = process.env.BOOST_ENV === 'development'
-</head>
+      ? 'http://localhost:8080/assets/finder.js'
-<body>
+      : '../../compiled/finder.js'
-  <div id="content"></div>
+    var scriptEl=document.createElement('script')
-  <script src="../ace/src-min/ace.js"></script>
+    scriptEl.setAttribute("type","text/javascript")
-  <script>
+    scriptEl.setAttribute("src", scriptUrl)
-
+    document.getElementsByTagName("head")[0].appendChild(scriptEl)
-  require("babel-core/register")
-  require('./index.jsx')
   </script>
 </body>
 </html>

browser/finder/index.js

@@ -0,0 +1,183 @@
+import React, { PropTypes } from 'react'
+import ReactDOM from 'react-dom'
+import { connect, Provider } from 'react-redux'
+import reducer from './reducer'
+import { createStore } from 'redux'
+import FinderInput from './FinderInput'
+import FinderList from './FinderList'
+import FinderDetail from './FinderDetail'
+import { selectArticle, searchArticle, refreshData } from './actions'
+import _ from 'lodash'
+
+import remote from 'remote'
+var hideFinder = remote.getGlobal('hideFinder')
+import clipboard from 'clipboard'
+
+require('../styles/finder/index.styl')
+
+const FOLDER_FILTER = 'FOLDER_FILTER'
+const TEXT_FILTER = 'TEXT_FILTER'
+const TAG_FILTER = 'TAG_FILTER'
+
+class FinderMain extends React.Component {
+  constructor (props) {
+    super(props)
+  }
+
+  componentDidMount () {
+    ReactDOM.findDOMNode(this.refs.finderInput.refs.input).focus()
+  }
+
+  handleClick (e) {
+    ReactDOM.findDOMNode(this.refs.finderInput.refs.input).focus()
+  }
+
+  handleKeyDown (e) {
+    if (e.keyCode === 38) {
+      this.selectPrevious()
+      e.preventDefault()
+    }
+
+    if (e.keyCode === 40) {
+      this.selectNext()
+      e.preventDefault()
+    }
+
+    if (e.keyCode === 13) {
+      let { activeArticle } = this.props
+      clipboard.writeText(activeArticle.content)
+      hideFinder()
+      e.preventDefault()
+    }
+    if (e.keyCode === 27) {
+      hideFinder()
+      e.preventDefault()
+    }
+  }
+
+  handleSearchChange (e) {
+    let { dispatch } = this.props
+
+    dispatch(searchArticle(e.target.value))
+  }
+
+  selectArticle (article) {
+    this.setState({currentArticle: article})
+  }
+
+  selectPrevious () {
+    let { activeArticle, dispatch } = this.props
+    let index = this.refs.finderList.props.articles.indexOf(activeArticle)
+    let previousArticle = this.refs.finderList.props.articles[index - 1]
+    if (previousArticle != null) dispatch(selectArticle(previousArticle.key))
+  }
+
+  selectNext () {
+    let { activeArticle, dispatch } = this.props
+    let index = this.refs.finderList.props.articles.indexOf(activeArticle)
+    let previousArticle = this.refs.finderList.props.articles[index + 1]
+    if (previousArticle != null) dispatch(selectArticle(previousArticle.key))
+  }
+
+  render () {
+    let { articles, activeArticle, status, dispatch } = this.props
+    return (
+      <div onClick={e => this.handleClick(e)} onKeyDown={e => this.handleKeyDown(e)} className='Finder'>
+        <FinderInput
+          handleSearchChange={e => this.handleSearchChange(e)}
+          ref='finderInput'
+          onChange={this.handleChange}
+          value={status.search}
+        />
+        <FinderList
+          ref='finderList'
+          activeArticle={activeArticle}
+          articles={articles}
+          dispatch={dispatch}
+          selectArticle={article => this.selectArticle(article)}
+        />
+        <FinderDetail activeArticle={activeArticle}/>
+      </div>
+    )
+  }
+}
+
+FinderMain.propTypes = {
+  articles: PropTypes.array,
+  activeArticle: PropTypes.shape({
+    key: PropTypes.string,
+    tags: PropTypes.array,
+    title: PropTypes.string,
+    content: PropTypes.string
+  }),
+  status: PropTypes.shape(),
+  dispatch: PropTypes.func
+}
+
+function remap (state) {
+  let { articles, folders, status } = state
+
+  let filters = status.search.split(' ').map(key => key.trim()).filter(key => key.length > 0 && !key.match(/^#$/)).map(key => {
+    if (key.match(/^in:.+$/)) {
+      return {type: FOLDER_FILTER, value: key.match(/^in:(.+)$/)[1]}
+    }
+    if (key.match(/^#(.+)/)) {
+      return {type: TAG_FILTER, value: key.match(/^#(.+)$/)[1]}
+    }
+    return {type: TEXT_FILTER, value: key}
+  })
+  let folderFilters = filters.filter(filter => filter.type === FOLDER_FILTER)
+  let textFilters = filters.filter(filter => filter.type === TEXT_FILTER)
+  let tagFilters = filters.filter(filter => filter.type === TAG_FILTER)
+
+  if (folders != null) {
+    let targetFolders = folders.filter(folder => {
+      return _.findWhere(folderFilters, {value: folder.name})
+    })
+    status.targetFolders = targetFolders
+
+    if (targetFolders.length > 0) {
+      articles = articles.filter(article => {
+        return _.findWhere(targetFolders, {key: article.FolderKey})
+      })
+    }
+
+    if (textFilters.length > 0) {
+      articles = textFilters.reduce((articles, textFilter) => {
+        return articles.filter(article => {
+          return article.title.match(new RegExp(textFilter.value, 'i')) || article.content.match(new RegExp(textFilter.value, 'i'))
+        })
+      }, articles)
+    }
+
+    if (tagFilters.length > 0) {
+      articles = tagFilters.reduce((articles, tagFilter) => {
+        return articles.filter(article => {
+          return _.find(article.tags, tag => tag.match(new RegExp(tagFilter.value, 'i')))
+        })
+      }, articles)
+    }
+  }
+
+  let activeArticle = _.findWhere(articles, {key: status.articleKey})
+  if (activeArticle == null) activeArticle = articles[0]
+
+  return {
+    articles,
+    activeArticle,
+    status
+  }
+}
+
+var Finder = connect(remap)(FinderMain)
+var store = createStore(reducer)
+
+window.onfocus = e => {
+  store.dispatch(refreshData())
+}
+
+ReactDOM.render((
+  <Provider store={store}>
+    <Finder/>
+  </Provider>
+), document.getElementById('content'))

browser/finder/index.jsx

@@ -1,135 +0,0 @@
-/* global localStorage */
-var remote = require('remote')
-var hideFinder = remote.getGlobal('hideFinder')
-var clipboard = require('clipboard')
-
-var React = require('react')
-
-var ArticleFilter = require('../main/Mixins/ArticleFilter')
-
-var FinderInput = require('./Components/FinderInput')
-var FinderList = require('./Components/FinderList')
-var FinderDetail = require('./Components/FinderDetail')
-
-// Filter end
-
-function fetchArticles () {
-  var user = JSON.parse(localStorage.getItem('currentUser'))
-  if (user == null) {
-    console.log('need to login')
-    return []
-  }
-
-  var articles = []
-  user.Planets.forEach(function (planet) {
-    var _planet = JSON.parse(localStorage.getItem('planet-' + planet.id))
-    articles = articles.concat(_planet.Codes, _planet.Notes)
-  })
-  user.Teams.forEach(function (team) {
-    team.Planets.forEach(function (planet) {
-      var _planet = JSON.parse(localStorage.getItem('planet-' + planet.id))
-      articles = articles.concat(_planet.Codes, _planet.Notes)
-    })
-  })
-
-  return articles
-}
-
-var Finder = React.createClass({
-  mixins: [ArticleFilter],
-  getInitialState: function () {
-    var articles = fetchArticles()
-    return {
-      articles: articles,
-      currentArticle: articles[0],
-      search: ''
-    }
-  },
-  componentDidMount: function () {
-    document.addEventListener('keydown', this.handleKeyDown)
-    document.addEventListener('click', this.handleClick)
-    window.addEventListener('focus', this.handleFinderFocus)
-    this.handleFinderFocus()
-  },
-  componentWillUnmount: function () {
-    document.removeEventListener('keydown', this.handleKeyDown)
-    document.removeEventListener('click', this.handleClick)
-    window.removeEventListener('focus', this.handleFinderFocus)
-  },
-  handleFinderFocus: function () {
-    console.log('focusseeddddd')
-    this.focusInput()
-    var articles = fetchArticles()
-    this.setState({
-      articles: articles,
-      search: ''
-    }, function () {
-      var firstArticle = this.refs.finderList.props.articles[0]
-      if (firstArticle) {
-        this.setState({
-          currentArticle: firstArticle
-        })
-      }
-    })
-  },
-  handleKeyDown: function (e) {
-    if (e.keyCode === 38) {
-      this.selectPrevious()
-      e.preventDefault()
-    }
-
-    if (e.keyCode === 40) {
-      this.selectNext()
-      e.preventDefault()
-    }
-
-    if (e.keyCode === 13) {
-      var article = this.state.currentArticle
-      clipboard.writeText(article.content)
-      hideFinder()
-      e.preventDefault()
-    }
-    if (e.keyCode === 27) {
-      hideFinder()
-      e.preventDefault()
-    }
-  },
-  focusInput: function () {
-    React.findDOMNode(this.refs.finderInput).querySelector('input').focus()
-  },
-  handleClick: function () {
-    this.focusInput()
-  },
-  selectPrevious: function () {
-    var index = this.refs.finderList.props.articles.indexOf(this.state.currentArticle)
-    if (index > 0) {
-      this.setState({currentArticle: this.refs.finderList.props.articles[index - 1]})
-    }
-  },
-  selectNext: function () {
-    var index = this.refs.finderList.props.articles.indexOf(this.state.currentArticle)
-    if (index > -1 && index < this.refs.finderList.props.articles.length - 1) {
-      this.setState({currentArticle: this.refs.finderList.props.articles[index + 1]})
-    }
-  },
-  selectArticle: function (article) {
-    this.setState({currentArticle: article})
-  },
-  handleChange: function (e) {
-    this.setState({search: e.target.value}, function () {
-      this.setState({currentArticle: this.refs.finderList.props.articles[0]})
-    })
-  },
-  render: function () {
-    var articles = this.searchArticle(this.state.search, this.state.articles)
-    return (
-      <div className='Finder'>
-        <FinderInput ref='finderInput' onChange={this.handleChange} search={this.state.search}/>
-        <FinderList ref='finderList' currentArticle={this.state.currentArticle} articles={articles} selectArticle={this.selectArticle}/>
-        <FinderDetail currentArticle={this.state.currentArticle}/>
-      </div>
-    )
-  }
-})
-
-React.render(<Finder/>, document.getElementById('content'))

browser/finder/reducer.js

@@ -0,0 +1,49 @@
+import { combineReducers } from 'redux'
+import { SELECT_ARTICLE, SEARCH_ARTICLE, REFRESH_DATA } from './actions'
+
+let data = JSON.parse(localStorage.getItem('local'))
+
+let initialArticles = data != null ? data.articles : []
+let initialFolders = data != null ? data.folders : []
+let initialStatus = {
+  articleKey: null,
+  search: ''
+}
+
+function status (state = initialStatus, action) {
+  switch (action.type) {
+    case SELECT_ARTICLE:
+      state.articleKey = action.data.key
+      return state
+    case SEARCH_ARTICLE:
+      state.search = action.data.input
+      return state
+    default:
+      return state
+  }
+}
+
+function articles (state = initialArticles, action) {
+  switch (action.type) {
+    case REFRESH_DATA:
+      return action.data.articles
+    default:
+      return state
+  }
+}
+
+function folders (state = initialFolders, action) {
+  switch (action.type) {
+    case REFRESH_DATA:
+      console.log(action)
+      return action.data.folders
+    default:
+      return state
+  }
+}
+
+export default combineReducers({
+  status,
+  folders,
+  articles
+})

browser/main/HomePage.js

@@ -1,65 +1,43 @@
 import React, { PropTypes} from 'react'
 import { connect } from 'react-redux'
-import { CREATE_MODE, IDLE_MODE, switchUser, NEW, refreshArticles } from 'boost/actions'
+import { CREATE_MODE, IDLE_MODE, NEW } from 'boost/actions'
-import UserNavigator from './HomePage/UserNavigator'
+// 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, findIndex, pick } from 'lodash'
+import _ from 'lodash'
 import keygen from 'boost/keygen'
-import api from 'boost/api'
-import auth from 'boost/auth'
-import io from 'boost/socket'
 
 const TEXT_FILTER = 'TEXT_FILTER'
 const FOLDER_FILTER = 'FOLDER_FILTER'
 const TAG_FILTER = 'TAG_FILTER'
 
 class HomePage extends React.Component {
-  componentDidMount () {
-    const { dispatch } = this.props
-
-    dispatch(switchUser(this.props.params.userId))
-
-    let currentUser = auth.user()
-
-    let users = currentUser.Teams != null ? [currentUser].concat(currentUser.Teams) : [currentUser]
-    users.forEach(user => {
-      api.fetchArticles(user.id)
-        .then(res => {
-          dispatch(refreshArticles(user.id, res.body))
-        })
-        .catch(err => {
-          if (err.status == null) throw err
-          console.error(err)
-        })
-    })
-
-    let token = auth.token()
-    if (token != null) {
-      io.emit('JOIN', {token})
-    }
-  }
-
-  componentWillReceiveProps (nextProps) {
-    const { dispatch, status } = this.props
-
-    if (nextProps.params.userId !== status.userId) {
-      dispatch(switchUser(nextProps.params.userId))
-    }
-  }
-
   render () {
-    const { dispatch, status, users, activeUser, articles, activeArticle } = this.props
+    let { dispatch, status, articles, activeArticle, folders } = this.props
 
     return (
       <div className='HomePage'>
-        <UserNavigator users={users} />
+        <ArticleNavigator
-        <ArticleNavigator dispatch={dispatch} activeUser={activeUser} status={status}/>
+          dispatch={dispatch}
+          folders={folders}
+          status={status}
+        />
         <ArticleTopBar dispatch={dispatch} status={status}/>
-        <ArticleList dispatch={dispatch} articles={articles} status={status} activeArticle={activeArticle}/>
+        <ArticleList
-        <ArticleDetail dispatch={dispatch} activeUser={activeUser} activeArticle={activeArticle} status={status}/>
+          dispatch={dispatch}
+          folders={folders}
+          articles={articles}
+          status={status}
+          activeArticle={activeArticle}
+        />
+        <ArticleDetail
+          dispatch={dispatch}
+          activeArticle={activeArticle}
+          folders={folders}
+          status={status}
+        />
       </div>
     )
   }
@@ -67,17 +45,9 @@ class HomePage extends React.Component {
 
 function remap (state) {
   let status = state.status
-
-  let currentUser = state.currentUser
-  if (currentUser == null) return state
-  let teams = Array.isArray(currentUser.Teams) ? currentUser.Teams : []
-
-  let users = [currentUser, ...teams]
-  let activeUser = findWhere(users, {id: parseInt(status.userId, 10)})
-  if (activeUser == null) activeUser = users[0]
-
   // Fetch articles
-  let articles = state.articles['team-' + activeUser.id]
+  let data = JSON.parse(localStorage.getItem('local'))
+  let { folders, articles } = data
   if (articles == null) articles = []
   articles.sort((a, b) => {
     return new Date(b.updatedAt) - new Date(a.updatedAt)
@@ -97,17 +67,18 @@ function remap (state) {
   let textFilters = filters.filter(filter => filter.type === TEXT_FILTER)
   let tagFilters = filters.filter(filter => filter.type === TAG_FILTER)
 
-  if (activeUser.Folders != null) {
+  if (folders != null) {
-    let targetFolders = activeUser.Folders.filter(folder => {
+    let targetFolders = folders.filter(folder => {
-      return findWhere(folderFilters, {value: folder.name})
+      return _.findWhere(folderFilters, {value: folder.name})
     })
     status.targetFolders = targetFolders
 
     if (targetFolders.length > 0) {
       articles = articles.filter(article => {
-        return findWhere(targetFolders, {id: article.FolderId})
+        return _.findWhere(targetFolders, {key: article.FolderKey})
       })
     }
+
     if (textFilters.length > 0) {
       articles = textFilters.reduce((articles, textFilter) => {
         return articles.filter(article => {
@@ -119,19 +90,19 @@ function remap (state) {
     if (tagFilters.length > 0) {
       articles = tagFilters.reduce((articles, tagFilter) => {
         return articles.filter(article => {
-          return _.find(article.Tags, tag => tag.name.match(new RegExp(tagFilter.value, 'i')))
+          return _.find(article.tags, tag => tag.match(new RegExp(tagFilter.value, 'i')))
         })
       }, articles)
     }
   }
 
   // Grab active article
-  let activeArticle = findWhere(articles, {key: status.articleKey})
+  let activeArticle = _.findWhere(articles, {key: status.articleKey})
   if (activeArticle == null) activeArticle = articles[0]
 
   // remove Unsaved new article if user is not CREATE_MODE
   if (status.mode !== CREATE_MODE) {
-    let targetIndex = findIndex(articles, article => article.status === NEW)
+    let targetIndex = _.findIndex(articles, article => article.status === NEW)
 
     if (targetIndex >= 0) articles.splice(targetIndex, 1)
   }
@@ -140,8 +111,8 @@ function remap (state) {
   // restrict
   // 1. team have one folder at least
   // or Change IDLE MODE
-  if (status.mode === CREATE_MODE && activeUser.Folders.length > 0) {
+  if (status.mode === CREATE_MODE) {
-    var newArticle = findWhere(articles, {status: 'NEW'})
+    var newArticle = _.findWhere(articles, {status: 'NEW'})
     if (newArticle == null) {
       newArticle = {
         id: null,
@@ -149,9 +120,8 @@ function remap (state) {
         title: '',
         content: '',
         mode: 'markdown',
-        Tags: [],
+        tags: [],
-        User: pick(currentUser, ['email', 'name', 'profileName']),
+        FolderKey: folders[0].key,
-        FolderId: activeUser.Folders[0].id,
         status: NEW
       }
       articles.unshift(newArticle)
@@ -162,8 +132,7 @@ function remap (state) {
   }
 
   let props = {
-    users,
+    folders,
-    activeUser,
     status,
     articles,
     activeArticle
@@ -173,8 +142,6 @@ function remap (state) {
 }
 
 HomePage.propTypes = {
-  users: PropTypes.array,
-  activeUser: PropTypes.object,
   params: PropTypes.shape({
     userId: PropTypes.string
   }),
@@ -183,7 +150,8 @@ HomePage.propTypes = {
   }),
   articles: PropTypes.array,
   activeArticle: PropTypes.shape(),
-  dispatch: PropTypes.func
+  dispatch: PropTypes.func,
+  folders: PropTypes.array
 }
 
 export default connect(remap)(HomePage)

browser/main/HomePage/ArticleDetail.js

@@ -1,16 +1,16 @@
 import React, { PropTypes } from 'react'
 import moment from 'moment'
-import { findWhere, uniq } from 'lodash'
+import _ from 'lodash'
 import ModeIcon from 'boost/components/ModeIcon'
 import MarkdownPreview from 'boost/components/MarkdownPreview'
 import CodeEditor from 'boost/components/CodeEditor'
-import { UNSYNCED, IDLE_MODE, CREATE_MODE, EDIT_MODE, switchMode, switchArticle, updateArticle, destroyArticle } from 'boost/actions'
+import { IDLE_MODE, CREATE_MODE, EDIT_MODE, switchMode, updateArticle, destroyArticle } from 'boost/actions'
 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'
 import TagLink from 'boost/components/TagLink'
+import TagSelect from 'boost/components/TagSelect'
 
 var modeOptions = aceModes.map(function (mode) {
   return {
@@ -20,9 +20,7 @@ var modeOptions = aceModes.map(function (mode) {
 })
 
 function makeInstantArticle (article) {
-  let instantArticle = Object.assign({}, article)
+  return Object.assign({}, article)
-  instantArticle.Tags = Array.isArray(instantArticle.Tags) ? instantArticle.Tags.map(tag => tag.name) : []
-  return instantArticle
 }
 
 export default class ArticleDetail extends React.Component {
@@ -35,7 +33,7 @@ export default class ArticleDetail extends React.Component {
   }
 
   componentWillReceiveProps (nextProps) {
-    if (nextProps.activeArticle != null && nextProps.activeArticle.id !== this.state.article.id) {
+    if (nextProps.activeArticle != null && (nextProps.activeArticle.key !== this.state.article.key) || (nextProps.status.mode !== this.props.status.mode)) {
       this.setState({article: makeInstantArticle(nextProps.activeArticle)}, function () {
         console.log('receive props')
       })
@@ -44,8 +42,8 @@ export default class ArticleDetail extends React.Component {
 
   renderEmpty () {
     return (
-      <div className='ArticleDetail'>
+      <div className='ArticleDetail empty'>
-        Empty article
+        Command(⌘) + Enter to create a new post
       </div>
     )
   }
@@ -60,23 +58,9 @@ export default class ArticleDetail extends React.Component {
   }
 
   handleDeleteConfirmButtonClick (e) {
-    let { dispatch, activeUser, activeArticle } = this.props
+    let { dispatch, activeArticle } = this.props
 
-    api.destroyArticle(activeArticle.id)
+    dispatch(destroyArticle(activeArticle.key))
-      .then(res => {
-        console.log(res.body)
-      })
-      .catch(err => {
-        // connect failed need to queue data
-        if (err.code === 'ECONNREFUSED') {
-          return
-        }
-
-        if (err.status != null) throw err
-        else console.log(err)
-      })
-
-    dispatch(destroyArticle(activeUser.id, activeArticle.id))
     this.setState({openDeleteConfirmMenu: false})
   }
 
@@ -85,17 +69,16 @@ export default class ArticleDetail extends React.Component {
   }
 
   renderIdle () {
-    let { activeArticle, activeUser } = this.props
+    let { activeArticle, folders } = this.props
 
-    let tags = activeArticle.Tags.length > 0
+    let tags = activeArticle.tags != null ? activeArticle.tags.length > 0
-      ? activeArticle.Tags.map(tag => {
+      ? activeArticle.tags.map(tag => {
-        return (<TagLink key={tag.name} tag={tag}/>)
+        return (<TagLink key={tag} tag={tag}/>)
       })
       : (
         <span className='noTags'>Not tagged yet</span>
-      )
+      ) : null
-    let folder = findWhere(activeUser.Folders, {id: activeArticle.FolderId})
+    let folder = _.findWhere(folders, {key: activeArticle.FolderKey})
-    let folderName = folder != null ? folder.name : '(unknown)'
 
     return (
       <div className='ArticleDetail idle'>
@@ -117,8 +100,7 @@ export default class ArticleDetail extends React.Component {
             <div className='detailInfo'>
               <div className='left'>
                 <div className='info'>
-                  <FolderMark id={folder.id}/> {folderName}&nbsp;
+                  <FolderMark color={folder.color}/> {folder.name}&nbsp;
-                  by {activeArticle.User.profileName}&nbsp;
                   Created {moment(activeArticle.createdAt).format('YYYY/MM/DD')}&nbsp;
                   Updated {moment(activeArticle.updatedAt).format('YYYY/MM/DD')}
                 </div>
@@ -127,7 +109,6 @@ export default class ArticleDetail extends React.Component {
               <div className='right'>
                 <button onClick={e => this.handleEditButtonClick(e)}><i className='fa fa-fw fa-edit'/></button>
                 <button onClick={e => this.handleDeleteButtonClick(e)}><i className='fa fa-fw fa-trash'/></button>
-                <button><i className='fa fa-fw fa-share-alt'/></button>
               </div>
             </div>
           )
@@ -141,7 +122,7 @@ export default class ArticleDetail extends React.Component {
             </div>
             {activeArticle.mode === 'markdown'
               ? <MarkdownPreview content={activeArticle.content}/>
-              : <CodeEditor readOnly onChange={this.handleContentChange} mode={activeArticle.mode} code={activeArticle.content}/>
+              : <CodeEditor readOnly onChange={(e, value) => this.handleContentChange(e, value)} mode={activeArticle.mode} code={activeArticle.content}/>
             }
           </div>
         </div>
@@ -154,86 +135,30 @@ export default class ArticleDetail extends React.Component {
   }
 
   handleSaveButtonClick (e) {
-    let { activeArticle } = this.props
+    let { dispatch, folders } = this.props
-
-    if (activeArticle.id == null) this.saveAsNew()
-    else this.save()
-  }
-
-  saveAsNew () {
-    let { dispatch, activeUser } = this.props
-    let article = this.state.article
-    let newArticle = Object.assign({}, article)
-    article.tags = article.Tags
-
-    api.createArticle(article)
-      .then(res => {
-        console.log('saved as new')
-        console.log(res.body)
-      })
-      .catch(err => {
-        // connect failed need to queue data
-        if (err.code === 'ECONNREFUSED') {
-          return
-        }
-
-        if (err.status != null) throw err
-        else console.log(err)
-      })
-
-    newArticle.status = UNSYNCED
-    newArticle.Tags = newArticle.Tags.map(tag => { return {name: tag} })
-
-    dispatch(updateArticle(activeUser.id, newArticle))
-    dispatch(switchMode(IDLE_MODE))
-    dispatch(switchArticle(article.id))
-  }
-
-  save () {
-    let { dispatch, activeUser } = this.props
     let article = this.state.article
     let newArticle = Object.assign({}, article)
 
-    article.tags = article.Tags
+    let folder = _.findWhere(folders, {key: article.FolderKey})
+    if (folder == null) return false
 
-    api.saveArticle(article)
+    delete newArticle.status
-      .then(res => {
+    newArticle.updatedAt = new Date()
-        console.log('saved')
-        console.log(res.body)
-      })
-      .catch(err => {
-        // connect failed need to queue data
-        if (err.code === 'ECONNREFUSED') {
-          return
-        }
 
-        if (err.status != null) throw err
+    dispatch(updateArticle(newArticle))
-        else console.log(err)
-      })
-
-    newArticle.status = UNSYNCED
-    newArticle.Tags = newArticle.Tags.map(tag => { return {name: tag} })
-
-    dispatch(updateArticle(activeUser.id, newArticle))
     dispatch(switchMode(IDLE_MODE))
-    dispatch(switchArticle(article.id))
   }
 
-  handleFolderIdChange (value) {
+  handleFolderKeyChange (e) {
     let article = this.state.article
-    article.FolderId = value
+    article.FolderKey = e.target.value
+
     this.setState({article: article})
   }
 
-  handleTagsChange (tag, tags) {
+  handleTagsChange (newTag, tags) {
-    tags = uniq(tags, function (tag) {
+    let article = this.state.article
-      return tag.value
+    article.tags = tags
-    })
-
-    var article = this.state.article
-    article.Tags = tags.map(function (tag) {
-      return tag.value
-    })
 
     this.setState({article: article})
   }
@@ -251,21 +176,31 @@ export default class ArticleDetail extends React.Component {
   }
 
   renderEdit () {
-    let { activeUser } = this.props
+    let { folders } = this.props
 
-    let folderOptions = activeUser.Folders.map(folder => {
+    let folderOptions = folders.map(folder => {
-      return {
+      return (
-        label: folder.name,
+        <option key={folder.key} value={folder.key}>{folder.name}</option>
-        value: folder.id
+      )
-      }
     })
+    console.log('edit rendered')
 
     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
-            <Select onChange={(tag, tags) => this.handleTagsChange(tag, tags)} clearable={false} multi placeholder='add some tags...' allowCreate value={this.state.article.Tags} className='tags'/>
+              className='folder'
+              value={this.state.article.FolderKey}
+              onChange={e => this.handleFolderKeyChange(e)}
+            >
+              {folderOptions}
+            </select>
+
+            <TagSelect
+              tags={this.state.article.tags}
+              onChange={(tags, tag) => this.handleTagsChange(tags, tag)}
+            />
           </div>
           <div className='right'>
             <button onClick={e => this.handleCancelButtonClick(e)}>Cancel</button>
@@ -278,9 +213,22 @@ export default class ArticleDetail extends React.Component {
               <div className='title'>
                 <input placeholder='Title' 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'/>
+              <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}/>
+            <CodeEditor
+              onChange={(e, value) => this.handleContentChange(e, value)}
+              readOnly={false}
+              mode={this.state.article.mode}
+              code={this.state.article.content}
+            />
           </div>
         </div>
       </div>

browser/main/HomePage/ArticleList.js

@@ -1,42 +1,54 @@
 import React, { PropTypes } from 'react'
-import ProfileImage from 'boost/components/ProfileImage'
 import ModeIcon from 'boost/components/ModeIcon'
 import moment from 'moment'
 import { switchArticle, NEW } from 'boost/actions'
 import FolderMark from 'boost/components/FolderMark'
 import TagLink from 'boost/components/TagLink'
+import _ from 'lodash'
 
 export default class ArticleList extends React.Component {
-  handleArticleClick (key) {
+  componentDidMount () {
+    this.refreshTimer = setInterval(() => this.forceUpdate(), 60 * 1000)
+  }
+
+  componentWillUnmount () {
+    clearInterval(this.refreshTimer)
+  }
+
+  handleArticleClick (article) {
     let { dispatch } = this.props
     return function (e) {
-      dispatch(switchArticle(key))
+      if (article.status === NEW) return null
+      dispatch(switchArticle(article.key))
     }
   }
 
   render () {
-    let { articles, activeArticle } = this.props
+    let { articles, activeArticle, folders } = this.props
 
-    let articlesEl = articles.map(article => {
+    let articleElements = articles.map(article => {
-      let tags = Array.isArray(article.Tags) && article.Tags.length > 0
+      let tagElements = Array.isArray(article.tags) && article.tags.length > 0
-        ? article.Tags.map(tag => {
+        ? article.tags.map(tag => {
-          return (<TagLink key={tag.name} tag={tag}/>)
+          return (<TagLink key={tag} tag={tag}/>)
         })
         : (<span>Not tagged yet</span>)
+      let folder = _.findWhere(folders, {key: article.FolderKey})
 
       return (
         <div key={'article-' + article.key}>
-          <div onClick={e => this.handleArticleClick(article.key)(e)} className={'articleItem' + (activeArticle.key === article.key ? ' active' : '')}>
+          <div onClick={e => this.handleArticleClick(article)(e)} className={'articleItem' + (activeArticle.key === article.key ? ' active' : '')}>
             <div className='top'>
-              <FolderMark id={article.FolderId}/>
+              {folder != null
-              by <ProfileImage className='profileImage' size='20' email={article.User.email}/> {article.User.profileName}
+                ? <span><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>
             </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 className='tags'><i className='fa fa-fw fa-tags'/>{tagElements}</div>
             </div>
           </div>
           <div className='divider'></div>
@@ -46,13 +58,14 @@ export default class ArticleList extends React.Component {
 
     return (
       <div className='ArticleList'>
-        {articlesEl}
+        {articleElements}
       </div>
     )
   }
 }
 
 ArticleList.propTypes = {
+  folders: PropTypes.array,
   articles: PropTypes.array,
   activeArticle: PropTypes.shape(),
   dispatch: PropTypes.func

browser/main/HomePage/ArticleNavigator.js

@@ -36,38 +36,25 @@ export default class ArticleNavigator extends React.Component {
   }
 
   render () {
-    let { activeUser, status } = this.props
+    let { status, folders } = this.props
-    if (activeUser == null) return (<div className='ArticleNavigator'/>)
     let { targetFolders } = status
     if (targetFolders == null) targetFolders = []
 
-    let folders = activeUser.Folders != null
+    let folderElememts = folders.map((folder, index) => {
-      ? activeUser.Folders.map((folder, index) => {
+      let isActive = findWhere(targetFolders, {key: folder.key})
-        let isActive = findWhere(targetFolders, {id: folder.id})
 
       return (
-          <button onClick={e => this.handleFolderButtonClick(folder.name)(e)} key={'folder-' + folder.id} className={isActive ? 'active' : ''}>
+        <button onClick={e => this.handleFolderButtonClick(folder.name)(e)} key={'folder-' + folder.key} className={isActive ? 'active' : ''}>
-          <FolderMark id={folder.id}/> {folder.name} {folder.public ? null : <i className='fa fa-fw fa-lock'/>}</button>
+          <FolderMark color={folder.color}/> {folder.name}
+        </button>
       )
     })
-      : []
-
-    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 (
-        <div key={'member-' + member.id}>
-          <ProfileImage className='memberImage' email={member.email} size='22'/>
-          <div className='memberProfileName'>{member.profileName}</div>
-        </div>
-      )
-    }) : null
 
     return (
       <div className='ArticleNavigator'>
         <div className='userInfo'>
-          <div className='userProfileName'>{activeUser.profileName}</div>
+          <div className='userProfileName'>{process.env.USER}</div>
-          <div className='userName'>{activeUser.name}</div>
+          <div className='userName'>local</div>
           <button onClick={e => this.handlePreferencesButtonClick(e)} className='settingBtn'><i className='fa fa-fw fa-chevron-down'/></button>
         </div>
 
@@ -82,22 +69,9 @@ export default class ArticleNavigator extends React.Component {
           </div>
           <div className='folderList'>
             <button onClick={e => this.handleAllFoldersButtonClick(e)} className={targetFolders.length === 0 ? 'active' : ''}>All folders</button>
-            {folders}
+            {folderElememts}
           </div>
         </div>
-
-        {activeUser.userType === 'team' ? (
-          <div className='members'>
-            <div className='header'>
-              <div className='title'>Members</div>
-              <button className='addBtn'><i className='fa fa-fw fa-plus'/></button>
-            </div>
-            <div className='memberList'>
-              {members}
-            </div>
-          </div>
-        ) : null}
-
       </div>
     )
   }
@@ -105,6 +79,7 @@ export default class ArticleNavigator extends React.Component {
 
 ArticleNavigator.propTypes = {
   activeUser: PropTypes.object,
+  folders: PropTypes.array,
   status: PropTypes.shape({
     folderId: PropTypes.number
   }),

browser/main/HomePage/ArticleTopBar.js

@@ -17,11 +17,9 @@ export default class ArticleTopBar extends React.Component {
             <i className='fa fa-search fa-fw' />
             <input value={this.props.status.search} onChange={e => this.handleSearchChange(e)} placeholder='Search' type='text'/>
           </div>
-          <button className='refreshBtn'><i className='fa fa-fw fa-refresh'/></button>
         </div>
         <div className='right'>
           <button>?</button>
-          <button>i</button>
           <ExternalLink className='logo' href='http://b00st.io'>
             <img src='../../resources/favicon-230x230.png' width='44' height='44'/>
           </ExternalLink>

browser/main/index.html

@@ -6,7 +6,6 @@
 
   <link rel="stylesheet" href="../../node_modules/font-awesome/css/font-awesome.min.css" media="screen" charset="utf-8">
   <link rel="stylesheet" href="../../node_modules/devicon/devicon.min.css">
-  <!-- <link rel="stylesheet" href="../styles/main/index.css" media="screen" charset="utf-8"> -->
   <link rel="shortcut icon" href="favicon.ico">
 
   <style>
@@ -53,7 +52,7 @@
   <div id="content"></div>
 
   <script src="../../submodules/ace/src-min/ace.js"></script>
-  <script>
+  <script type='text/javascript'>
     var version = require('remote').require('app').getVersion()
     document.title = 'Boost' + ((version == null || version.length === 0) ? ' DEV' : '')
     document.addEventListener('mousewheel', function(e) {
@@ -62,7 +61,7 @@
       }
     })
     var scriptUrl = process.env.BOOST_ENV === 'development'
-      ? 'http://localhost:8080/assets/bundle.js'
+      ? 'http://localhost:8080/assets/main.js'
       : '../../compiled/main.js'
     var scriptEl=document.createElement('script')
     scriptEl.setAttribute("type","text/javascript")

browser/main/index.js

@@ -1,29 +1,23 @@
 import React from 'react'
 import { Provider } from 'react-redux'
-import { updateUser } from 'boost/actions'
+// import { updateUser } from 'boost/actions'
-import { fetchCurrentUser } from 'boost/api'
 import { Router, Route, IndexRoute } from 'react-router'
 import MainPage from './MainPage'
-import LoginPage from './LoginPage'
-import SignupPage from './SignupPage'
 import HomePage from './HomePage'
-import auth from 'boost/auth'
+// import auth from 'boost/auth'
-import store, { devToolElement } from 'boost/store'
+import store from 'boost/store'
 let ReactDOM = require('react-dom')
 require('../styles/main/index.styl')
 
 function onlyUser (state, replaceState) {
-  let currentUser = auth.user()
+  // let currentUser = auth.user()
-  if (currentUser == null) return replaceState('login', '/login')
+  // if (currentUser == null) return replaceState('login', '/login')
-  if (state.location.pathname === '/') return replaceState('user', '/users/' + currentUser.id)
+  // if (state.location.pathname === '/') return replaceState('user', '/users/' + currentUser.id)
 }
 
 let routes = (
   <Route path='/' component={MainPage}>
-    <Route name='login' path='login' component={LoginPage}/>
+    <IndexRoute name='home' component={HomePage}/>
-    <Route name='signup' path='signup' component={SignupPage}/>
-    <IndexRoute name='home' component={HomePage} onEnter={onlyUser}/>
-    <Route name='user' path='/users/:userId' component={HomePage} onEnter={onlyUser}/>
   </Route>
 )
 
@@ -34,26 +28,25 @@ ReactDOM.render((
     <Provider store={store}>
       <Router>{routes}</Router>
     </Provider>
-    {devToolElement}
   </div>
 ), el, function () {
   let loadingCover = document.getElementById('loadingCover')
   loadingCover.parentNode.removeChild(loadingCover)
 
   // Refresh user information
-  if (auth.user() != null) {
+  // if (auth.user() != null) {
-    fetchCurrentUser()
+  //   fetchCurrentUser()
-      .then(function (res) {
+  //     .then(function (res) {
-        let user = res.body
+  //       let user = res.body
-        store.dispatch(updateUser(user))
+  //       store.dispatch(updateUser(user))
-      })
+  //     })
-      .catch(function (err) {
+  //     .catch(function (err) {
-        if (err.status === 401) {
+  //       if (err.status === 401) {
-          auth.clear()
+  //         auth.clear()
-          if (window != null) window.location.reload()
+  //         if (window != null) window.location.reload()
-        }
+  //       }
-        console.error(err.message)
+  //       console.error(err.message)
-        console.log('Fetch failed')
+  //       console.log('Fetch failed')
-      })
+  //     })
-  }
+  // }
 })

browser/styles/finder/index.styl

@@ -4,22 +4,27 @@
 global-reset()
 @import '../shared/*'
 
+iptBgColor = #E6E6E6
+iptFocusBorderColor = #369DCD
+
 body
   font-family "Lato"
   color textColor
   font-size fontSize
+  width 100%
+  height 100%
+  overflow hidden
 
 .Finder
   absolute top bottom left right
   .FinderInput
-    position absolute
+    padding 11px
-    top 11px
-    left 11px
-    right 11px
     margin 0 auto
-    height 44px
+    height 55px
     box-sizing border-box
     border-bottom solid 1px borderColor
+    background-color iptBgColor
+    z-index 200
     input
       display block
       width 100%
@@ -29,9 +34,9 @@ body
       height 33px
       border-radius 5px
       box-sizing border-box
-      border-radius 16.5px
+      border-radius 5px
       &:focus, &.focus
-        border-color brandBorderColor
+        border-color iptFocusBorderColor
         outline none
   .FinderList
     absolute left bottom
@@ -40,6 +45,7 @@ body
     box-sizing border-box
     width 250px
     overflow-y auto
+    z-index 0
     &>ul>li
       .articleItem
         padding 10px
@@ -60,25 +66,29 @@ body
     absolute right bottom
     top 55px
     left 250px
+    box-shadow 0px 0px 10px 0 #CCC
+    z-index 100
     .header
       absolute top left right
-      height 44px
+      height 55px
       box-sizing border-box
       padding 0 10px
       border-bottom solid 1px borderColor
-      line-height 44px
+      line-height 55px
-      font-size 1.3em
+      font-size 18px
       white-space nowrap
       text-overflow ellipsis
       overflow-x hidden
     .content
-      .ace_editor, .marked
       position absolute
-        top 49px
+      top 55px
-        left 5px
+      padding 10px
-        right 5px
+      bottom 0
-        bottom 5px
+      left 0
+      right 0
       box-sizing border-box
-      .marked
-        marked()
       overflow-y auto
+      .MarkdownPreview
+        marked()
+      .CodeEditor
+        absolute top bottom left right

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

@@ -1,9 +1,10 @@
 noTagsColor = #999
+iptFocusBorderColor = #369DCD
 
 .ArticleDetail
   absolute right bottom
   top 60px
-  left 510px
+  left 450px
   padding 10px
   background-color #E6E6E6
   border-top 1px solid borderColor
@@ -79,25 +80,52 @@ noTagsColor = #999
   &.edit
     .detailInfo
       .left
-        .Select
+        .folder
-          .Select-control
           border none
-            background-color transparent
-        .folder.Select
           width 150px
-          .Select-control
+          height 27px
-            &:hover
+          outline none
           background-color darken(white, 5%)
-          &.is-focused
+          &:hover
-            .Select-control
             background-color white
-        .tags.Select
+        .TagSelect
-          .Select-control
           white-space nowrap
           overflow-x auto
           position relative
-            .Select-arrow-zone, .Select-arrow
+          margin-top 5px
-              display none
+          noSelect()
+          .tagItem
+            background-color brandColor
+            border-radius 2px
+            color white
+            margin 0 2px
+            padding 0
+            button.tagRemoveBtn
+              color white
+              border-radius 2px
+              border none
+              background-color transparent
+              padding 4px 2px
+              border-right 1px solid #E6E6E6
+              font-size 8px
+              line-height 12px
+              transition 0.1s
+              &:hover
+                background-color lighten(brandColor, 10%)
+            .tagLabel
+              padding 4px 4px
+              font-size 12px
+              line-height 12px
+          input.tagInput
+            background-color white
+            outline none
+            border-radius 2px
+            border 1px solid borderColor
+            transition 0.1s
+            &:focus
+              border-color iptFocusBorderColor
+
+
       .right
         button
           cursor pointer

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

@@ -4,7 +4,7 @@ articleItemColor = #777
 .ArticleList
   absolute bottom
   top 60px
-  left 260px
+  left 200px
   width 250px
   border-top 1px solid borderColor
   border-right 1px solid borderColor

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

@@ -2,8 +2,7 @@ articleNavBgColor = #353535
 
 .ArticleNavigator
   background-color articleNavBgColor
-  absolute top bottom
+  absolute top bottom left
-  left 60px
   width 200px
   border-right 1px solid borderColor
   color white

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

@@ -11,7 +11,7 @@ infoBtnActiveBgColor = #3A3A3A
 
 .ArticleTopBar
   absolute top right
-  left 260px
+  left 200px
   height 60px
   background-color bgColor
   &>.left
@@ -79,8 +79,6 @@ infoBtnActiveBgColor = #3A3A3A
       border-radius 11px
       border none
       transition 0.1s
-      &:nth-child(1)
-        right 109px
       &:hover
         background-color infoBtnActiveBgColor
 

browser/styles/mixins/marked.styl

@@ -1,4 +1,7 @@
 marked()
+  h1, h2, h3, h4, h5, h6, p
+    &:first-child
+      margin-top 0
   hr
     border-top none
     border-bottom solid 1px borderColor

lib/actions.js

@@ -1,11 +1,9 @@
 // Action types
-export const USER_UPDATE = 'USER_UPDATE'
-export const ARTICLE_REFRESH = 'ARTICLE_REFRESH'
 export const ARTICLE_UPDATE = 'ARTICLE_UPDATE'
 export const ARTICLE_DESTROY = 'ARTICLE_DESTROY'
+export const FOLDER_CREATE = 'FOLDER_CREATE'
 export const FOLDER_DESTROY = 'FOLDER_DESTROY'
 
-export const SWITCH_USER = 'SWITCH_USER'
 export const SWITCH_FOLDER = 'SWITCH_FOLDER'
 export const SWITCH_MODE = 'SWITCH_MODE'
 export const SWITCH_ARTICLE = 'SWITCH_ARTICLE'
@@ -23,46 +21,31 @@ export const SYNCING = 'SYNCING'
 export const UNSYNCED = 'UNSYNCED'
 
 // DB
-export function updateUser (user) {
+export function updateArticle (article) {
-  return {
-    type: USER_UPDATE,
-    data: { user }
-  }
-}
-
-export function refreshArticles (userId, articles) {
-  return {
-    type: ARTICLE_REFRESH,
-    data: { userId, articles }
-  }
-}
-
-export function updateArticle (userId, article) {
   return {
     type: ARTICLE_UPDATE,
-    data: { userId, article }
+    data: { article }
   }
 }
 
-export function destroyArticle (userId, articleKey) {
+export function destroyArticle (articleKey) {
   return {
     type: ARTICLE_DESTROY,
-    data: { userId, articleKey }
+    data: { articleKey }
   }
 }
 
-export function destroyFolder (userId, folderId) {
+export function createFolder (folder) {
+  return {
+    type: FOLDER_CREATE,
+    data: { folder }
+  }
+}
+
+export function destroyFolder (key) {
   return {
     type: FOLDER_DESTROY,
-    data: { userId, folderId }
+    data: { key }
-  }
-}
-
-// Nav
-export function switchUser (userId) {
-  return {
-    type: SWITCH_USER,
-    data: userId
   }
 }
 

lib/components/CodeEditor.js

@@ -1,5 +1,5 @@
 import React from 'react'
-let ReactDOM = require('react-dom')
+import ReactDOM from 'react-dom'
 var ace = window.ace
 
 module.exports = React.createClass({
@@ -15,17 +15,21 @@ module.exports = React.createClass({
       readOnly: false
     }
   },
+  componentWillReceiveProps: function (nextProps) {
+    if (nextProps.readOnly !== this.props.readOnly) {
+      this.editor.setReadOnly(!!nextProps.readOnly)
+    }
+  },
   componentDidMount: function () {
     var el = ReactDOM.findDOMNode(this.refs.target)
-    var editor = ace.edit(el)
+    var editor = this.editor = ace.edit(el)
     editor.$blockScrolling = Infinity
     editor.setValue(this.props.code)
     editor.renderer.setShowGutter(true)
     editor.setTheme('ace/theme/xcode')
     editor.clearSelection()
-    if (this.props.readOnly) {
+
-      editor.setReadOnly(true)
+    editor.setReadOnly(!!this.props.readOnly)
-    }
 
     var session = editor.getSession()
     if (this.props.mode != null && this.props.mode.length > 0) {

lib/components/FolderMark.js

@@ -34,7 +34,7 @@ function getColorByIndex (index) {
 
 export default class FolderMark extends React.Component {
   render () {
-    let color = getColorByIndex(this.props.id)
+    let color = getColorByIndex(this.props.color)
     return (
       <i className='fa fa-square fa-fw' style={{color: color}}/>
     )
@@ -42,5 +42,5 @@ export default class FolderMark extends React.Component {
 }
 
 FolderMark.propTypes = {
-  id: PropTypes.number
+  color: PropTypes.number
 }

lib/components/TagLink.js

@@ -4,17 +4,15 @@ import { setTagFilter } from '../actions'
 
 export default class TagLink extends React.Component {
   handleClick (e) {
-    store.dispatch(setTagFilter(this.props.tag.name))
+    store.dispatch(setTagFilter(this.props.tag))
   }
   render () {
     return (
-      <a onClick={e => this.handleClick(e)}>{this.props.tag.name}</a>
+      <a onClick={e => this.handleClick(e)}>{this.props.tag}</a>
     )
   }
 }
 
 TagLink.propTypes = {
-  tag: PropTypes.shape({
+  tag: PropTypes.string
-    name: PropTypes.string
-  })
 }

lib/components/TagSelect.js

@@ -0,0 +1,77 @@
+import React, { PropTypes } from 'react'
+import ReactDOM from 'react-dom'
+import _ from 'lodash'
+import linkState from 'boost/linkState'
+
+export default class TagSelect extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      input: ''
+    }
+  }
+
+  handleKeyDown (e) {
+    if (e.keyCode !== 13) return false
+    e.preventDefault()
+
+    let tags = this.props.tags.slice(0)
+    let newTag = this.state.input
+
+    tags.push(newTag)
+    tags = _.uniq(tags)
+
+    if (_.isFunction(this.props.onChange)) {
+      this.props.onChange(newTag, tags)
+    }
+    this.setState({input: ''})
+  }
+
+  handleThisClick (e) {
+    ReactDOM.findDOMNode(this.refs.tagInput).focus()
+  }
+
+  handleItemRemoveButton (tag) {
+    return e => {
+      e.stopPropagation()
+
+      let tags = this.props.tags.slice(0)
+      tags.splice(tags.indexOf(tag), 1)
+
+      if (_.isFunction(this.props.onChange)) {
+        this.props.onChange(null, tags)
+      }
+    }
+  }
+
+  render () {
+    var tagElements = _.isArray(this.props.tags)
+      ? this.props.tags.map(tag => (
+        <span key={tag} className='tagItem'>
+          <button onClick={e => this.handleItemRemoveButton(tag)(e)} className='tagRemoveBtn'><i className='fa fa-fw fa-times'/></button>
+          <span className='tagLabel'>{tag}</span>
+        </span>))
+      : null
+
+    return (
+      <div className='TagSelect' onClick={e => this.handleThisClick(e)}>
+        {tagElements}
+        <input
+          type='text'
+          onKeyDown={e => this.handleKeyDown(e)}
+          ref='tagInput'
+          valueLink={this.linkState('input')}
+          placeholder='new tag'
+          className='tagInput'/>
+      </div>
+    )
+  }
+}
+
+TagSelect.propTypes = {
+  tags: PropTypes.arrayOf(PropTypes.string),
+  onChange: PropTypes.func
+}
+
+TagSelect.prototype.linkState = linkState

lib/components/modal/CreateNewFolder.js

@@ -1,7 +1,8 @@
 import React, { PropTypes } from 'react'
 import linkState from 'boost/linkState'
-import api from 'boost/api'
+import keygen from 'boost/keygen'
-import { pick } from 'lodash'
+import { createFolder } from 'boost/actions'
+import store from 'boost/store'
 
 export default class CreateNewFolder extends React.Component {
   constructor (props) {
@@ -9,54 +10,42 @@ export default class CreateNewFolder extends React.Component {
 
     this.state = {
       name: '',
-      public: false
+      alert: null
     }
   }
+
   handleCloseButton (e) {
     this.props.close()
   }
 
-  handlePublicButtonClick (value) {
-    console.log(value)
-    return e => {
-      this.setState({public: value})
-    }
-  }
-
   handleConfirmButton (e) {
-    let { user, close } = this.props
+    let { close } = this.props
-    let input = pick(this.state, ['public', 'name'])
+    let key = keygen()
-    input.UserId = user.id
+    let name = this.state.name
+    let input = {
+      name,
+      key,
+      createAt: new Date(),
+      updatedAt: new Date(),
+      // random number (0-7)
+      color: Math.round(Math.random() * 7)
+    }
 
-    api.createFolder(input)
+    store.dispatch(createFolder(input))
-      .then(res => {
+    try {
-        console.log(res.body)
+    } catch (e) {
+      this.setState({alert: {
+        type: 'error',
+        message: e.message
+      }})
+      return
+    }
     close()
-      })
-      .catch(err => {
-        console.log(err)
-        var alert
-        if (err.code === 'ECONNREFUSED') {
-          alert = {
-            type: 'error',
-            message: 'Can\'t connect to API server.'
-          }
-        } else if (err.status != null) {
-          alert = {
-            type: 'error',
-            message: err.response.body.message
-          }
-        } else {
-          throw err
-        }
-
-        this.setState({alert: alert})
-      })
   }
 
   render () {
     let alert = this.state.alert
-    let alertEl = alert != null ? (
+    let alertElement = alert != null ? (
         <p className={`alert ${alert.type}`}>
           {alert.message}
         </p>
@@ -69,13 +58,7 @@ export default class CreateNewFolder extends React.Component {
         <div className='title'>Create new folder</div>
 
         <input className='ipt' type='text' valueLink={this.linkState('name')} placeholder='Enter folder name'/>
-
+        {alertElement}
-        <div className='public'>
-          <button className={!this.state.public ? 'active' : ''} onClick={e => this.handlePublicButtonClick(false)(e)}>Private</button>
-          <span className='divider'>/</span>
-          <button className={this.state.public ? 'active' : ''} onClick={e => this.handlePublicButtonClick(true)(e)}>Public</button>
-        </div>
-        {alertEl}
 
         <button onClick={e => this.handleConfirmButton(e)} className='confirmBtn'>Create</button>
       </div>
@@ -84,7 +67,6 @@ export default class CreateNewFolder extends React.Component {
 }
 
 CreateNewFolder.propTypes = {
-  user: PropTypes.shape(),
   close: PropTypes.func
 }
 

lib/components/modal/Preference/AppSettingTab.js

@@ -1,6 +1,24 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
+import linkState from 'boost/linkState'
+import remote from 'remote'
+import ipc from 'ipc'
 
 export default class AppSettingTab extends React.Component {
+  constructor (props) {
+    super(props)
+    let keymap = remote.getGlobal('keymap')
+
+    this.state = {
+      toggleFinder: keymap.toggleFinder
+    }
+  }
+
+  handleSaveButtonClick (e) {
+    ipc.send('hotkeyUpdated', {
+      toggleFinder: this.state.toggleFinder
+    })
+  }
+
   render () {
     return (
       <div className='AppSettingTab content'>
@@ -8,10 +26,10 @@ export default class AppSettingTab extends React.Component {
           <div className='sectionTitle'>Hotkey</div>
           <div className='sectionInput'>
             <label>Toggle Finder(popup)</label>
-            <input type='text'/>
+            <input valueLink={this.linkState('toggleFinder')} type='text'/>
           </div>
           <div className='sectionConfirm'>
-            <button>Save</button>
+            <button onClick={e => this.handleSaveButtonClick(e)}>Save</button>
           </div>
           <div className='description'>
             <ul>
@@ -38,3 +56,5 @@ export default class AppSettingTab extends React.Component {
     )
   }
 }
+
+AppSettingTab.prototype.linkState = linkState

lib/components/modal/Preferences.js

@@ -24,21 +24,7 @@ class Preferences extends React.Component {
     super(props)
 
     this.state = {
-      currentTab: PROFILE,
+      currentTab: APP
-      currentTeamId: props.status.userId,
-      profile: {
-        userInfo: {
-          profileName: props.currentUser.profileName,
-          email: props.currentUser.email,
-          alert: null
-        },
-        password: {
-          currentPassword: '',
-          newPassword: '',
-          confirmation: '',
-          error: null
-        }
-      }
     }
   }
 
@@ -56,12 +42,8 @@ class Preferences extends React.Component {
     let content = this.renderContent()
 
     let tabs = [
-      {target: PROFILE, label: 'Profile'},
+      {target: APP, label: 'Preferences'}
-      {target: APP, label: 'Preferences'},
+      // {target: FOLDER, label: 'Manage folder'}
-      {target: HELP, label: 'Help & Feedback'},
-      {target: TEAM, label: 'Team setting'},
-      {target: MEMBER, label: 'Manage member'},
-      {target: FOLDER, label: 'Manage folder'}
     ]
 
     let navButtons = tabs.map(tab => (
@@ -85,42 +67,12 @@ class Preferences extends React.Component {
   }
 
   renderContent () {
-    let currentTeamId = parseInt(this.state.currentTeamId, 10)
-    let teams = [this.props.currentUser].concat(this.props.currentUser.Teams)
-
     switch (this.state.currentTab) {
-      case APP:
-        return (<AppSettingTab/>)
       case HELP:
         return (<HelpTab/>)
-      case TEAM:
+      case APP:
-        return (
-          <TeamSettingTab
-            currentTeamId={currentTeamId}
-            teams={teams}
-            switchTeam={teamId => this.switchTeam(teamId)}
-          />
-        )
-      case MEMBER:
-        return (
-          <MemberSettingTab
-            currentUser={this.props.currentUser}
-            currentTeamId={currentTeamId}
-            teams={teams}
-            switchTeam={teamId => this.switchTeam(teamId)}
-          />
-        )
-      case FOLDER:
-        return (
-          <FolderSettingTab
-            currentTeamId={currentTeamId}
-            teams={teams}
-            switchTeam={teamId => this.switchTeam(teamId)}
-          />
-        )
-      case PROFILE:
       default:
-        return this.renderProfile()
+        return (<AppSettingTab/>)
     }
   }
 

lib/reducer.js

@@ -1,7 +1,10 @@
 import { combineReducers } from 'redux'
-import { findIndex } from 'lodash'
+import _ from 'lodash'
-import { SWITCH_USER, SWITCH_FOLDER, SWITCH_MODE, SWITCH_ARTICLE, SET_SEARCH_FILTER, SET_TAG_FILTER, USER_UPDATE, ARTICLE_REFRESH, ARTICLE_UPDATE, ARTICLE_DESTROY, FOLDER_DESTROY, IDLE_MODE, CREATE_MODE } from './actions'
+import { SWITCH_FOLDER, SWITCH_MODE, SWITCH_ARTICLE, SET_SEARCH_FILTER, SET_TAG_FILTER, USER_UPDATE, ARTICLE_UPDATE, ARTICLE_DESTROY, FOLDER_CREATE, FOLDER_DESTROY, IDLE_MODE, CREATE_MODE } from './actions'
 import auth from 'boost/auth'
+import keygen from 'boost/keygen'
+
+let defaultContent = '**Boost**は全く新しいエンジニアライクのノートアプリです。\n\n# ◎特徴\nBoostはエンジニアの仕事を圧倒的に効率化するいくつかの機能を備えています。\nその一部をご紹介します。\n1. Folderで情報を分類\n2. 豊富なsyantaxに対応\n3. Finder機能\n4. チーム機能（リアルタイム搭載）\n\n＊　＊　＊　＊\n\n# 1. Folderで情報を分類、欲しい情報にすぐアクセス。\n左側のバーに存在する「Folders」。\n今すぐプラスボタンを押しましょう。\n分類の仕方も自由自在です。\n- 言語やフレームワークごとにFolderを作成\n- 自分用のカジュアルなメモをまとめる場としてFolderを作成\n\n\n# 2. 豊富なsyantaxに対応、自分の脳の代わりに。\nプログラミングに関する情報を全て、手軽に保存しましょう。\n- mdで、apiの仕様をまとめる\n- よく使うモジュールやスニペット\n\nBoostに保存しておくことで、何度も同じコードを書いたり調べたりする必要がなくなります。\n\n# 3. Finder機能を搭載、もうコマンドを手打ちする必要はありません。\n**「shift+cmd+tab」** を同時に押してみてください。\nここでは、一瞬でBoostの中身を検索するウィンドウを表示させることができます。\n\n矢印キーで選択、Enterを押し、cmd+vでペーストすると…続きはご自身の目でお確かめください。\n- sqlやlinux等の、よく使うが手打ちが面倒なコマンド\n- （メールやカスタマーサポート等でよく使うフレーズ）\n\n私たちは、圧倒的な効率性を支援します。\n\n# 4. チーム機能を搭載、シームレスな情報共有の場を実現。\n開発の設計思想やmdファイルの共有等、チームによって用途は様々ですが、Boostは多くの情報共有の課題について解決策を投げかけます。\n魅力を感じたら、左下のプラスボタンを今すぐクリック。\n\n\n＊　＊　＊　＊\n\n\n## ◎詳しくは\nこちらのブログ( http://blog-jp.b00st.io )にて随時更新しています。\n\nそれでは素晴らしいエンジニアライフを！\n\n## Hack your memory＊＊'
 
 const initialStatus = {
   mode: IDLE_MODE,
@@ -9,18 +12,30 @@ const initialStatus = {
 }
 
 function getInitialArticles () {
-  let initialCurrentUser = auth.user()
+  let data = JSON.parse(localStorage.getItem('local'))
-  if (initialCurrentUser == null) return []
+  if (data == null) {
+    let defaultFolder = {
+      name: 'default',
+      key: keygen()
+    }
+    let defaultArticle = {
+      title: 'Boostとは',
+      tags: ['boost', 'intro'],
+      content: defaultContent,
+      mode: 'markdown',
+      key: keygen(),
+      FolderKey: defaultFolder.key
+    }
 
-  let teams = Array.isArray(initialCurrentUser.Teams) ? initialCurrentUser.Teams : []
+    data = {
+      articles: [defaultArticle],
+      folders: [defaultFolder],
+      version: require('remote').require('app').getVersion()
+    }
+    localStorage.setItem('local', JSON.stringify(data))
+  }
 
-  let users = [initialCurrentUser, ...teams]
+  return data.articles
-  let initialArticles = users.reduce((res, user) => {
-    res['team-' + user.id] = JSON.parse(localStorage.getItem('team-' + user.id))
-    return res
-  }, {})
-
-  return initialArticles
 }
 
 function currentUser (state, action) {
@@ -37,14 +52,10 @@ function currentUser (state, action) {
 
 function status (state, action) {
   switch (action.type) {
-    case SWITCH_USER:
-      state.userId = action.data
-      state.mode = IDLE_MODE
-      state.search = ''
-      return state
     case SWITCH_FOLDER:
       state.mode = IDLE_MODE
       state.search = `in:${action.data} `
+
       return state
     case SWITCH_MODE:
       state.mode = action.data
@@ -54,14 +65,17 @@ function status (state, action) {
     case SWITCH_ARTICLE:
       state.articleKey = action.data
       state.mode = IDLE_MODE
+
       return state
     case SET_SEARCH_FILTER:
       state.search = action.data
       state.mode = IDLE_MODE
+
       return state
     case SET_TAG_FILTER:
       state.search = `#${action.data}`
       state.mode = IDLE_MODE
+
       return state
     default:
       if (state == null) return initialStatus
@@ -69,62 +83,62 @@ function status (state, action) {
   }
 }
 
-function genKey (id) {
-  return 'team-' + id
-}
-
 function articles (state, action) {
   switch (action.type) {
-    case ARTICLE_REFRESH:
-      {
-        let { userId, articles } = action.data
-        let teamKey = genKey(userId)
-        localStorage.setItem(teamKey, JSON.stringify(articles))
-        state[teamKey] = articles
-      }
-
-      return state
     case ARTICLE_UPDATE:
       {
-        let { userId, article } = action.data
+        console.log(action)
-        let teamKey = genKey(userId)
+        let data = JSON.parse(localStorage.getItem('local'))
-        let articles = JSON.parse(localStorage.getItem(teamKey))
+        let { articles } = data
+        let article = action.data.article
 
-        let targetIndex = findIndex(articles, _article => article.key === _article.key)
+        let targetIndex = _.findIndex(articles, _article => article.key === _article.key)
-        console.log('before')
-        console.log(articles)
         if (targetIndex < 0) articles.unshift(article)
         else articles.splice(targetIndex, 1, article)
-        console.log('after')
-        console.log(articles)
 
-        localStorage.setItem(teamKey, JSON.stringify(articles))
+        localStorage.setItem('local', JSON.stringify(data))
-        state[teamKey] = articles
+        state.articles = articles
       }
       return state
     case ARTICLE_DESTROY:
       {
-        let { userId, articleKey } = action.data
+        let data = JSON.parse(localStorage.getItem('local'))
-        let teamKey = genKey(userId)
+        let { articles } = data
-        let articles = JSON.parse(localStorage.getItem(teamKey))
+        let articleKey = action.data.articleKey
-        console.log(articles)
+
-        console.log(articleKey)
+        let targetIndex = _.findIndex(articles, _article => articleKey === _article.key)
-        let targetIndex = findIndex(articles, _article => articleKey === _article.key)
         if (targetIndex >= 0) articles.splice(targetIndex, 1)
 
-        localStorage.setItem(teamKey, JSON.stringify(articles))
+        state.articles = articles
-        state[teamKey] = articles
+        localStorage.setItem('local', JSON.stringify(data))
+      }
+      return state
+    case FOLDER_CREATE:
+      {
+        let data = JSON.parse(localStorage.getItem('local'))
+        let { folders } = data
+        let newFolder = action.data.folder
+
+        let conflictFolder = _.findWhere(folders, {name: newFolder.name})
+        if (conflictFolder != null) throw new Error('name conflicted!')
+        folders.push(newFolder)
+
+        localStorage.setItem('local', JSON.stringify(data))
+        state.folders = folders
       }
       return state
     case FOLDER_DESTROY:
       {
-        let { userId, folderId } = action.data
+        let data = JSON.parse(localStorage.getItem('local'))
-        let teamKey = genKey(userId)
+        let { folderKey } = action.data
-        let articles = JSON.parse(localStorage.getItem(teamKey))
+        let articles = data.articles
-        articles = articles.filter(article => article.FolderId !== folderId)
+        articles = articles.filter(article => article.FolderKey !== folderKey)
+        let folders = data.folders
+        folders = folders.filter(folder => folder.key !== folderKey)
 
-        localStorage.setItem(teamKey, JSON.stringify(articles))
+        localStorage.setItem('local', JSON.stringify(data))
-        state[teamKey] = articles
+        state.folders = folders
+        state.articles = articles
       }
       return state
     default:

lib/search.js

@@ -0,0 +1,40 @@
+'use strict'
+
+var _ = require('lodash')
+
+const TEXT_FILTER = 'TEXT_FILTER'
+const FOLDER_FILTER = 'FOLDER_FILTER'
+const TAG_FILTER = 'TAG_FILTER'
+
+export default function search (articles, search) {
+  let filters = search.split(' ').map(key => key.trim()).filter(key => key.length > 0 && !key.match(/^#$/)).map(key => {
+    if (key.match(/^in:.+$/)) {
+      return {type: FOLDER_FILTER, value: key.match(/^in:(.+)$/)[1]}
+    }
+    if (key.match(/^#(.+)/)) {
+      return {type: TAG_FILTER, value: key.match(/^#(.+)$/)[1]}
+    }
+    return {type: TEXT_FILTER, value: key}
+  })
+  // let folderFilters = filters.filter(filter => filter.type === FOLDER_FILTER)
+  let textFilters = filters.filter(filter => filter.type === TEXT_FILTER)
+  let tagFilters = filters.filter(filter => filter.type === TAG_FILTER)
+
+  if (textFilters.length > 0) {
+    articles = textFilters.reduce((articles, textFilter) => {
+      return articles.filter(article => {
+        return article.title.match(new RegExp(textFilter.value, 'i')) || article.content.match(new RegExp(textFilter.value, 'i'))
+      })
+    }, articles)
+  }
+
+  if (tagFilters.length > 0) {
+    articles = tagFilters.reduce((articles, tagFilter) => {
+      return articles.filter(article => {
+        return _.find(article.Tags, tag => tag.name.match(new RegExp(tagFilter.value, 'i')))
+      })
+    }, articles)
+  }
+
+  return articles
+}

lib/store.js

@@ -3,5 +3,4 @@ import { createStore } from 'redux'
 
 let store = createStore(reducer)
 
-export let devToolElement = null
 export default store

main.js

@@ -96,59 +96,58 @@ app.on('ready', function () {
     mainWindow.show()
   })
 
-  // finderWindow = require('./atom-lib/finder-window')
+  finderWindow = require('./atom-lib/finder-window')
 
-  // var globalShortcut = require('global-shortcut')
+  var globalShortcut = require('global-shortcut')
-  // console.log('jetpack launch')
+  var userDataPath = app.getPath('userData')
-  // var userDataPath = app.getPath('userData')
+  if (!jetpack.cwd(userDataPath).exists('keymap.json')) {
-  // if (!jetpack.cwd(userDataPath).exists('keymap.json')) {
+    jetpack.cwd(userDataPath).file('keymap.json', {content: '{}'})
-  //   jetpack.cwd(userDataPath).file('keymap.json', {content: '{}'})
+  }
-  // }
+  try {
-  // try {
+    global.keymap = JSON.parse(jetpack.cwd(userDataPath).read('keymap.json', 'utf-8'))
-  //   global.keymap = JSON.parse(jetpack.cwd(userDataPath).read('keymap.json', 'utf-8'))
+  } catch (err) {
-  // } catch (err) {
+    jetpack.cwd(userDataPath).file('keymap.json', {content: '{}'})
-  //   jetpack.cwd(userDataPath).file('keymap.json', {content: '{}'})
+    global.keymap = {}
-  //   global.keymap = {}
+  }
-  // }
+  if (global.keymap.toggleFinder == null) global.keymap.toggleFinder = 'ctrl+tab+shift'
-  // if (global.keymap.toggleFinder == null) global.keymap.toggleFinder = 'ctrl+tab+shift'
+  var toggleFinderKey = global.keymap.toggleFinder
-  // var toggleFinderKey = global.keymap.toggleFinder
 
-  // try {
+  try {
-  //   globalShortcut.register(toggleFinderKey, function () {
+    globalShortcut.register(toggleFinderKey, function () {
-  //     if (mainWindow != null && !mainWindow.isFocused()) {
+      if (mainWindow != null && !mainWindow.isFocused()) {
-  //       mainWindow.hide()
+        mainWindow.hide()
-  //     }
+      }
-  //     finderWindow.show()
+      finderWindow.show()
-  //   })
+    })
-  // } catch (err) {
+  } catch (err) {
-  //   console.log(err.name)
+    console.log(err.name)
-  // }
+  }
-
+
-  // ipc.on('hotkeyUpdated', function (event, newKeymap) {
+  ipc.on('hotkeyUpdated', function (event, newKeymap) {
-  //   console.log('got new keymap')
+    console.log('got new keymap')
-  //   console.log(newKeymap)
+    console.log(newKeymap)
-  //   globalShortcut.unregisterAll()
+    globalShortcut.unregisterAll()
-  //   global.keymap = JSON.parse(newKeymap)
+    global.keymap = newKeymap
-  //   jetpack.cwd(userDataPath).file('keymap.json', {content: JSON.stringify(global.keymap)})
+    jetpack.cwd(userDataPath).file('keymap.json', {content: JSON.stringify(global.keymap)})
-
+
-  //   var toggleFinderKey = global.keymap.toggleFinder != null ? global.keymap.toggleFinder : 'ctrl+tab+shift'
+    var toggleFinderKey = global.keymap.toggleFinder != null ? global.keymap.toggleFinder : 'ctrl+tab+shift'
-  //   try {
+    try {
-  //     globalShortcut.register(toggleFinderKey, function () {
+      globalShortcut.register(toggleFinderKey, function () {
-  //       if (mainWindow != null && !mainWindow.isFocused()) {
+        if (mainWindow != null && !mainWindow.isFocused()) {
-  //         mainWindow.hide()
+          mainWindow.hide()
-  //       }
+        }
-  //       finderWindow.show()
+        finderWindow.show()
-  //     })
+      })
-  //   } catch (err) {
+    } catch (err) {
-  //     console.log(err.name)
+      console.log(err.name)
-  //   }
+    }
-  // })
+  })
-
+
-  // global.hideFinder = function () {
+  global.hideFinder = function () {
-  //   if (!mainWindow.isVisible()) {
+    if (!mainWindow.isVisible()) {
-  //     Menu.sendActionToFirstResponder('hide:')
+      Menu.sendActionToFirstResponder('hide:')
-  //   } else {
+    } else {
-  //     mainWindow.focus()
+      mainWindow.focus()
-  //   }
+    }
-  // }
+  }
 })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "boost",
-  "version": "0.4.0-alpha.4",
+  "version": "0.4.0-alpha.5",
   "description": "Boost App",
   "main": "main.js",
   "scripts": {

webpack.config.js

@@ -6,7 +6,8 @@ var NodeTargetPlugin = require('webpack/lib/node/NodeTargetPlugin')
 var ExternalsPlugin = webpack.ExternalsPlugin
 var opt = {
   path: path.join(__dirname, 'compiled'),
-  filename: 'bundle.js',
+  filename: '[name].js',
+  sourceMapFilename: '[name].map',
   libraryTarget: 'commonjs2',
   publicPath: 'http://localhost:8080/assets/'
 }
@@ -26,10 +27,11 @@ var config = {
     ]
   },
   debug: true,
-  devtool: 'cheap-module-eval-source-map',
+  devtool: 'eval-source-map',
-  entry: [
+  entry: {
-    './browser/main/index.js'
+    main: './browser/main/index.js',
-  ],
+    finder: './browser/finder/index.js'
+  },
   output: opt,
   resolve: {
     extensions: ['', '.js', '.jsx'],