Merge branch 'dev'

* dev:
  リアルタイム(SocketIO)実装 / Markdown style改善

Conflicts:
	package.json

browser/main/Components/AboutModal.jsx

@@ -1,6 +1,3 @@
-var remote = require('remote')
-var version = remote.getGlobal('version')
-
 var React = require('react/addons')
 
 var ExternalLink = require('../Mixins/ExternalLink')
@@ -19,8 +16,9 @@ module.exports = React.createClass({
     }
   },
   render: function () {
+    var version = global.version
     return (
-      <div className='AboutModal modal'>
+      <div className='PreferencesModal sideNavModal modal'>
         <div className='about1'>
           <img className='logo' src='resources/favicon-230x230.png'/>
           <div className='appInfo'>Boost {version == null || version.length === 0 ? 'DEV version' : 'v' + version}</div>

browser/main/Components/AddMemberModal.jsx

@@ -7,8 +7,6 @@ var Hq = require('../Services/Hq')
 
 var KeyCaster = require('../Mixins/KeyCaster')
 
-var UserStore = require('../Stores/UserStore')
-
 var getOptions = function (input, callback) {
   Hq.searchUser(input)
     .then(function (res) {
@@ -58,7 +56,6 @@ module.exports = React.createClass({
         })
         .then(function (res) {
           console.log(res.body)
-          UserStore.Actions.addMember(res.body)
           this.props.close()
         }.bind(this))
         .catch(function (err) {

browser/main/Components/CodeDeleteModal.jsx

@@ -25,7 +25,7 @@ module.exports = React.createClass({
   },
   submit: function () {
     var planet = this.props.planet
-    Hq.destroyCode(planet.userName, planet.name, this.props.code.localId)
+    Hq.destroyCode(planet.Owner.name, planet.name, this.props.code.localId)
       .then(function (res) {
         PlanetStore.Actions.destroyCode(res.body)
         this.props.close()

browser/main/Components/CodeForm.jsx

@@ -15,14 +15,14 @@ var getOptions = function (input, callback) {
   Hq.searchTag(input)
     .then(function (res) {
       callback(null, {
-          options: res.body.map(function (tag) {
+        options: res.body.map(function (tag) {
-            return {
+          return {
-              label: tag.name,
+            label: tag.name,
-              value: tag.name
+            value: tag.name
-            }
+          }
-          }),
+        }),
-          complete: false
+        complete: false
-        })
+      })
     })
     .catch(function (err) {
       console.log(err)
@@ -88,18 +88,18 @@ module.exports = React.createClass({
       return tag.value
     })
     if (this.props.code == null) {
-      Hq.createCode(planet.userName, planet.name, this.state.code)
+      Hq.createCode(planet.Owner.name, planet.name, this.state.code)
         .then(function (res) {
           var code = res.body
           PlanetStore.Actions.updateCode(code)
           this.props.close()
-          this.props.transitionTo('codes', {userName: planet.userName, planetName: planet.name, localId: code.localId})
+          this.props.transitionTo('codes', {userName: planet.Owner.name, planetName: planet.name, localId: code.localId})
         }.bind(this))
         .catch(function (err) {
           console.error(err)
         })
     } else {
-      Hq.updateCode(planet.userName, planet.name, this.props.code.localId, this.state.code)
+      Hq.updateCode(planet.Owner.name, planet.name, this.props.code.localId, this.state.code)
         .then(function (res) {
           var code = res.body
           PlanetStore.Actions.updateCode(code)

browser/main/Components/EditProfileModal.jsx

@@ -69,7 +69,6 @@ module.exports = React.createClass({
     this.setState({
       passwordSubmitStatus: 'sending'
     }, function () {
-      console.log(this.state.password)
       Hq.changePassword(this.state.password)
         .then(function (res) {
           this.setState({
@@ -103,9 +102,9 @@ module.exports = React.createClass({
     }
 
     return (
-      <div className='EditProfileModal modal tabModal'>
+      <div className='EditProfileModal sideNavModal modal'>
         <div className='leftPane'>
-          <div className='tabLabel'>Edit profile</div>
+          <div className='modalLabel'>Edit profile</div>
           <div className='tabList'>
             <button className={this.state.currentTab === 'userInfo' ? 'active' : ''} onClick={this.selectTab('userInfo')}><i className='fa fa-user fa-fw'/> User Info</button>
             <button className={this.state.currentTab === 'password' ? 'active' : ''} onClick={this.selectTab('password')}><i className='fa fa-lock fa-fw'/> Password</button>
@@ -119,7 +118,7 @@ module.exports = React.createClass({
   },
   renderUserInfoTab: function () {
     return (
-      <div className='userInfoTab'>
+      <div className='userInfoTab tab'>
         <div className='formField'>
           <label>Profile Name</label>
           <input valueLink={this.linkState('user.profileName')}/>
@@ -142,18 +141,18 @@ module.exports = React.createClass({
   },
   renderPasswordTab: function () {
     return (
-      <div className='passwordTab'>
+      <div className='passwordTab tab'>
         <div className='formField'>
           <label>Current password</label>
-          <input valueLink={this.linkState('password.currentPassword')}/>
+          <input type='password' valueLink={this.linkState('password.currentPassword')}/>
         </div>
         <div className='formField'>
           <label>New password</label>
-          <input valueLink={this.linkState('password.newPassword')}/>
+          <input type='password' valueLink={this.linkState('password.newPassword')}/>
         </div>
         <div className='formField'>
           <label>Confirmation</label>
-          <input valueLink={this.linkState('password.passwordConfirmation')}/>
+          <input type='password' valueLink={this.linkState('password.passwordConfirmation')}/>
         </div>
 
         <div className='formConfirm'>

browser/main/Components/HomeNavigator.jsx

@@ -11,7 +11,7 @@ var Modal = require('../Mixins/Modal')
 
 var UserStore = require('../Stores/UserStore')
 
-var AboutModal = require('./AboutModal')
+var PreferencesModal = require('./PreferencesModal')
 var PlanetCreateModal = require('./PlanetCreateModal')
 var TeamCreateModal = require('./TeamCreateModal')
 var LogoutModal = require('./LogoutModal')
@@ -65,8 +65,8 @@ module.exports = React.createClass({
   openTeamCreateModal: function () {
     this.openModal(TeamCreateModal, {user: this.state.currentUser, transitionTo: this.transitionTo})
   },
-  openAboutModal: function () {
+  openPreferencesModal: function () {
-    this.openModal(AboutModal)
+    this.openModal(PreferencesModal)
   },
   openPlanetCreateModal: function () {
     this.openModal(PlanetCreateModal, {transitionTo: this.transitionTo})
@@ -94,15 +94,18 @@ module.exports = React.createClass({
     var params = this.getParams()
 
     if (this.state.currentUser == null) {
-      return (
+      return null
-        <div className='HomeNavigator'>
-        </div>
-      )
     }
 
-    var planets = (this.state.currentUser.Planets.concat(this.state.currentUser.Teams.reduce(function (planets, team) {
+    var planets = this.state.currentUser.Planets.map(function (planet) {
-      return team.Planets == null ? planets : planets.concat(team.Planets)
+      planet.userName = this.state.currentUser.name
-    }, []))).map(function (planet, index) {
+      return planet
+    }.bind(this)).concat(this.state.currentUser.Teams.reduce(function (_planets, team) {
+      return _planets.concat(team.Planets == null ? [] : team.Planets.map(function (planet) {
+        planet.userName = team.name
+        return planet
+      }))
+    }, [])).map(function (planet, index) {
       return (
         <li userName={planet.userName} planetName={planet.name} key={planet.id} className={params.userName === planet.userName && params.planetName === planet.name ? 'active' : ''}>
           <Link to='planet' params={{userName: planet.userName, planetName: planet.name}}>
@@ -168,7 +171,7 @@ module.exports = React.createClass({
 
         <ul className='controlGroup'>
           <li>
-            <button onClick={this.openAboutModal}><i className='fa fa-info-circle fa-fw'/> About this app</button>
+            <button onClick={this.openPreferencesModal}><i className='fa fa-gears fa-fw'/> Preferences</button>
           </li>
           <li>
             <button onClick={this.handleLogoutClick}><i className='fa fa-sign-out fa-fw'/> Log out</button>

browser/main/Components/LogoutModal.jsx

@@ -2,6 +2,8 @@
 
 var React = require('react')
 
+var socket = require('../Services/socket')
+
 var KeyCaster = require('../Mixins/KeyCaster')
 
 module.exports = React.createClass({
@@ -23,6 +25,8 @@ module.exports = React.createClass({
   logout: function () {
     localStorage.removeItem('currentUser')
     localStorage.removeItem('token')
+    socket.reconnect()
+
     this.props.transitionTo('login')
     this.props.close()
   },

browser/main/Components/NoteDeleteModal.jsx

@@ -25,7 +25,7 @@ module.exports = React.createClass({
   },
   submit: function () {
     var planet = this.props.planet
-    Hq.destroyNote(planet.userName, planet.name, this.props.note.localId)
+    Hq.destroyNote(planet.Owner.name, planet.name, this.props.note.localId)
       .then(function (res) {
         PlanetStore.Actions.destroyNote(res.body)
         this.props.close()

browser/main/Components/NoteForm.jsx

@@ -16,14 +16,14 @@ var getOptions = function (input, callback) {
   Hq.searchTag(input)
     .then(function (res) {
       callback(null, {
-          options: res.body.map(function (tag) {
+        options: res.body.map(function (tag) {
-            return {
+          return {
-              label: tag.name,
+            label: tag.name,
-              value: tag.name
+            value: tag.name
-            }
+          }
-          }),
+        }),
-          complete: false
+        complete: false
-        })
+      })
     })
     .catch(function (err) {
       console.log(err)
@@ -89,18 +89,18 @@ module.exports = React.createClass({
     })
 
     if (this.props.note == null) {
-      Hq.createNote(planet.userName, planet.name, this.state.note)
+      Hq.createNote(planet.Owner.name, planet.name, this.state.note)
         .then(function (res) {
           var note = res.body
           PlanetStore.Actions.updateNote(note)
           this.props.close()
-          this.props.transitionTo('notes', {userName: planet.userName, planetName: planet.name, localId: note.localId})
+          this.props.transitionTo('notes', {userName: planet.Owner.name, planetName: planet.name, localId: note.localId})
         }.bind(this))
         .catch(function (err) {
           console.error(err)
         })
     } else {
-      Hq.updateNote(planet.userName, planet.name, this.props.note.localId, this.state.note)
+      Hq.updateNote(planet.Owner.name, planet.name, this.props.note.localId, this.state.note)
         .then(function (res) {
           var note = res.body
           PlanetStore.Actions.updateNote(note)

browser/main/Components/PlanetArticleList.jsx

@@ -18,7 +18,6 @@ module.exports = React.createClass({
       return function (e) {
         var params = this.getParams()
 
-        document.getElementById('articleEditButton').focus()
         this.transitionTo('codes', {
           userName: params.userName,
           planetName: params.planetName,
@@ -31,7 +30,6 @@ module.exports = React.createClass({
       return function (e) {
         var params = this.getParams()
 
-        document.getElementById('articleEditButton').focus()
         this.transitionTo('notes', {
           userName: params.userName,
           planetName: params.planetName,

browser/main/Components/PlanetCreateModal.jsx

@@ -51,7 +51,7 @@ module.exports = React.createClass({
           PlanetStore.Actions.update(planet)
 
           if (this.props.transitionTo != null) {
-            this.props.transitionTo('planetHome', {userName: planet.userName, planetName: planet.name})
+            this.props.transitionTo('planetHome', {userName: planet.Owner.name, planetName: planet.name})
           }
 
           this.props.close()

browser/main/Components/PlanetHeader.jsx

@@ -46,7 +46,7 @@ module.exports = React.createClass({
   },
   render: function () {
     var currentPlanetName = this.props.currentPlanet.name
-    var currentUserName = this.props.currentPlanet.userName
+    var currentUserName = this.props.currentPlanet.Owner.name
 
     return (
       <div className='PlanetHeader'>

browser/main/Components/PlanetSettingModal.jsx

@@ -14,7 +14,9 @@ module.exports = React.createClass({
     planet: React.PropTypes.shape({
       name: React.PropTypes.string,
       public: React.PropTypes.bool,
-      userName: React.PropTypes.string
+      Owner: React.PropTypes.shape({
+        name: React.PropTypes.string
+      })
     })
   },
   getInitialState: function () {
@@ -59,7 +61,7 @@ module.exports = React.createClass({
     var planet = this.props.planet
 
     this.setState({profileFormStatus: 'sending', profileFormError: null}, function () {
-      Hq.updatePlanet(planet.userName, planet.name, this.state.planet)
+      Hq.updatePlanet(planet.Owner.name, planet.name, this.state.planet)
         .then(function (res) {
           var planet = res.body
           console.log(planet)
@@ -103,7 +105,7 @@ module.exports = React.createClass({
     var planet = this.props.planet
 
     this.setState({deleteSubmitStatus: 'sending'}, function () {
-      Hq.destroyPlanet(planet.userName, planet.name)
+      Hq.destroyPlanet(planet.Owner.name, planet.name)
         .then(function (res) {
           var planet = res.body
 
@@ -125,9 +127,9 @@ module.exports = React.createClass({
     content = this.state.currentTab === 'profile' ? this.renderPlanetProfileTab() : this.renderPlanetDeleteTab()
 
     return (
-      <div className='PlanetSettingModal modal tabModal'>
+      <div className='PlanetSettingModal sideNavModal modal'>
         <div className='leftPane'>
-          <h1 className='tabLabel'>Planet setting</h1>
+          <h1 className='modalLabel'>Planet setting</h1>
           <nav className='tabList'>
             <button onClick={this.activePlanetProfile} className={this.state.currentTab === 'profile' ? 'active' : ''}><i className='fa fa-globe fa-fw'/> Planet profile</button>
             <button onClick={this.activePlanetDelete} className={this.state.currentTab === 'delete' ? 'active' : ''}><i className='fa fa-trash fa-fw'/> Delete Planet</button>
@@ -142,7 +144,7 @@ module.exports = React.createClass({
   },
   renderPlanetProfileTab: function () {
     return (
-      <div className='planetProfileTab'>
+      <div className='planetProfileTab tab'>
         <div className='formField'>
           <label>Planet name </label>
           <input valueLink={this.linkState('planet.name')}/>
@@ -166,12 +168,12 @@ module.exports = React.createClass({
     )
   },
   renderPlanetDeleteTab: function () {
-    var disabled = !this.state.deleteConfirmation.match(new RegExp('^' + this.props.planet.userName + '/' + this.props.planet.name + '$'))
+    var disabled = !this.state.deleteConfirmation.match(new RegExp('^' + this.props.planet.Owner.name + '/' + this.props.planet.name + '$'))
 
     return (
-      <div className='planetDeleteTab'>
+      <div className='planetDeleteTab tab'>
-        <p>Are you sure to destroy <strong>'{this.props.planet.userName + '/' + this.props.planet.name}'</strong>?</p>
+        <p>Are you sure to destroy <strong>'{this.props.planet.Owner.name + '/' + this.props.planet.name}'</strong>?</p>
-        <p>If you are sure, write <strong>'{this.props.planet.userName + '/' + this.props.planet.name}'</strong> to input below and click <strong>'{this.state.randomDeleteText}'</strong> button.</p>
+        <p>If you are sure, write <strong>'{this.props.planet.Owner.name + '/' + this.props.planet.name}'</strong> to input below and click <strong>'{this.state.randomDeleteText}'</strong> button.</p>
         <input valueLink={this.linkState('deleteConfirmation')} placeholder='userName/planetName'/>
         <div className='formConfirm'>
           <button disabled={disabled} onClick={this.handleDeletePlanetClick}>{this.state.randomDeleteText}</button>

browser/main/Components/PreferencesModal.jsx

@@ -0,0 +1,112 @@
+var ipc = require('ipc')
+var remote = require('remote')
+
+var React = require('react/addons')
+
+var LinkedState = require('../Mixins/LinkedState')
+var ExternalLink = require('../Mixins/ExternalLink')
+var KeyCaster = require('../Mixins/KeyCaster')
+
+module.exports = React.createClass({
+  mixins: [LinkedState, ExternalLink, KeyCaster('aboutModal')],
+  propTypes: {
+    close: React.PropTypes.func
+  },
+  getInitialState: function () {
+    var keymap = remote.getGlobal('keymap')
+    console.log(keymap)
+    return {
+      currentTab: 'settings',
+      keymap: keymap
+    }
+  },
+  onKeyCast: function (e) {
+    switch (e.status) {
+      case 'closeModal':
+        this.props.close()
+        break
+    }
+  },
+  activeSettings: function () {
+    this.setState({currentTab: 'settings'})
+  },
+  activeAbout: function () {
+    this.setState({currentTab: 'about'})
+  },
+  saveKeymap: function () {
+    ipc.send('hotkeyUpdated', JSON.stringify(this.state.keymap))
+  },
+  render: function () {
+    var content = this.state.currentTab === 'settings' ? this.renderSettingsTab() : this.renderAboutTab()
+
+    return (
+      <div className='PreferencesModal sideNavModal modal'>
+        <div className='leftPane'>
+          <h1 className='modalLabel'>Preferences</h1>
+          <nav className='tabList'>
+            <button onClick={this.activeSettings} className={this.state.currentTab === 'settings' ? 'active' : ''}><i className='fa fa-gear fa-fw'/> Settings</button>
+            <button onClick={this.activeAbout} className={this.state.currentTab === 'about' ? 'active' : ''}><i className='fa fa-info-circle fa-fw'/> About this app</button>
+          </nav>
+        </div>
+        <div className='rightPane'>
+          {content}
+        </div>
+      </div>
+    )
+  },
+  renderSettingsTab: function () {
+    return (
+      <div className='settingsTab tab'>
+        <div className='categoryLabel'>Hotkey</div>
+        <div className='formField'>
+          <label>Toggle finder</label>
+          <input valueLink={this.linkState('keymap.toggleFinder')}/>
+        </div>
+        <div className='formConfirm'>
+          <button onClick={this.saveKeymap}>Save</button>
+        </div>
+        <div className='example'>
+          <h3>Example</h3>
+          <ul>
+            <li><code>0</code> to <code>9</code></li>
+            <li><code>A</code> to <code>Z</code></li>
+            <li><code>F1</code> to <code>F24</code></li>
+            <li>Punctuations like <code>~</code>, <code>!</code>, <code>@</code>, <code>#</code>, <code>$</code>, etc.</li>
+            <li><code>Plus</code></li>
+            <li><code>Space</code></li>
+            <li><code>Backspace</code></li>
+            <li><code>Delete</code></li>
+            <li><code>Insert</code></li>
+            <li><code>Return</code> (or <code>Enter</code> as alias)</li>
+            <li><code>Up</code>, <code>Down</code>, <code>Left</code> and <code>Right</code></li>
+            <li><code>Home</code> and <code>End</code></li>
+            <li><code>PageUp</code> and <code>PageDown</code></li>
+            <li><code>Escape</code> (or <code>Esc</code> for short)</li>
+            <li><code>VolumeUp</code>, <code>VolumeDown</code> and <code>VolumeMute</code></li>
+            <li><code>MediaNextTrack</code>, <code>MediaPreviousTrack</code>, <code>MediaStop</code> and <code>MediaPlayPause</code></li>
+          </ul>
+        </div>
+      </div>
+    )
+  },
+  renderAboutTab: function () {
+    var version = global.version
+    return (
+      <div className='aboutTab tab'>
+        <div className='about1'>
+          <img className='logo' src='resources/favicon-230x230.png'/>
+          <div className='appInfo'>Boost {version == null || version.length === 0 ? 'DEV version' : 'v' + version}</div>
+        </div>
+
+        <div className='about2'>
+          <div className='externalLabel'>External links</div>
+          <ul className='externalList'>
+            <li><a onClick={this.openExternal} href='http://b00st.io'>Boost Homepage <i className='fa fa-external-link'/></a></li>
+            <li><a onClick={this.openExternal} href='http://boostio.github.io/regulations.html'>Regulation <i className='fa fa-external-link'/></a></li>
+            <li><a onClick={this.openExternal} href='http://boostio.github.io/privacypolicies.html'>Private policy <i className='fa fa-external-link'/></a></li>
+          </ul>
+        </div>
+      </div>
+    )
+  }
+})

browser/main/Components/TeamCreateModal.jsx

@@ -3,6 +3,7 @@
 var React = require('react/addons')
 
 var Hq = require('../Services/Hq')
+var socket = require('../Services/socket')
 
 var LinkedState = require('../Mixins/LinkedState')
 var KeyCaster = require('../Mixins/KeyCaster')
@@ -48,6 +49,7 @@ module.exports = React.createClass({
 
           currentUser.Teams.push(team)
           localStorage.setItem('currentUser', JSON.stringify(currentUser))
+          socket.reconnect(currentUser)
           UserStore.Actions.update(currentUser)
 
           if (this.props.transitionTo != null) {

browser/main/Components/TeamSettingsModal.jsx

@@ -43,12 +43,9 @@ module.exports = React.createClass({
     close: React.PropTypes.func
   },
   getInitialState: function () {
-    var team = this.props.team
     return {
       currentTab: 'teamInfo',
-      team: {
+      team: this.props.team,
-        profileName: team.profileName
-      },
       userSubmitStatus: null,
       member: {
         name: '',
@@ -65,17 +62,10 @@ module.exports = React.createClass({
     }
   },
   onUserChange: function (res) {
-    var member
     switch (res.status) {
-      case 'memberAdded':
+      case 'userUpdated':
-        member = res.data
+        var user = res.data
-        if (member.TeamMember.TeamId === this.props.team.id) {
+        if (user.id === this.props.team.id) {
-          this.forceUpdate()
-        }
-        break
-      case 'memberRemoved':
-        member = res.data
-        if (member.TeamMember.TeamId === this.props.team.id) {
           this.forceUpdate()
         }
         break
@@ -116,8 +106,7 @@ module.exports = React.createClass({
           role: this.state.member.role
         })
         .then(function (res) {
-          UserStore.Actions.addMember(res.body)
+          this.setState({updatingMember: false, team: res.body})
-          this.setState({updatingMember: false})
         }.bind(this))
         .catch(function (err) {
           console.error(err)
@@ -135,8 +124,7 @@ module.exports = React.createClass({
             role: role
           })
           .then(function (res) {
-            UserStore.Actions.addMember(res.body)
+            this.setState({updatingMember: false, team: res.body})
-            this.setState({updatingMember: false})
           }.bind(this))
           .catch(function (err) {
             console.error(err)
@@ -153,8 +141,7 @@ module.exports = React.createClass({
             userName: memberName
           })
           .then(function (res) {
-            UserStore.Actions.removeMember(res.body)
+            this.setState({updatingMember: false, team: res.body})
-            this.setState({updatingMember: false})
           }.bind(this))
           .catch(function (err) {
             console.error(err)
@@ -176,9 +163,9 @@ module.exports = React.createClass({
     }
 
     return (
-      <div className='TeamSettingsModal modal tabModal'>
+      <div className='TeamSettingsModal sideNavModal modal'>
         <div className='leftPane'>
-          <div className='tabLabel'>Team settings</div>
+          <div className='modalLabel'>Team settings</div>
           <div className='tabList'>
             <button className={this.state.currentTab === 'teamInfo' ? 'active' : ''} onClick={this.selectTab('teamInfo')}><i className='fa fa-info-circle fa-fw'/> Team Info</button>
             <button className={this.state.currentTab === 'members' ? 'active' : ''} onClick={this.selectTab('members')}><i className='fa fa-users fa-fw'/> Members</button>
@@ -192,7 +179,7 @@ module.exports = React.createClass({
   },
   renderTeamInfoTab: function () {
     return (
-      <div className='userInfoTab'>
+      <div className='userInfoTab tab'>
         <div className='formField'>
           <label>Profile Name</label>
           <input valueLink={this.linkState('team.profileName')}/>
@@ -212,7 +199,7 @@ module.exports = React.createClass({
   renderMembersTab: function () {
     var currentUser = JSON.parse(localStorage.getItem('currentUser'))
 
-    var members = this.props.team.Members.map(function (member) {
+    var members = this.state.team.Members.map(function (member) {
       var isCurrentUser = currentUser.id === member.id
       return (
         <tr>
@@ -239,7 +226,7 @@ module.exports = React.createClass({
     var belowLimit = members.length < 5
 
     return (
-      <div className='membersTab'>
+      <div className='membersTab tab'>
         <table className='memberTable'>
           <thead>
             <tr>

browser/main/Containers/LoginContainer.jsx

@@ -6,6 +6,7 @@ var Link = ReactRouter.Link
 var AuthFilter = require('../Mixins/AuthFilter')
 var LinkedState = require('../Mixins/LinkedState')
 var Hq = require('../Services/Hq')
+var socket = require('../Services/socket')
 
 module.exports = React.createClass({
   mixins: [LinkedState, ReactRouter.Navigation, AuthFilter.OnlyGuest],
@@ -47,6 +48,7 @@ module.exports = React.createClass({
         .then(function (res) {
           localStorage.setItem('token', res.body.token)
           localStorage.setItem('currentUser', JSON.stringify(res.body.user))
+          socket.reconnect()
 
           this.transitionTo('userHome', {userName: res.body.user.name})
         }.bind(this))

browser/main/Containers/MainContainer.jsx

@@ -9,6 +9,7 @@ var Navigation = ReactRouter.Navigation
 var State = ReactRouter.State
 
 var Hq = require('../Services/Hq')
+var socket = require('../Services/socket')
 
 var Modal = require('../Mixins/Modal')
 
@@ -17,7 +18,7 @@ var UserStore = require('../Stores/UserStore')
 var ContactModal = require('../Components/ContactModal')
 
 function fetchPlanet (userName, planetName) {
-  Hq.fetchPlanet(userName, planetName)
+  return Hq.fetchPlanet(userName, planetName)
     .then(function (res) {
       var planet = res.body
 
@@ -29,8 +30,9 @@ function fetchPlanet (userName, planetName) {
         note.type = 'note'
       })
 
-      console.log('planet-' + planet.id + ' fetched!')
       localStorage.setItem('planet-' + planet.id, JSON.stringify(planet))
+
+      return planet
     })
     .catch(function (err) {
       console.error(err)
@@ -55,22 +57,20 @@ module.exports = React.createClass({
         return
       } else {
         this.transitionTo('home')
-        return
       }
     }
 
     Hq.getUser()
       .then(function (res) {
         var user = res.body
-        localStorage.setItem('currentUser', JSON.stringify(user))
         UserStore.Actions.update(user)
 
         user.Planets.forEach(function (planet) {
-          fetchPlanet(planet.userName, planet.name)
+          fetchPlanet(user.name, planet.name)
         })
         user.Teams.forEach(function (team) {
           team.Planets.forEach(function (planet) {
-            fetchPlanet(planet.userName, planet.name)
+            fetchPlanet(team.name, planet.name)
           })
         })
       })

browser/main/Containers/PlanetContainer.jsx

@@ -41,10 +41,10 @@ module.exports = React.createClass({
       var planet = this.state.planet
       switch (article.type) {
         case 'code':
-          this.transitionTo('codes', {userName: planet.userName, planetName: planet.name, localId: article.localId})
+          this.transitionTo('codes', {userName: planet.Owner.name, planetName: planet.name, localId: article.localId})
           break
         case 'note':
-          this.transitionTo('notes', {userName: planet.userName, planetName: planet.name, localId: article.localId})
+          this.transitionTo('notes', {userName: planet.Owner.name, planetName: planet.name, localId: article.localId})
           break
       }
     }
@@ -55,7 +55,7 @@ module.exports = React.createClass({
       return
     }
 
-    if (nextProps.params.userName !== this.state.planet.userName || nextProps.params.planetName !== this.state.planet.name) {
+    if (nextProps.params.userName !== this.state.planet.Owner.name || nextProps.params.planetName !== this.state.planet.name) {
       this.setState({
         planet: null
       }, function () {
@@ -96,14 +96,14 @@ module.exports = React.createClass({
           if (this.state.planet.name === planet.name) {
             this.setState({planet: planet})
           } else {
-            this.transitionTo('planetHome', {userName: planet.userName, planetName: planet.name})
+            this.transitionTo('planetHome', {userName: planet.Owner.name, planetName: planet.name})
           }
         }
         break
       case 'destroyed':
         planet = res.data
         if (this.state.planet.id === planet.id) {
-          this.transitionTo('userHome', {userName: this.state.planet.userName})
+          this.transitionTo('userHome', {userName: this.state.planet.Owner.name})
         }
         break
       case 'codeUpdated':

browser/main/Containers/SignupContainer.jsx

@@ -8,6 +8,7 @@ var AuthFilter = require('../Mixins/AuthFilter')
 var LinkedState = require('../Mixins/LinkedState')
 var ExternalLink = require('../Mixins/ExternalLink')
 var Hq = require('../Services/Hq')
+var socket = require('../Services/socket')
 
 module.exports = React.createClass({
   mixins: [LinkedState, ReactRouter.Navigation, AuthFilter.OnlyGuest, ExternalLink],
@@ -33,6 +34,7 @@ module.exports = React.createClass({
         .then(function (res) {
           localStorage.setItem('token', res.body.token)
           localStorage.setItem('currentUser', JSON.stringify(res.body.user))
+          socket.reconnect()
 
           this.transitionTo('userHome', {userName: res.body.user.name})
         }.bind(this))

browser/main/Containers/UserContainer.jsx

@@ -230,7 +230,7 @@ module.exports = React.createClass({
     var userPlanets = user.Planets.map(function (planet) {
       return (
         <li key={'planet-' + planet.id}>
-          <Link to='planet' params={{userName: planet.userName, planetName: planet.name}}>{planet.userName}/{planet.name}</Link>
+          <Link to='planet' params={{userName: user.name, planetName: planet.name}}>{user.name}/{planet.name}</Link>
           &nbsp;{!planet.public ? (<i className='fa fa-lock'/>) : null}
         </li>
       )
@@ -288,7 +288,7 @@ module.exports = React.createClass({
     var userPlanets = user.Planets.map(function (planet) {
       return (
         <li key={'planet-' + planet.id}>
-          <Link to='planet' params={{userName: planet.userName, planetName: planet.name}}>{planet.userName}/{planet.name}</Link>
+          <Link to='planet' params={{userName: user.name, planetName: planet.name}}>{user.name}/{planet.name}</Link>
           &nbsp;{!planet.public ? (<i className='fa fa-lock'/>) : null}
         </li>
       )
@@ -311,7 +311,7 @@ module.exports = React.createClass({
       var planets = (team.Planets == null ? [] : team.Planets).map(function (planet) {
         return (
           <li key={'planet-' + planet.id}>
-            <Link to='planet' params={{userName: planet.userName, planetName: planet.name}}>{planet.userName}/{planet.name}</Link>
+            <Link to='planet' params={{userName: team.name, planetName: planet.name}}>{team.name}/{planet.name}</Link>
             &nbsp;{!planet.public ? (<i className='fa fa-lock'/>) : null}
           </li>
         )

browser/main/Services/socket.js

@@ -0,0 +1,64 @@
+/* global localStorage */
+
+var config = require('../../../config')
+var UserStore = require('../Stores/UserStore')
+var PlanetStore = require('../Stores/PlanetStore')
+
+var io = require('socket.io-client')(config.apiUrl)
+
+io.on('connected', function (data) {
+  console.log('connected by WS')
+  reconnect()
+})
+
+io.on('userUpdated', function (data) {
+  console.log('userUpdated')
+  UserStore.Actions.update(data)
+})
+
+// Planet
+io.on('planetUpdated', function (data) {
+  console.log('planetUpdated')
+  PlanetStore.Actions.update(data)
+})
+
+io.on('planetDestroyed', function (data) {
+  console.log('planetDestroyed')
+  PlanetStore.Actions.destroy(data)
+})
+
+// Article
+io.on('codeUpdated', function (data) {
+  console.log('codeUpdated')
+  PlanetStore.Actions.updateCode(data)
+})
+io.on('codeDestroyed', function (data) {
+  console.log('codeDestroyed')
+  PlanetStore.Actions.destroyCode(data)
+})
+io.on('noteUpdated', function (data) {
+  console.log('noteUpdated')
+  PlanetStore.Actions.updateNote(data)
+})
+io.on('noteDestroyed', function (data) {
+  console.log('noteDestroyed')
+  PlanetStore.Actions.destroyNote(data)
+})
+
+var reconnect = function (currentUser) {
+  if (currentUser == null) currentUser = JSON.parse(localStorage.getItem('currentUser'))
+  if (currentUser != null) {
+    var rooms = ['user:' + currentUser.id].concat(currentUser.Teams.map(function (team) {
+      return 'user:' + team.id
+    }))
+
+    io.emit('room:sync', {rooms: rooms})
+  } else {
+    io.emit('room:sync', {rooms: []})
+  }
+}
+
+module.exports = {
+  io: io,
+  reconnect: reconnect
+}

browser/main/Stores/PlanetStore.js

@@ -19,39 +19,51 @@ module.exports = Reflux.createStore({
   mixins: [Helper],
   listenables: [actions],
   Actions: actions,
+  /*
+    Planet must be updated like below
+    Planet
+      Codes
+        Tags
+        User
+      Notes
+        Tags
+        User
+      Owner
+  */
   onUpdate: function (planet) {
     // Copy the planet object
     var aPlanet = Object.assign({}, planet)
     delete aPlanet.Codes
     delete aPlanet.Notes
+    delete aPlanet.Owner
 
     // Check if the planet should be updated to currentUser
     var currentUser = JSON.parse(localStorage.getItem('currentUser'))
 
-    var ownedByCurrentUser = currentUser.id === aPlanet.OwnerId
+    var currentUserMustBeUpdated = false
 
+    var ownedByCurrentUser = currentUser.id === aPlanet.OwnerId
     if (ownedByCurrentUser) {
       currentUser.Planets = this.updateItemToTargetArray(aPlanet, currentUser.Planets)
-    }
+      currentUserMustBeUpdated = true
-
+    } else {
-    if (!ownedByCurrentUser) {
       var team = null
-      currentUser.Teams.some(function (_team) {
+      if (currentUser.Teams.some(function (_team) {
         if (_team.id === aPlanet.OwnerId) {
           team = _team
           return true
         }
-        return
+        return false
-      })
+      })) {
-
-      if (team) {
         team.Planets = this.updateItemToTargetArray(aPlanet, team.Planets)
+        currentUserMustBeUpdated = true
       }
     }
 
     // Update currentUser
-    localStorage.setItem('currentUser', JSON.stringify(currentUser))
+    if (currentUserMustBeUpdated) {
-    UserStore.Actions.update(currentUser)
+      UserStore.Actions.update(currentUser)
+    }
 
     planet.Codes.forEach(function (code) {
       code.type = 'code'

browser/main/Stores/UserStore.js

@@ -4,18 +4,19 @@ var Reflux = require('reflux')
 
 var actions = Reflux.createActions([
   'update',
-  'destroy',
+  'destroy'
-  'addMember',
-  'removeMember'
 ])
 
 module.exports = Reflux.createStore({
   listenables: [actions],
   onUpdate: function (user) {
-    var currentUser = JSON.parse(localStorage.getItem('currentUser'))
+    if (this.socket == null) this.socket = require('../Services/socket')
 
+    var currentUser = JSON.parse(localStorage.getItem('currentUser'))
     if (currentUser.id === user.id) {
       localStorage.setItem('currentUser', JSON.stringify(user))
+
+      this.socket.reconnect(user)
     }
 
     if (user.userType === 'team') {
@@ -53,17 +54,5 @@ module.exports = Reflux.createStore({
       data: user
     })
   },
-  onAddMember: function (member) {
-    this.trigger({
-      status: 'memberAdded',
-      data: member
-    })
-  },
-  onRemoveMember: function (member) {
-    this.trigger({
-      status: 'memberRemoved',
-      data: member
-    })
-  },
   Actions: actions
 })

browser/main/index.electron.html

@@ -87,10 +87,11 @@
   </script>
   <script src="../ace/src-min/ace.js"></script>
   <script>
-
+    var version = require('remote').require('app').getVersion()
-    var version = require('remote').getGlobal('version')
+    global.version = version
     document.title = 'Boost ' + ((version == null || version.length === 0) ? 'DEV version' : 'v' + version)
     require('../electron-stylus')(__dirname + '/../styles/main/index.styl', 'mainCss')
+    // require('../electron-stylus')(__dirname + '/../styles/main/index.styl')
     require('node-jsx').install({ harmony: true, extension: '.jsx' })
     require('./index.jsx')
   </script>

browser/styles/mixins/marked.styl

@@ -5,28 +5,29 @@ marked()
     margin 15px 0
   h1
     font-size 2em
-    margin 0 auto 0.67em
+    border-bottom solid 2px borderColor
+    margin 0.67em auto
   h2
     font-size 1.5em
-    margin 0 auto 0.83em
+    margin 0.83em auto
   h3
     font-size 1.17em
-    margin 0 auto 1em
+    margin 1em auto
   h4
     font-size 1em
-    margin 0 auto 1.33em
+    margin 1.33em auto
   h5
     font-size 0.83em
-    margin 0 auto 1.67em
+    margin 1.67em auto
   h6
     font-size 0.67em
     margin 2.33em auto
   h1, h2, h3, h4, h5, h6
-    font-weight 400
+    font-weight 700
-    line-height 1.4em
+    line-height 1.8em
   p
-    line-height 1.4em
+    line-height 1.8em
-    margin-bottom 15px
+    margin-bottom 25px
   img
     max-width 100%
   strong
@@ -42,6 +43,7 @@ marked()
   ul
     list-style-type disc
     padding-left 35px
+    margin-bottom 25px
     li
       display list-item
       margin 15px 0
@@ -52,6 +54,7 @@ marked()
   ol
     list-style-type decimal
     padding-left 35px
+    margin-bottom 25px
     li
       display list-item
       margin 15px 0
@@ -69,7 +72,7 @@ marked()
     border solid 1px borderColor
     border-radius 5px
     overflow-x auto
-    margin-bottom 15px
+    margin-bottom 25px
     background-color #F6F6F6
     &>code
       padding 0

browser/styles/shared/modal.styl

@@ -32,14 +32,14 @@
       .modal-control
         float right
 
-  .tabModal
+  .sideNavModal
     height 500px
     .leftPane
       absolute top bottom left
       width 175px
       padding 20px
       border-right solid 1px borderColor
-      .tabLabel
+      .modalLabel
         font-size 1.5em
         margin-top 25px
         margin-bottom 35px
@@ -57,9 +57,7 @@
       left 175px
       padding 15px
       overflow-y auto
-
+    .tab
-  .EditProfileModal, .PlanetSettingModal, .TeamSettingsModal
-    .userInfoTab, .passwordTab, .planetProfileTab, .userInfoTab, .membersTab
       padding-top 45px
       .formField
         position relative
@@ -111,6 +109,33 @@
           alertSuccess()
         .alertError
           alertError()
+  .PreferencesModal
+    .settingsTab
+      .categoryLabel
+        font-size 1.5em
+        margin-bottom 25px
+      .example
+        marked()
+    .aboutTab
+      padding-top 30px
+      .about1
+        margin-bottom 25px
+        .logo
+          display block
+          margin 0 auto
+        .appInfo
+          font-size 1.5em
+          text-align center
+      .about2
+        width 200px
+        margin 0 auto
+        .externalLabel
+          font-size 1.2em
+          margin-bottom 15px
+        .externalList
+          li
+            margin-bottom 15px
+  .PlanetSettingModal
     .planetDeleteTab
       padding-top 65px
       p
@@ -153,6 +178,7 @@
           alertSuccess()
         .alertError
           alertError()
+  .TeamSettingsModal
     .membersTab
       .memberTable
         width 100%
@@ -262,25 +288,6 @@
     border-radius 5px
     marked()
 
-  .AboutModal
-    width 320px
-    .about1
-      margin-bottom 25px
-      .logo
-        display block
-        margin 0 auto
-      .appInfo
-        font-size 1.5em
-        text-align center
-    .about2
-      width 200px
-      margin 0 auto
-      .externalLabel
-        font-size 1.2em
-        margin-bottom 15px
-      .externalList
-        li
-          margin-bottom 15px
 
   .PlanetCreateModal.modal, .TeamCreateModal.modal, .AddMemberModal.modal
     padding 60px 0

config.js

@@ -1,4 +1,5 @@
 module.exports = {
-  apiUrl: 'http://codexen-server-dev2.elasticbeanstalk.com/'
+  // apiUrl: 'https://api.b00st.io/'
+  apiUrl: 'https://api2.b00st.io/'
   // apiUrl: 'http://localhost:8000/'
 }

main.js

@@ -4,6 +4,7 @@ var Menu = require('menu')
 var MenuItem = require('menu-item')
 var Tray = require('tray')
 var ipc = require('ipc')
+var jetpack = require('fs-jetpack')
 
 require('crash-reporter').start()
 
@@ -19,7 +20,6 @@ var update = null
 // })
 
 var version = app.getVersion()
-global.version = version
 var versionText = (version == null || version.length === 0) ? 'DEV version' : 'v' + version
 var nn = require('node-notifier')
 var autoUpdater = require('auto-updater')
@@ -143,12 +143,49 @@ app.on('ready', function () {
   popUpWindow.setVisibleOnAllWorkspaces(true)
 
   var globalShortcut = require('global-shortcut')
+  console.log('jetpack launch')
+  var userDataPath = app.getPath('userData')
+  if (!jetpack.cwd(userDataPath).exists('keymap.json')) {
+    jetpack.cwd(userDataPath).file('keymap.json', {content: '{}'})
+  }
+  try {
+    global.keymap = JSON.parse(jetpack.cwd(userDataPath).read('keymap.json', 'utf-8'))
+  } catch (err) {
+    jetpack.cwd(userDataPath).file('keymap.json', {content: '{}'})
+    global.keymap = {}
+  }
+  if (global.keymap.toggleFinder == null) global.keymap.toggleFinder = 'ctrl+tab+shift'
+  var toggleFinderKey = global.keymap.toggleFinder
 
-  globalShortcut.register('ctrl+tab+shift', function () {
+  try {
-    if (mainWindow != null && !mainWindow.isFocused()) {
+    globalShortcut.register(toggleFinderKey, function () {
-      mainWindow.hide()
+      if (mainWindow != null && !mainWindow.isFocused()) {
+        mainWindow.hide()
+      }
+      popUpWindow.show()
+    })
+  } catch (err) {
+    console.log(err.name)
+  }
+
+  ipc.on('hotkeyUpdated', function (event, newKeymap) {
+    console.log('got new keymap')
+    console.log(newKeymap)
+    globalShortcut.unregisterAll()
+    global.keymap = JSON.parse(newKeymap)
+    jetpack.cwd(userDataPath).file('keymap.json', {content: JSON.stringify(global.keymap)})
+
+    var toggleFinderKey = global.keymap.toggleFinder != null ? global.keymap.toggleFinder : 'ctrl+tab+shift'
+    try {
+      globalShortcut.register(toggleFinderKey, function () {
+        if (mainWindow != null && !mainWindow.isFocused()) {
+          mainWindow.hide()
+        }
+        popUpWindow.show()
+      })
+    } catch (err) {
+      console.log(err.name)
     }
-    popUpWindow.show()
   })
 
   global.hideFinder = function () {

modules/menu-template.js

@@ -19,7 +19,7 @@ module.exports = [
         type: 'separator'
       },
       {
-        label: 'Hide Electron',
+        label: 'Hide Boost',
         accelerator: 'Command+H',
         selector: 'hide:'
       },
@@ -89,13 +89,13 @@ module.exports = [
         click: function () {
           BrowserWindow.getFocusedWindow().reload()
         }
-      // },
+      },
-      // {
+      {
-      //   label: 'Toggle DevTools',
+        label: 'Toggle DevTools',
-      //   accelerator: 'Alt+Command+I',
+        accelerator: 'Alt+Command+I',
-      //   click: function () {
+        click: function () {
-      //     BrowserWindow.getFocusedWindow().toggleDevTools()
+          BrowserWindow.getFocusedWindow().toggleDevTools()
-      //   }
+        }
       }
     ]
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "boost",
-  "version": "0.2.8",
+  "version": "0.3.0",
   "description": "Boost App",
   "main": "main.js",
   "scripts": {
@@ -32,6 +32,7 @@
   "homepage": "https://github.com/Rokt33r/codexen-app#readme",
   "dependencies": {
     "font-awesome": "^4.3.0",
+    "fs-jetpack": "^0.7.0",
     "markdown-it": "^4.3.1",
     "md5": "^2.0.0",
     "moment": "^2.10.3",