Going LIte

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) {
-  return {
-    type: USER_UPDATE,
-    data: { user }
-  }
-}
-
-export function refreshArticles (userId, articles) {
-  return {
-    type: ARTICLE_REFRESH,
-    data: { userId, articles }
-  }
-}
-
-export function updateArticle (userId, article) {
+export function updateArticle (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 }
-  }
-}
-
-// Nav
-export function switchUser (userId) {
-  return {
-    type: SWITCH_USER,
-    data: userId
+    data: { key }
   }
 }
 

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({
-    name: PropTypes.string
-  })
+  tag: 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 { pick } from 'lodash'
+import keygen from 'boost/keygen'
+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 input = pick(this.state, ['public', 'name'])
-    input.UserId = user.id
+    let { close } = this.props
+    let key = keygen()
+    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)
-      .then(res => {
-        console.log(res.body)
-        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})
-      })
+    store.dispatch(createFolder(input))
+    try {
+    } catch (e) {
+      this.setState({alert: {
+        type: 'error',
+        message: e.message
+      }})
+      return
+    }
+    close()
   }
 
   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'/>
-
-        <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}
+        {alertElement}
 
         <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,
-      currentTeamId: props.status.userId,
-      profile: {
-        userInfo: {
-          profileName: props.currentUser.profileName,
-          email: props.currentUser.email,
-          alert: null
-        },
-        password: {
-          currentPassword: '',
-          newPassword: '',
-          confirmation: '',
-          error: null
-        }
-      }
+      currentTab: APP
     }
   }
 
@@ -56,12 +42,8 @@ class Preferences extends React.Component {
     let content = this.renderContent()
 
     let tabs = [
-      {target: PROFILE, label: 'Profile'},
-      {target: APP, label: 'Preferences'},
-      {target: HELP, label: 'Help & Feedback'},
-      {target: TEAM, label: 'Team setting'},
-      {target: MEMBER, label: 'Manage member'},
-      {target: FOLDER, label: 'Manage folder'}
+      {target: APP, label: 'Preferences'}
+      // {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:
-        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:
+      case APP:
       default:
-        return this.renderProfile()
+        return (<AppSettingTab/>)
     }
   }
 

lib/reducer.js

@@ -1,7 +1,10 @@
 import { combineReducers } from 'redux'
-import { findIndex } 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 _ from 'lodash'
+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()
-  if (initialCurrentUser == null) return []
+  let data = JSON.parse(localStorage.getItem('local'))
+  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]
-  let initialArticles = users.reduce((res, user) => {
-    res['team-' + user.id] = JSON.parse(localStorage.getItem('team-' + user.id))
-    return res
-  }, {})
-
-  return initialArticles
+  return data.articles
 }
 
 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
-        let teamKey = genKey(userId)
-        let articles = JSON.parse(localStorage.getItem(teamKey))
+        console.log(action)
+        let data = JSON.parse(localStorage.getItem('local'))
+        let { articles } = data
+        let article = action.data.article
 
-        let targetIndex = findIndex(articles, _article => article.key === _article.key)
-        console.log('before')
-        console.log(articles)
+        let targetIndex = _.findIndex(articles, _article => article.key === _article.key)
         if (targetIndex < 0) articles.unshift(article)
         else articles.splice(targetIndex, 1, article)
-        console.log('after')
-        console.log(articles)
 
-        localStorage.setItem(teamKey, JSON.stringify(articles))
-        state[teamKey] = articles
+        localStorage.setItem('local', JSON.stringify(data))
+        state.articles = articles
       }
       return state
     case ARTICLE_DESTROY:
       {
-        let { userId, articleKey } = action.data
-        let teamKey = genKey(userId)
-        let articles = JSON.parse(localStorage.getItem(teamKey))
-        console.log(articles)
-        console.log(articleKey)
-        let targetIndex = findIndex(articles, _article => articleKey === _article.key)
+        let data = JSON.parse(localStorage.getItem('local'))
+        let { articles } = data
+        let articleKey = action.data.articleKey
+
+        let targetIndex = _.findIndex(articles, _article => articleKey === _article.key)
         if (targetIndex >= 0) articles.splice(targetIndex, 1)
 
-        localStorage.setItem(teamKey, JSON.stringify(articles))
-        state[teamKey] = articles
+        state.articles = 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 teamKey = genKey(userId)
-        let articles = JSON.parse(localStorage.getItem(teamKey))
-        articles = articles.filter(article => article.FolderId !== folderId)
+        let data = JSON.parse(localStorage.getItem('local'))
+        let { folderKey } = action.data
+        let articles = data.articles
+        articles = articles.filter(article => article.FolderKey !== folderKey)
+        let folders = data.folders
+        folders = folders.filter(folder => folder.key !== folderKey)
 
-        localStorage.setItem(teamKey, JSON.stringify(articles))
-        state[teamKey] = articles
+        localStorage.setItem('local', JSON.stringify(data))
+        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