User name change and modify style

browser/main/HomePage.js

@@ -1,7 +1,6 @@
 import React, { PropTypes} from 'react'
 import { connect } from 'react-redux'
-import { EDIT_MODE, IDLE_MODE, NEW, toggleTutorial } from 'boost/actions'
+import { EDIT_MODE, IDLE_MODE, toggleTutorial } from 'boost/actions'
-// import UserNavigator from './HomePage/UserNavigator'
 import ArticleNavigator from './HomePage/ArticleNavigator'
 import ArticleTopBar from './HomePage/ArticleTopBar'
 import ArticleList from './HomePage/ArticleList'
@@ -114,13 +113,14 @@ class HomePage extends React.Component {
   }
 
   render () {
-    let { dispatch, status, articles, allArticles, activeArticle, folders, tags, filters } = this.props
+    let { dispatch, status, user, articles, allArticles, activeArticle, folders, tags, filters } = this.props
 
     return (
       <div className='HomePage'>
         <ArticleNavigator
           ref='nav'
           dispatch={dispatch}
+          user={user}
           folders={folders}
           status={status}
           allArticles={allArticles}
@@ -172,7 +172,7 @@ function buildFilter (key) {
 }
 
 function remap (state) {
-  let { folders, articles, status } = state
+  let { user, folders, articles, status } = state
 
   if (articles == null) articles = []
   articles.sort((a, b) => {
@@ -234,6 +234,7 @@ function remap (state) {
   if (activeArticle == null) activeArticle = articles[0]
 
   return {
+    user,
     folders,
     status,
     allArticles,
@@ -249,11 +250,9 @@ function remap (state) {
 }
 
 HomePage.propTypes = {
-  params: PropTypes.shape({
+  status: PropTypes.shape(),
-    userId: PropTypes.string
+  user: PropTypes.shape({
-  }),
+    name: PropTypes.string
-  status: PropTypes.shape({
-    userId: PropTypes.string
   }),
   articles: PropTypes.array,
   allArticles: PropTypes.array,

browser/main/HomePage/ArticleNavigator.js

@@ -7,10 +7,6 @@ import Preferences from 'boost/components/modal/Preferences'
 import CreateNewFolder from 'boost/components/modal/CreateNewFolder'
 import keygen from 'boost/keygen'
 
-const electron = require('electron')
-const remote = electron.remote
-let userName = remote.getGlobal('process').env.USER
-
 const BRAND_COLOR = '#18AF90'
 
 const preferenceTutorialElement = (
@@ -109,7 +105,7 @@ export default class ArticleNavigator extends React.Component {
   }
 
   render () {
-    let { status, folders, allArticles } = this.props
+    let { status, user, folders, allArticles } = this.props
     let { targetFolders } = status
     if (targetFolders == null) targetFolders = []
 
@@ -127,7 +123,7 @@ export default class ArticleNavigator extends React.Component {
     return (
       <div className='ArticleNavigator'>
         <div className='userInfo'>
-          <div className='userProfileName'>{userName}</div>
+          <div className='userProfileName'>{user.name}</div>
           <div className='userName'>localStorage</div>
           <button onClick={e => this.handlePreferencesButtonClick(e)} className='settingBtn'>
             <i className='fa fa-fw fa-chevron-down'/>

lib/actions.js

@@ -1,4 +1,6 @@
 // Action types
+export const USER_UPDATE = 'USER_UPDATE'
+
 export const CLEAR_NEW_ARTICLE = 'CLEAR_NEW_ARTICLE'
 export const ARTICLE_UPDATE = 'ARTICLE_UPDATE'
 export const ARTICLE_DESTROY = 'ARTICLE_DESTROY'
@@ -24,6 +26,13 @@ export const EDIT_MODE = 'EDIT_MODE'
 // Article status
 export const NEW = 'NEW'
 
+export function updateUser (input) {
+  return {
+    type: USER_UPDATE,
+    data: input
+  }
+}
+
 // DB
 export function clearNewArticle () {
   return {
@@ -31,6 +40,7 @@ export function clearNewArticle () {
   }
 }
 
+
 export function updateArticle (article) {
   return {
     type: ARTICLE_UPDATE,

lib/components/modal/Preference/AppSettingTab.js

@@ -1,5 +1,6 @@
-import React from 'react'
+import React, { PropTypes } from 'react'
 import linkState from 'boost/linkState'
+import { updateUser } from 'boost/actions'
 
 const electron = require('electron')
 const ipc = electron.ipcRenderer
@@ -9,9 +10,14 @@ export default class AppSettingTab extends React.Component {
   constructor (props) {
     super(props)
     let keymap = remote.getGlobal('keymap')
+    let userName = props.user != null ? props.user.name : null
 
     this.state = {
       toggleFinder: keymap.toggleFinder,
+      user: {
+        name: userName,
+        alert: null
+      },
       alert: null
     }
   }
@@ -54,6 +60,12 @@ export default class AppSettingTab extends React.Component {
     }
   }
 
+  handleNameSaveButtonClick (e) {
+    let { dispatch } = this.props
+
+    dispatch(updateUser({name: this.state.user.name}))
+  }
+
   render () {
     let alert = this.state.alert
     let alertElement = alert != null ? (
@@ -64,6 +76,17 @@ export default class AppSettingTab extends React.Component {
 
     return (
       <div className='AppSettingTab content'>
+        <div className='section'>
+          <div className='sectionTitle'>User's info</div>
+          <div className='sectionInput'>
+            <label>User name</label>
+            <input valueLink={this.linkState('user.name')} type='text'/>
+          </div>
+          <div className='sectionConfirm'>
+            <button onClick={e => this.handleNameSaveButtonClick(e)}>Save</button>
+            {alertElement}
+          </div>
+        </div>
         <div className='section'>
           <div className='sectionTitle'>Hotkey</div>
           <div className='sectionInput'>
@@ -101,3 +124,6 @@ export default class AppSettingTab extends React.Component {
 }
 
 AppSettingTab.prototype.linkState = linkState
+AppSettingTab.propTypes = {
+  dispatch: PropTypes.func
+}

lib/components/modal/Preferences.js

@@ -62,7 +62,7 @@ class Preferences extends React.Component {
   }
 
   renderContent () {
-    let { folders, dispatch } = this.props
+    let { user, folders, dispatch } = this.props
 
     switch (this.state.currentTab) {
       case HELP:
@@ -80,12 +80,20 @@ class Preferences extends React.Component {
         )
       case APP:
       default:
-        return (<AppSettingTab/>)
+        return (
+          <AppSettingTab
+            user={user}
+            dispatch={dispatch}
+          />
+        )
     }
   }
 }
 
 Preferences.propTypes = {
+  user: PropTypes.shape({
+    name: PropTypes.string
+  }),
   folders: PropTypes.array,
   dispatch: PropTypes.func
 }
@@ -93,9 +101,10 @@ Preferences.propTypes = {
 Preferences.prototype.linkState = linkState
 
 function remap (state) {
-  let { folders, status } = state
+  let { user, folders, status } = state
 
   return {
+    user,
     folders,
     status
   }

lib/dataStore.js

@@ -1,4 +1,6 @@
 import keygen from 'boost/keygen'
+import _ from 'lodash'
+
 const electron = require('electron')
 const remote = electron.remote
 const jetpack = require('fs-jetpack')
@@ -10,15 +12,66 @@ function getLocalPath () {
   return path.join(remote.app.getPath('userData'), 'local.json')
 }
 
+function forgeInitialRepositories () {
+  return [{
+    key: keygen(),
+    name: 'local',
+    type: 'userData',
+    user: {
+      name: remote.getGlobal('process').env.USER
+    }
+  }]
+}
+
+function getRepositories () {
+  let raw = localStorage.getItem('repositories')
+  try {
+    let parsed = JSON.parse(raw)
+    if (!_.isArray(parsed)) {
+      throw new Error('repositories data is currupte. re-init data.')
+    }
+    return parsed
+  } catch (e) {
+    console.log(e)
+    let newRepos = forgeInitialRepositories()
+    saveRepositories(newRepos)
+    return newRepos
+  }
+}
+
+function saveRepositories (repos) {
+  localStorage.setItem('repositories', JSON.stringify(repos))
+}
+
+export function getUser (repoName) {
+  if (repoName == null) {
+    return getRepositories()[0]
+  }
+  return null
+}
+
+export function saveUser (repoName, user) {
+  let repos = getRepositories()
+  if (repoName == null) {
+    Object.assign(repos[0].user, user)
+  }
+  saveRepositories(repos)
+}
+
 export function init () {
-  console.log('initialize data store')
+  // set repositories info
+  getRepositories()
+
+  // set local.json
   let data = jetpack.read(getLocalPath(), 'json')
 
   if (data == null) {
+    // for 0.4.1 -> 0.4.2
     if (localStorage.getItem('local') != null) {
       data = JSON.parse(localStorage.getItem('local'))
       jetpack.write(getLocalPath(), data)
       localStorage.removeItem('local')
+      console.log('update 0.4.1 => 0.4.2')
       return
     }
 
@@ -70,6 +123,8 @@ export default (function () {
     init()
   }
   return {
+    getUser,
+    saveUser,
     init,
     getData,
     setArticles,

lib/keygen.js

@@ -2,6 +2,6 @@ var crypto = require('crypto')
 
 module.exports = function () {
   var shasum = crypto.createHash('sha1')
-  shasum.update(((new Date()).getTime()).toString())
+  shasum.update(((new Date()).getTime() + Math.round(Math.random()*1000)).toString())
   return shasum.digest('hex')
 }

lib/reducer.js

@@ -12,6 +12,9 @@ import {
   UNLOCK_STATUS,
   TOGGLE_TUTORIAL,
 
+  // user
+  USER_UPDATE,
+
   // Article action type
   ARTICLE_UPDATE,
   ARTICLE_DESTROY,
@@ -42,10 +45,22 @@ const initialStatus = {
 let data = dataStore.getData()
 let initialArticles = data.articles
 let initialFolders = data.folders
+let initialUser = dataStore.getUser().user
 
 let isStatusLocked = false
 let isCreatingNew = false
 
+function user (state = initialUser, action) {
+  switch (action.type) {
+    case USER_UPDATE:
+      let updated = Object.assign(state, action.data)
+      dataStore.saveUser(updated)
+      return updated
+    default:
+      return state
+  }
+}
+
 function folders (state = initialFolders, action) {
   state = state.slice()
   switch (action.type) {
@@ -250,6 +265,7 @@ function status (state = initialStatus, action) {
 }
 
 export default combineReducers({
+  user,
   folders,
   articles,
   status