on Refactor... #2

browser/main/Components/CodeEditor.jsx

@@ -20,6 +20,8 @@ module.exports = React.createClass({
     var session = editor.getSession()
     if (this.props.mode != null && this.props.mode.length > 0) {
       session.setMode('ace/mode/' + this.props.mode)
+    } else {
+      session.setMode('ace/mode/text')
     }
     session.setUseSoftTabs(true)
     session.setOption('useWorker', false)
@@ -40,7 +42,12 @@ module.exports = React.createClass({
       this.state.editor.clearSelection()
     }
     if (prevProps.mode !== this.props.mode) {
-      this.state.editor.getSession().setMode('ace/mode/' + this.props.mode)
+      var session = this.state.editor.getSession()
+      if (this.props.mode != null && this.props.mode.length > 0) {
+        session.setMode('ace/mode/' + this.props.mode)
+      } else {
+        session.setMode('ace/mode/text')
+      }
     }
   },
   render: function () {

browser/main/Components/CodeViewer.jsx

@@ -21,6 +21,8 @@ module.exports = React.createClass({
     var session = editor.getSession()
     if (this.props.mode != null && this.props.mode.length > 0) {
       session.setMode('ace/mode/' + this.props.mode)
+    } else {
+      session.setMode('ace/mode/text')
     }
     session.setUseSoftTabs(true)
     session.setOption('useWorker', false)
@@ -34,7 +36,12 @@ module.exports = React.createClass({
       this.state.editor.clearSelection()
     }
     if (prevProps.mode !== this.props.mode) {
-      this.state.editor.getSession().setMode('ace/mode/' + this.props.mode)
+      var session = this.state.editor.getSession()
+      if (this.props.mode != null && this.props.mode.length > 0) {
+        session.setMode('ace/mode/' + this.props.mode)
+      } else {
+        session.setMode('ace/mode/text')
+      }
     }
   },
   render: function () {

browser/main/Components/HomeNavigator.jsx

@@ -13,6 +13,7 @@ var UserStore = require('../Stores/UserStore')
 
 var PreferencesModal = require('./PreferencesModal')
 var PlanetCreateModal = require('./PlanetCreateModal')
+var TeamCreateModal = require('./TeamCreateModal')
 var ProfileImage = require('./ProfileImage')
 
 module.exports = React.createClass({
@@ -32,8 +33,11 @@ module.exports = React.createClass({
         break
     }
   },
+  openTeamCreateModal: function () {
+    this.openModal(TeamCreateModal, {user: this.state.currentUser, transitionTo: this.transitionTo})
+  },
   openPreferencesModal: function () {
-    this.openModal(PreferencesModal)
+    this.openModal(PreferencesModal, {currentUser: this.state.currentUser})
   },
   openPlanetCreateModal: function () {
     this.openModal(PlanetCreateModal, {transitionTo: this.transitionTo})
@@ -75,7 +79,9 @@ module.exports = React.createClass({
       )
     }
 
-    var planets = ((this.state.currentUser == null || this.state.currentUser.Planets == null) ? [] : this.state.currentUser.Planets).map(function (planet, index) {
+    var planets = (this.state.currentUser.Planets.concat(this.state.currentUser.Teams.reduce(function (planets, team) {
+      return planets.concat(team.Planets)
+    }, []))).map(function (planet, index) {
       return (
         <li key={planet.id} className={params.userName === planet.userName && params.planetName === planet.name ? 'active' : ''}>
           <Link to='planet' params={{userName: planet.userName, planetName: planet.name}}>
@@ -103,6 +109,15 @@ module.exports = React.createClass({
     )
   },
   renderPopup: function () {
+    var teams = this.state.currentUser.Teams == null ? [] : this.state.currentUser.Teams.map(function (team) {
+      return (
+        <li key={'user-' + team.id}>
+          <Link to='userHome' params={{userName: team.name}} className='userName'>{team.profileName} ({team.name})</Link>
+          <div className='userSetting'><i className='fa fa-gear'/></div>
+        </li>
+      )
+    })
+
     return (
       <div ref='profilePopup' className={'profilePopup' + (this.state.isProfilePopupOpen ? '' : ' close')}>
         <div className='profileGroup'>
@@ -111,7 +126,7 @@ module.exports = React.createClass({
           </div>
           <ul className='profileGroupList'>
             <li>
-              <Link to='userHome' params={{userName: this.state.currentUser.name}} className='userName'>Profile</Link>
+              <Link to='userHome' params={{userName: this.state.currentUser.name}} className='userName'>Profile ({this.state.currentUser.name})</Link>
               <div className='userSetting'><i className='fa fa-gear'/></div>
             </li>
           </ul>
@@ -122,20 +137,9 @@ module.exports = React.createClass({
             <span>Team</span>
           </div>
           <ul className='profileGroupList'>
+            {teams}
             <li>
-              <div className='userName'>A team</div>
+              <button onClick={this.openTeamCreateModal} className='createNewTeam'><i className='fa fa-plus-square-o'/> create new team</button>
-              <div className='userSetting'><i className='fa fa-gear'/></div>
-            </li>
-            <li>
-              <div className='userName'>B team</div>
-              <div className='userSetting'><i className='fa fa-gear'/></div>
-            </li>
-            <li>
-              <div className='userName'>C team</div>
-              <div className='userSetting'><i className='fa fa-gear'/></div>
-            </li>
-            <li>
-              <button className='createNewTeam'><i className='fa fa-plus-square-o'/> create new team</button>
             </li>
           </ul>
         </div>

browser/main/Components/NoteForm.jsx

@@ -29,7 +29,10 @@ var getOptions = function (input, callback) {
     })
 }
 
-var NoteForm = React.createClass({
+var EDIT_MODE = 0
+var PREVIEW_MODE = 1
+
+module.exports = React.createClass({
   mixins: [LinkedState, ReactRouter.State, Markdown],
   propTypes: {
     planet: React.PropTypes.object,
@@ -37,10 +40,6 @@ var NoteForm = React.createClass({
     transitionTo: React.PropTypes.func,
     note: React.PropTypes.object
   },
-  statics: {
-    EDIT_MODE: 0,
-    PREVIEW_MODE: 1
-  },
   getInitialState: function () {
     var note = Object.assign({
       title: '',
@@ -55,7 +54,7 @@ var NoteForm = React.createClass({
     })
     return {
       note: note,
-      mode: NoteForm.EDIT_MODE
+      mode: EDIT_MODE
     }
   },
   componentDidMount: function () {
@@ -72,7 +71,7 @@ var NoteForm = React.createClass({
     this.setState({note: note})
   },
   togglePreview: function () {
-    this.setState({mode: this.state.mode === NoteForm.EDIT_MODE ? NoteForm.PREVIEW_MODE : NoteForm.EDIT_MODE})
+    this.setState({mode: this.state.mode === EDIT_MODE ? PREVIEW_MODE : EDIT_MODE})
   },
   submit: function () {
     var planet = this.props.planet
@@ -102,7 +101,7 @@ var NoteForm = React.createClass({
     }
   },
   render: function () {
-    var content = this.state.mode === NoteForm.EDIT_MODE ? (
+    var content = this.state.mode === EDIT_MODE ? (
       <div className='form-group'>
         <CodeEditor onChange={this.handleContentChange} code={this.state.note.content} mode={'markdown'}/>
       </div>
@@ -134,7 +133,7 @@ var NoteForm = React.createClass({
         </div>
 
         <div className='modal-footer'>
-          <button onClick={this.togglePreview} className={'btn-default' + (this.state.mode === NoteForm.PREVIEW_MODE ? ' active' : '')}>Preview mode</button>
+          <button onClick={this.togglePreview} className={'btn-default' + (this.state.mode === PREVIEW_MODE ? ' active' : '')}>Preview mode</button>
           <div className='modal-control'>
             <button onClick={this.props.close} className='btn-default'>Cancel</button>
             <button onClick={this.submit} className='btn-primary'>Launch</button>
@@ -144,5 +143,3 @@ var NoteForm = React.createClass({
     )
   }
 })
-
-module.exports = NoteForm

browser/main/Components/PlanetCreateModal.jsx

@@ -22,9 +22,9 @@ module.exports = React.createClass({
       user: currentUser,
       planet: {
         name: '',
-        OwnerId: currentUser.id,
         public: true
-      }
+      },
+      ownerName: currentUser.name
     }
   },
   componentDidMount: function () {
@@ -36,23 +36,12 @@ module.exports = React.createClass({
     }
   },
   handleSubmit: function () {
-    Hq.createPlanet(this.state.user.name, this.state.planet)
+    Hq.createPlanet(this.state.ownerName, this.state.planet)
       .then(function (res) {
         var planet = res.body
 
-        var currentUser = JSON.parse(localStorage.getItem('currentUser'))
+        PlanetStore.Actions.update(planet)
 
-        var isNew = !currentUser.Planets.some(function (_planet, index) {
-          if (planet.id === _planet) {
-            currentUser.Planets.splice(index, 1, planet)
-            return true
-          }
-          return false
-        })
-        if (isNew) currentUser.Planets.push(planet)
-
-        localStorage.setItem('currentUser', JSON.stringify(currentUser))
-        UserStore.Actions.update(currentUser)
         this.props.transitionTo('planetHome', {userName: planet.userName, planetName: planet.name})
         this.props.close()
       }.bind(this))
@@ -61,14 +50,20 @@ module.exports = React.createClass({
       })
   },
   render: function () {
+    var teamOptions = this.state.user.Teams.map(function (team) {
+      return (
+        <option value={team.name}>{team.profileName} ({team.name})</option>
+      )
+    })
     return (
       <div className='PlanetCreateModal modal'>
         <input ref='name' valueLink={this.linkState('planet.name')} className='nameInput stripInput' placeholder='Crate new Planet'/>
 
         <div className='formField'>
           of
-          <select valueLink={this.linkState('planet.OwnerId')}>
+          <select valueLink={this.linkState('ownerName')}>
-            <option value={this.state.user.id}>Me({this.state.user.name})</option>
+            <option value={this.state.user.name}>Me({this.state.user.name})</option>
+            {teamOptions}
           </select>
           as
           <select valueLink={this.linkState('planet.public')}>

browser/main/Components/PlanetSettingModal.jsx

@@ -1,5 +1,4 @@
 var React = require('react/addons')
-var Select = require('react-select')
 
 var Catalyst = require('../Mixins/Catalyst')
 

browser/main/Components/PreferencesModal.jsx

@@ -34,24 +34,6 @@ module.exports = React.createClass({
   componentWillUnmount: function () {
   },
   onListen: function (res) {
-    console.log(res)
-    if (res.status === 'userProfileUpdated') {
-      this.setState({
-        isUpdatingProfile: false,
-        isUpdatingProfileDone: true,
-        isUpdatingProfileFailed: false
-      })
-      return
-    }
-
-    if (res.status === 'userProfileUpdatingFailed') {
-      this.setState({
-        isUpdatingProfile: false,
-        isUpdatingProfileDone: false,
-        isUpdatingProfileFailed: true
-      })
-      return
-    }
   },
   activeProfile: function () {
     this.setState({currentTab: 'profile'})

browser/main/Components/TeamCreateModal.jsx

@@ -0,0 +1,54 @@
+/* global localStorage */
+
+var React = require('react/addons')
+
+var Hq = require('../Services/Hq')
+
+var LinkedState = require('../Mixins/LinkedState')
+
+var UserStore = require('../Stores/UserStore')
+
+module.exports = React.createClass({
+  mixins: [LinkedState],
+  propTypes: {
+    user: React.PropTypes.shape({
+      name: React.PropTypes.string
+    }),
+    transitionTo: React.PropTypes.func,
+    close: React.PropTypes.func
+  },
+  getInitialState: function () {
+    return {
+      team: {
+        name: ''
+      }
+    }
+  },
+  handleSubmit: function () {
+    Hq.createTeam(this.props.user.name, this.state.team)
+      .then(function (res) {
+        var currentUser = JSON.parse(localStorage.getItem('currentUser'))
+        var team = res.body
+
+        currentUser.Teams.push(team)
+        localStorage.setItem('currentUser', JSON.stringify(currentUser))
+        UserStore.Actions.update(currentUser)
+        this.props.transitionTo('userHome', {userName: team.name})
+        this.props.close()
+      }.bind(this))
+      .catch(function (err) {
+        console.error(err)
+      })
+  },
+  render: function () {
+    return (
+      <div className='TeamCreateModal modal'>
+        <input valueLink={this.linkState('team.name')} className='nameInput stripInput' placeholder='Create new team'/>
+
+        <button onClick={this.handleSubmit} className='submitButton'>
+          <i className='fa fa-check'/>
+        </button>
+      </div>
+    )
+  }
+})

browser/main/Containers/MainContainer.jsx

@@ -40,8 +40,10 @@ module.exports = React.createClass({
     if (this.isActive('root')) {
       if (localStorage.getItem('currentUser') == null) {
         this.transitionTo('login')
+        return
       } else {
         this.transitionTo('home')
+        return
       }
     }
 

browser/main/Containers/PlanetContainer.jsx

@@ -17,6 +17,32 @@ var Hq = require('../Services/Hq')
 var UserStore = require('../Stores/UserStore')
 var PlanetStore = require('../Stores/PlanetStore')
 
+function deleteItemFromTargetArray (item, targetArray) {
+  targetArray.some(function (_item, index) {
+    if (_item.id === item.id) {
+      targetArray.splice(index, 1)
+      return true
+    }
+    return false
+  })
+
+  return targetArray
+}
+
+function updateItemToTargetArray (item, targetArray) {
+  var isNew = !targetArray.some(function (_item, index) {
+    if (_item.id === item.id) {
+      targetArray.splice(index, 1, item)
+      return true
+    }
+    return false
+  })
+
+  if (isNew) targetArray.push(item)
+
+  return targetArray
+}
+
 module.exports = React.createClass({
   mixins: [ReactRouter.Navigation, ReactRouter.State, Modal, Reflux.listenTo(UserStore, 'onUserChange'), Reflux.listenTo(PlanetStore, 'onPlanetChange'), ArticleFilter],
   propTypes: {
@@ -36,7 +62,6 @@ module.exports = React.createClass({
   componentDidUpdate: function () {
     if (this.isActive('planetHome') && this.refs.list != null && this.refs.list.props.articles.length > 0) {
       var article = this.refs.list.props.articles[0]
-      console.log(article)
       var planet = this.state.planet
       switch (article.type) {
         case 'code':
@@ -64,24 +89,14 @@ module.exports = React.createClass({
   },
   onPlanetChange: function (res) {
     if (this.state.planet == null) return
+    console.log(res.data)
 
-    var code, codes, note, notes, isNew, articleIndex, articlesCount
+    var code, note, articleIndex, articlesCount
     switch (res.status) {
       case 'codeUpdated':
         code = res.data
         if (code.PlanetId === this.state.planet.id) {
-          codes = this.state.planet.Codes
+          this.state.planet.Codes = updateItemToTargetArray(code, this.state.planet.Codes)
-          isNew = !codes.some(function (_code, index) {
-            if (code.localId === _code.localId) {
-              codes.splice(index, 1, code)
-              return true
-            }
-            return false
-          })
-
-          if (isNew) {
-            codes.unshift(code)
-          }
 
           this.setState({planet: this.state.planet})
         }
@@ -89,18 +104,7 @@ module.exports = React.createClass({
       case 'noteUpdated':
         note = res.data
         if (note.PlanetId === this.state.planet.id) {
-          notes = this.state.planet.Notes
+          this.state.planet.Notes = updateItemToTargetArray(note, this.state.planet.Notes)
-          isNew = !notes.some(function (_note, index) {
-            if (note.localId === _note.localId) {
-              notes.splice(index, 1, note)
-              return true
-            }
-            return false
-          })
-
-          if (isNew) {
-            notes.unshift(note)
-          }
 
           this.setState({planet: this.state.planet})
         }
@@ -108,15 +112,9 @@ module.exports = React.createClass({
       case 'codeDestroyed':
         code = res.data
         if (code.PlanetId === this.state.planet.id) {
-          codes = this.state.planet.Codes
+          this.state.planet.Codes = deleteItemFromTargetArray(code, this.state.planet.Codes)
-          codes.some(function (_code, index) {
-            if (code.localId === _code.localId) {
-              codes.splice(index, 1)
-              return true
-            }
-            return false
-          })
 
+          if (this.refs.detail.props.article != null && this.refs.detail.props.article.type === code.type && this.refs.detail.props.article.localId === code.localId) {
             articleIndex = this.getFilteredIndexOfCurrentArticle()
             articlesCount = this.refs.list.props.articles.length
 
@@ -129,20 +127,18 @@ module.exports = React.createClass({
                 }
               }
             })
+            return
+          }
+
+          this.setState({planet: this.state.planet})
         }
         break
       case 'noteDestroyed':
         note = res.data
         if (note.PlanetId === this.state.planet.id) {
-          notes = this.state.planet.Notes
+          this.state.planet.Notes = deleteItemFromTargetArray(note, this.state.planet.Notes)
-          notes.some(function (_note, index) {
-            if (note.localId === _note.localId) {
-              notes.splice(index, 1)
-              return true
-            }
-            return false
-          })
 
+          if (this.refs.detail.props.article != null && this.refs.detail.props.article.type === note.type && this.refs.detail.props.article.localId === note.localId) {
             articleIndex = this.getFilteredIndexOfCurrentArticle()
             articlesCount = this.refs.list.props.articles.length
 
@@ -155,6 +151,10 @@ module.exports = React.createClass({
                 }
               }
             })
+            return
+          }
+
+          this.setState({planet: this.state.planet})
         }
         break
     }
@@ -283,7 +283,7 @@ module.exports = React.createClass({
     }
 
     this.setState({search: keywords.join(' ')}, function () {
-      this.selectArticleByIndex(0)
+      this.selectArticleByListIndex(0)
     })
   },
   toggleNoteFilter: function () {
@@ -311,7 +311,7 @@ module.exports = React.createClass({
     }
 
     this.setState({search: keywords.join(' ')}, function () {
-      this.selectArticleByIndex(0)
+      this.selectArticleByListIndex(0)
     })
   },
   applyTagFilter: function (tag) {

browser/main/Containers/SignupContainer.jsx

@@ -37,8 +37,7 @@ module.exports = React.createClass({
         }.bind(this))
         .catch(function (err) {
           var res = err.response
-          console.log(res)
+          console.error(res.body)
-          console.log(err.status)
           if (err.status === 409) {
             // Confliction
             var emailConflicted = res.body.errors[0].path === 'email'

browser/main/Containers/UserContainer.jsx

@@ -1,5 +1,3 @@
-/* global localStorage */
-
 var React = require('react/addons')
 var ReactRouter = require('react-router')
 var RouteHandler = ReactRouter.RouteHandler
@@ -15,7 +13,6 @@ var ProfileImage = require('../Components/ProfileImage')
 var EditProfileModal = require('../Components/EditProfileModal')
 
 var UserStore = require('../Stores/UserStore')
-var PlanetStore = require('../Stores/PlanetStore')
 
 module.exports = React.createClass({
   mixins: [LinkedState, ReactRouter.State, Modal, Reflux.listenTo(UserStore, 'onUserChange')],
@@ -69,34 +66,6 @@ module.exports = React.createClass({
         console.error(err)
       })
   },
-  onListen: function (res) {
-    console.log('on Listen')
-    if (res == null || res.status == null) return
-
-    var currentUser = this.state.currentUser
-
-    if (res.status === 'planetCreated') {
-      currentUser.Planets.push(res.data)
-
-      localStorage.setItem('currentUser', JSON.stringify(currentUser))
-      this.setState({currentUser: currentUser})
-      return
-    }
-
-    if (res.status === 'planetDeleted') {
-      currentUser.Planets.some(function (_planet, index) {
-        if (res.data.id === _planet.id) {
-          currentUser.Planets.splice(index, 1)
-          return true
-        }
-        return false
-      })
-
-      localStorage.setItem('currentUser', JSON.stringify(currentUser))
-      this.setState({currentUser: currentUser})
-      return
-    }
-  },
   openEditProfileModal: function () {
     this.openModal(EditProfileModal, {targetUser: this.state.user})
   },
@@ -110,7 +79,22 @@ module.exports = React.createClass({
             User Loading...
           </div>
         )
+      } else if (user.userType === 'team') {
+        return this.renderTeamHome()
       } else {
+        return this.renderUserHome()
+      }
+    } else {
+      return (
+        <div className='UserContainer'>
+          <RouteHandler/>
+        </div>
+      )
+    }
+  },
+  renderTeamHome: function () {
+    var user = this.state.user
+
     var userPlanets = user.Planets.map(function (planet) {
       return (
         <li key={'planet-' + planet.id}>
@@ -119,13 +103,80 @@ module.exports = React.createClass({
       )
     })
 
-        var teams = user.Teams == null ? [] : user.Teams.map(function (team) {
+    var members = user.Members == null ? [] : user.Members.map(function (member) {
       return (
-            <li>
+        <li key={'user-' + member.id}>
-              Some team
+          <Link to='userHome' params={{userName: member.name}}>{member.profileName} ({member.name})</Link>
         </li>
       )
     })
+    return (
+      <div className='UserContainer'>
+        <div className='userProfile'>
+          <ProfileImage className='userPhoto' size='75' email={user.email}/>
+          <div className='userInfo'>
+            <div className='userProfileName'>{user.profileName}</div>
+            <div className='userName'>{user.name}</div>
+          </div>
+
+          <button onClick={this.openEditProfileModal} className='editProfileButton'>Edit profile</button>
+        </div>
+        <div className='memberList'>
+          <div className='memberLabel'>{members.length} {members.length > 0 ? 'Members' : 'Member'}</div>
+          <ul className='members'>
+            {members}
+          </ul>
+        </div>
+        <div className='planetList'>
+          <div className='planetLabel'>{userPlanets.length} {userPlanets.length > 0 ? 'Planets' : 'Planet'}</div>
+          <div className='planetGroup'>
+            <ul className='planets'>
+              {userPlanets}
+            </ul>
+          </div>
+        </div>
+      </div>
+    )
+  },
+  renderUserHome: function () {
+    var user = this.state.user
+
+    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>
+          &nbsp;{!planet.public ? (<i className='fa fa-lock'/>) : null}
+        </li>
+      )
+    })
+
+    var teams = user.Teams == null ? [] : user.Teams.map(function (team) {
+      return (
+        <li key={'user-' + team.id}>
+          <Link to='userHome' params={{userName: team.name}}>{team.profileName} ({team.name})</Link>
+        </li>
+      )
+    })
+
+    var teamPlanets = user.Teams == null ? [] : user.Teams.map(function (team) {
+      var planets = 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>
+            &nbsp;{!planet.public ? (<i className='fa fa-lock'/>) : null}
+          </li>
+        )
+      })
+      return (
+      <div key={'user-' + team.id} className='planetGroup'>
+        <div className='planetGroupLabel'>{team.name}</div>
+        <ul className='planets'>
+          {planets}
+        </ul>
+      </div>
+      )
+    })
+
     return (
       <div className='UserContainer'>
         <div className='userProfile'>
@@ -151,16 +202,9 @@ module.exports = React.createClass({
               {userPlanets}
             </ul>
           </div>
+          {teamPlanets}
         </div>
       </div>
     )
   }
-    } else {
-      return (
-        <div className='UserContainer'>
-          <RouteHandler/>
-        </div>
-      )
-    }
-  }
 })

browser/main/Services/Hq.js

@@ -44,6 +44,14 @@ module.exports = {
       })
       .send(input)
   },
+  createTeam: function (userName, input) {
+    return request
+      .post(apiUrl + 'resources/' + userName + '/teams')
+      .set({
+        Authorization: 'Bearer ' + localStorage.getItem('token')
+      })
+      .send(input)
+  },
   createPlanet: function (userName, input) {
     return request
       .post(apiUrl + 'resources/' + userName + '/planets')

browser/main/Stores/PlanetStore.js

@@ -2,35 +2,94 @@
 
 var Reflux = require('reflux')
 
+var UserStore = require('./UserStore')
+
 var actions = Reflux.createActions([
-  'updatePlanet',
+  'update',
-  'destroyPlanet',
+  'destroy',
   'updateCode',
   'destroyCode',
   'updateNote',
   'destroyNote'
 ])
 
+function deleteItemFromTargetArray (item, targetArray) {
+  targetArray.some(function (_item, index) {
+    if (_item.id === item.id) {
+      targetArray.splice(index, 1)
+      return true
+    }
+    return false
+  })
+
+  return targetArray
+}
+
+function updateItemToTargetArray (item, targetArray) {
+  var isNew = !targetArray.some(function (_item, index) {
+    if (_item.id === item.id) {
+      targetArray.splice(index, 1, item)
+      return true
+    }
+    return false
+  })
+
+  if (isNew) targetArray.push(item)
+
+  return targetArray
+}
+
 module.exports = Reflux.createStore({
   listenables: [actions],
   Actions: actions,
-  onUpdatePlanet: function (planet) {
+  onUpdate: function (planet) {
+    // Copy the planet object
+    var aPlanet = Object.assign({}, planet)
+    delete aPlanet.Codes
+    delete aPlanet.Notes
 
+    // Check if the planet should be updated to currentUser
+    var currentUser = JSON.parse(localStorage.getItem('currentUser'))
+
+    var ownedByCurrentUser = currentUser.id === aPlanet.OwnerId
+
+    if (ownedByCurrentUser) {
+      currentUser.Planets = updateItemToTargetArray(aPlanet, currentUser.Planets)
+    }
+
+    if (!ownedByCurrentUser) {
+      var team = null
+      currentUser.Teams.some(function (_team) {
+        if (_team.id === aPlanet.OwnerId) {
+          team = _team
+          return true
+        }
+        return
+      })
+
+      if (team) {
+        team.Planets = updateItemToTargetArray(aPlanet, team.Planets)
+      }
+    }
+
+    // Update currentUser
+    localStorage.setItem('currentUser', JSON.stringify(currentUser))
+    UserStore.Actions.update(currentUser)
+
+    // Update the planet
+    localStorage.setItem('planet-' + planet.id, JSON.stringify(planet))
+
+    this.trigger({
+      status: 'updated',
+      data: planet
+    })
   },
   onUpdateCode: function (code) {
     code.type = 'code'
 
     var planet = JSON.parse(localStorage.getItem('planet-' + code.PlanetId))
     if (planet != null) {
-      var isNew = !planet.Codes.some(function (_code, index) {
+      planet.Codes = updateItemToTargetArray(code, planet.Codes)
-        if (code.id === _code.id) {
-          planet.Codes.splice(index, 1, code)
-          return true
-        }
-        return false
-      })
-
-      if (isNew) planet.Codes.unshift(code)
 
       localStorage.setItem('planet-' + code.PlanetId, JSON.stringify(planet))
     }
@@ -43,16 +102,11 @@ module.exports = Reflux.createStore({
   onDestroyCode: function (code) {
     var planet = JSON.parse(localStorage.getItem('planet-' + code.PlanetId))
     if (planet != null) {
-      planet.Codes.some(function (_code, index) {
+      planet.Codes = deleteItemFromTargetArray(code, planet.Codes)
-        if (code.id === _code.id) {
-          planet.Codes.splice(index, 1)
-          return true
-        }
-        return false
-      })
 
       localStorage.setItem('planet-' + code.PlanetId, JSON.stringify(planet))
     }
+    code.type = 'code'
 
     this.trigger({
       status: 'codeDestroyed',
@@ -64,15 +118,7 @@ module.exports = Reflux.createStore({
 
     var planet = JSON.parse(localStorage.getItem('planet-' + note.PlanetId))
     if (planet != null) {
-      var isNew = !planet.Notes.some(function (_note, index) {
+      planet.Notes = updateItemToTargetArray(note, planet.Notes)
-        if (note.id === _note.id) {
-          planet.Notes.splice(index, 1, note)
-          return true
-        }
-        return false
-      })
-
-      if (isNew) planet.Codes.unshift(note)
 
       localStorage.setItem('planet-' + note.PlanetId, JSON.stringify(planet))
     }
@@ -85,16 +131,11 @@ module.exports = Reflux.createStore({
   onDestroyNote: function (note) {
     var planet = JSON.parse(localStorage.getItem('planet-' + note.PlanetId))
     if (planet != null) {
-      planet.Notes.some(function (_note, index) {
+      planet.Notes = deleteItemFromTargetArray(note, planet.Notes)
-        if (note.id === _note.id) {
-          planet.Notes.splice(index, 1)
-          return true
-        }
-        return false
-      })
 
       localStorage.setItem('planet-' + note.PlanetId, JSON.stringify(planet))
     }
+    note.type = 'note'
 
     this.trigger({
       status: 'noteDestroyed',

browser/styles/main/containers/UserContainer.styl

@@ -194,16 +194,20 @@
         margin-top 25px
         padding 10px 15px
         border-radius 5px
-    .teamList
+    .teamList, .memberList
       absolute left bottom
       top 125px
       width 200px
       padding 15px
       border-right solid 1px borderColor
       overflow-y auto
-      .teamLabel
+      .teamLabel, .memberLabel
         font-size 1.2em
         margin-bottom 15px
+      .teams, .members
+        li
+          margin-bottom 10px
+          font-size 1.1em
     .planetList
       absolute right bottom
       top 125px
@@ -212,7 +216,7 @@
       overflow-y auto
       .planetLabel
         font-size 1.2em
-        margin-bottom 25px
+        margin-bottom 15px
       .planetGroup
         margin-left 15px
         .planetGroupLabel
@@ -220,3 +224,5 @@
           margin-bottom 15px
         .planets
           margin-left 15px
+          li
+            margin-bottom 10px

browser/styles/shared/modal.styl

@@ -171,7 +171,7 @@
     border-radius 5px
     marked()
 
-  .PlanetCreateModal.modal, .PlanetAddUserModal.modal
+  .PlanetCreateModal.modal, .TeamCreateModal.modal
     padding 60px 0
     .nameInput
       width 80%