on Refactor... #4

browser/main/Components/EditProfileModal.jsx

@@ -11,20 +11,20 @@ var UserStore = require('../Stores/UserStore')
 module.exports = React.createClass({
   mixins: [LinkedState],
   propTypes: {
-    targetUser: React.PropTypes.shape({
+    user: React.PropTypes.shape({
       name: React.PropTypes.string,
       profileName: React.PropTypes.string,
       email: React.PropTypes.string
     })
   },
   getInitialState: function () {
-    var targetUser = this.props.targetUser
+    var user = this.props.user
     return {
       currentTab: 'userInfo',
       user: {
-        name: targetUser.name,
+        name: user.name,
-        profileName: targetUser.profileName,
+        profileName: user.profileName,
-        email: targetUser.email
+        email: user.email
       },
       userSubmitStatus: null,
       password: {
@@ -44,7 +44,7 @@ module.exports = React.createClass({
     this.setState({
       userSubmitStatus: 'sending'
     }, function () {
-      Hq.updateUser(this.props.targetUser.name, this.state.user)
+      Hq.updateUser(this.props.user.name, this.state.user)
         .then(function (res) {
           this.setState({userSubmitStatus: 'done'}, function () {
             localStorage.setItem('currentUser', JSON.stringify(res.body))
@@ -138,7 +138,7 @@ module.exports = React.createClass({
   },
   renderPasswordTab: function () {
     return (
-      <div className='paswordTab'>
+      <div className='passwordTab'>
         <div className='formField'>
           <label>Current password</label>
           <input valueLink={this.linkState('password.currentPassword')}/>

browser/main/Components/HomeNavigator.jsx

@@ -27,8 +27,36 @@ module.exports = React.createClass({
   onUserChange: function (res) {
     switch (res.status) {
       case 'userUpdated':
-        if (this.state.currentUser.id === res.data.id) {
+        var user = res.data
-          this.setState({currentUser: res.data})
+        var currentUser = this.state.currentUser
+        if (currentUser.id === user.id) {
+          this.setState({currentUser: user})
+          return
+        }
+
+        if (user.userType === 'team') {
+          var isMyTeam = user.Members.some(function (member) {
+            if (currentUser.id === member.id) {
+              return true
+            }
+            return false
+          })
+
+          if (isMyTeam) {
+            var isNew = !currentUser.Teams.some(function (team, index) {
+              if (user.id === team.id) {
+                currentUser.Teams.splice(index, 1, user)
+                return true
+              }
+              return false
+            })
+
+            if (isNew) {
+              currentUser.Teams.push(user)
+            }
+
+            this.setState({currentUser: currentUser})
+          }
         }
         break
     }
@@ -104,7 +132,10 @@ module.exports = React.createClass({
         <ul className='planetList'>
           {planets}
         </ul>
-        <button onClick={this.openPlanetCreateModal} className='newPlanet'><i className='fa fa-plus'/></button>
+        <button onClick={this.openPlanetCreateModal} className='newPlanet'>
+          <i className='fa fa-plus'/>
+          <div className='newPlanetTooltip'>Create new planet</div>
+        </button>
       </div>
     )
   },

browser/main/Components/PlanetCreateModal.jsx

@@ -1,30 +1,30 @@
 /* global localStorage */
 
 var React = require('react/addons')
-var Select = require('react-select')
 
 var Hq = require('../Services/Hq')
 
 var LinkedState = require('../Mixins/LinkedState')
 
-var UserStore = require('../Stores/UserStore')
 var PlanetStore = require('../Stores/PlanetStore')
 
 module.exports = React.createClass({
   mixins: [LinkedState],
   propTypes: {
+    ownerName: React.PropTypes.string,
     transitionTo: React.PropTypes.func,
     close: React.PropTypes.func
   },
   getInitialState: function () {
     var currentUser = JSON.parse(localStorage.getItem('currentUser'))
+    var ownerName = this.props.ownerName != null ? this.props.ownerName : currentUser.name
     return {
       user: currentUser,
       planet: {
         name: '',
         public: true
       },
-      ownerName: currentUser.name
+      ownerName: ownerName
     }
   },
   componentDidMount: function () {
@@ -42,7 +42,10 @@ 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.close()
       }.bind(this))
       .catch(function (err) {
@@ -52,7 +55,7 @@ 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>
+        <option key={'user-' + team.id} value={team.name}>{team.profileName} ({team.name})</option>
       )
     })
     return (

browser/main/Components/TeamCreateModal.jsx

@@ -33,7 +33,10 @@ module.exports = React.createClass({
         currentUser.Teams.push(team)
         localStorage.setItem('currentUser', JSON.stringify(currentUser))
         UserStore.Actions.update(currentUser)
+
+        if (this.props.transitionTo != null) {
           this.props.transitionTo('userHome', {userName: team.name})
+        }
         this.props.close()
       }.bind(this))
       .catch(function (err) {

browser/main/Components/TeamSettingsModal.jsx

@@ -0,0 +1,108 @@
+/* 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: {
+    team: React.PropTypes.shape({
+      name: React.PropTypes.string,
+      profileName: React.PropTypes.string,
+      email: React.PropTypes.string
+    })
+  },
+  getInitialState: function () {
+    var team = this.props.team
+    return {
+      currentTab: 'teamInfo',
+      team: {
+        name: team.name,
+        profileName: team.profileName
+      },
+      userSubmitStatus: null
+    }
+  },
+  selectTab: function (tabName) {
+    return function () {
+      this.setState({currentTab: tabName})
+    }.bind(this)
+  },
+  saveUserInfo: function () {
+    this.setState({
+      userSubmitStatus: 'sending'
+    }, function () {
+      Hq.updateUser(this.props.team.name, this.state.team)
+        .then(function (res) {
+          this.setState({userSubmitStatus: 'done'}, function () {
+            UserStore.Actions.update(res.body)
+          })
+        }.bind(this))
+        .catch(function (err) {
+          console.error(err)
+          this.setState({userSubmitStatus: 'error'})
+        }.bind(this))
+    })
+  },
+  render: function () {
+    var content
+
+    switch (this.state.currentTab) {
+      case 'teamInfo':
+        content = this.renderTeamInfoTab()
+        break
+      case 'members':
+        content = this.renderMembersTab()
+        break
+    }
+
+    return (
+      <div className='EditProfileModal modal tabModal'>
+        <div className='leftPane'>
+          <div className='tabLabel'>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>
+          </div>
+        </div>
+        <div className='rightPane'>
+          {content}
+        </div>
+      </div>
+    )
+  },
+  renderTeamInfoTab: function () {
+    return (
+      <div className='userInfoTab'>
+        <div className='formField'>
+          <label>Profile Name</label>
+          <input valueLink={this.linkState('team.profileName')}/>
+        </div>
+        <div className='formField'>
+          <label>Name</label>
+          <input valueLink={this.linkState('team.name')}/>
+        </div>
+        <div className='formConfirm'>
+          <button disabled={this.state.userSubmitStatus === 'sending'} onClick={this.saveUserInfo}>Save</button>
+
+          <div className={'alertInfo' + (this.state.userSubmitStatus === 'sending' ? '' : ' hide')}>on Sending...</div>
+
+          <div className={'alertError' + (this.state.userSubmitStatus === 'error' ? '' : ' hide')}>Connection failed.. Try again.</div>
+
+          <div className={'alertSuccess' + (this.state.userSubmitStatus === 'done' ? '' : ' hide')}>Successfully done!!</div>
+        </div>
+      </div>
+    )
+  },
+  renderMembersTab: function () {
+    return (
+      <div className='membersTab'>
+      </div>
+    )
+  }
+})

browser/main/Containers/LoginContainer.jsx

@@ -76,17 +76,6 @@ module.exports = React.createClass({
 
         <nav className='authNavigator text-center'><Link to='login'>Log In</Link> / <Link to='signup'>Sign Up</Link></nav>
 
-        <div className='socialControl'>
-          <p>Connect with</p>
-          <button className='facebookBtn'><i className='fa fa-facebook fa-fw'/></button>
-          <button className='githubBtn'><i className='fa fa-github fa-fw'/></button>
-        </div>
-
-        <div className='divider'>
-          <hr/>
-          <div className='dividerLabel'>or</div>
-        </div>
-
         <form onSubmit={this.handleSubmit}>
           <div className='form-group'>
             <input className='stripInput' valueLink={this.linkState('user.email')} type='text' placeholder='E-mail'/>

browser/main/Containers/MainContainer.jsx

@@ -49,13 +49,16 @@ module.exports = React.createClass({
 
     Hq.getUser()
       .then(function (res) {
+        console.log(res.body)
         localStorage.setItem('currentUser', JSON.stringify(res.body))
         UserStore.Actions.update(res.body)
       })
       .catch(function (err) {
         if (err.status === 401) {
+          console.log('Not logged in yet')
           localStorage.removeItem('currentUser')
           this.transitionTo('login')
+          return
         }
         console.error(err)
       }.bind(this))

browser/main/Containers/SignupContainer.jsx

@@ -30,7 +30,6 @@ module.exports = React.createClass({
     }, function () {
       Hq.signup(this.state.user)
         .then(function (res) {
-          console.log(res.body)
           localStorage.setItem('token', res.body.token)
           localStorage.setItem('currentUser', JSON.stringify(res.body.user))
 
@@ -91,11 +90,6 @@ module.exports = React.createClass({
 
         <nav className='authNavigator text-center'><Link to='login'>Log In</Link> / <Link to='signup'>Sign Up</Link></nav>
 
-        <div className='divider'>
-          <hr/>
-          <div className='dividerLabel'>or</div>
-        </div>
-
         <form onSubmit={this.handleSubmit}>
           <div className='form-group'>
             <input className='stripInput' valueLink={this.linkState('user.email')} type='text' placeholder='E-mail'/>

browser/main/Containers/UserContainer.jsx

@@ -1,21 +1,30 @@
+/* global localStorage */
+
 var React = require('react/addons')
 var ReactRouter = require('react-router')
+var Navigation = ReactRouter.Navigation
+var State = ReactRouter.State
 var RouteHandler = ReactRouter.RouteHandler
 var Link = ReactRouter.Link
 var Reflux = require('reflux')
 
 var LinkedState = require('../Mixins/LinkedState')
 var Modal = require('../Mixins/Modal')
+var Helper = require('../Mixins/Helper')
 
 var Hq = require('../Services/Hq')
 
 var ProfileImage = require('../Components/ProfileImage')
 var EditProfileModal = require('../Components/EditProfileModal')
+var TeamSettingsModal = require('../Components/TeamSettingsModal')
+var PlanetCreateModal = require('../Components/PlanetCreateModal')
+var TeamCreateModal = require('../Components/TeamCreateModal')
 
 var UserStore = require('../Stores/UserStore')
+var PlanetStore = require('../Stores/PlanetStore')
 
 module.exports = React.createClass({
-  mixins: [LinkedState, ReactRouter.State, Modal, Reflux.listenTo(UserStore, 'onUserChange')],
+  mixins: [LinkedState, State, Navigation, Modal, Reflux.listenTo(UserStore, 'onUserChange'), Reflux.listenTo(PlanetStore, 'onPlanetChange'), Helper],
   propTypes: {
     params: React.PropTypes.shape({
       userName: React.PropTypes.string,
@@ -55,6 +64,67 @@ module.exports = React.createClass({
         break
     }
   },
+  onPlanetChange: function (res) {
+    if (this.state.user == null) return
+
+    var currentUser, planet, isOwner, team
+    switch (res.status) {
+      case 'updated':
+        // if state.user is currentUser, planet will be fetched by UserStore
+        currentUser = JSON.parse(localStorage.getItem('currentUser'))
+        if (currentUser.id === this.state.user.id) return
+
+        planet = res.data
+        isOwner = planet.Owner.id === this.state.user.id
+        if (isOwner) {
+          this.state.user.Planets = this.updateItemToTargetArray(planet, this.state.user.Planets)
+          this.setState({user: this.state.user})
+          return
+        }
+        // check if team of user has this planet
+        team = null
+        this.state.user.userType !== 'team' && this.state.user.Teams.some(function (_team) {
+          if (planet.Owner.id === _team.id) {
+            team = _team
+            return true
+          }
+          return false
+        })
+        if (team != null) {
+          team.Planets = this.updateItemToTargetArray(planet, team.Planets)
+          this.setState({user: this.state.user})
+          return
+        }
+
+        break
+      case 'destroyed':
+        // if state.user is currentUser, planet will be fetched by UserStore
+        currentUser = JSON.parse(localStorage.getItem('currentUser'))
+        if (currentUser.id === this.state.user.id) return
+
+        planet = res.data
+        isOwner = planet.Owner.id === this.state.user.id
+        if (isOwner) {
+          this.state.user.Planets = this.deleteItemFromTargetArray(planet, this.state.user.Planets)
+          this.setState({user: this.state.user})
+          return
+        }
+        // check if team of user has this planet
+        team = null
+        this.state.user.userType !== 'team' && this.state.user.Teams.some(function (_team) {
+          if (planet.Owner.id === _team.id) {
+            team = _team
+            return true
+          }
+          return false
+        })
+        if (team != null) {
+          team.Planets = this.deleteItemFromTargetArray(planet, team.Planets)
+          this.setState({user: this.state.user})
+          return
+        }
+    }
+  },
   fetchUser: function (userName) {
     if (userName == null) userName = this.props.params.userName
 
@@ -67,11 +137,27 @@ module.exports = React.createClass({
       })
   },
   openEditProfileModal: function () {
-    this.openModal(EditProfileModal, {targetUser: this.state.user})
+    this.openModal(EditProfileModal, {user: this.state.user})
+  },
+  openTeamSettingsModal: function () {
+    this.openModal(TeamSettingsModal, {team: this.state.user})
+  },
+  openAddUserModal: function () {
+
+  },
+  openTeamCreateModal: function () {
+    this.openModal(TeamCreateModal, {user: this.state.user})
+  },
+  openPlanetCreateModalWithOwnerName: function (name) {
+    return function () {
+      this.openModal(PlanetCreateModal, {ownerName: name})
+    }.bind(this)
   },
   render: function () {
     var user = this.state.user
 
+    var currentUser = JSON.parse(localStorage.getItem('currentUser'))
+
     if (this.isActive('userHome')) {
       if (user == null) {
         return (
@@ -80,9 +166,9 @@ module.exports = React.createClass({
           </div>
         )
       } else if (user.userType === 'team') {
-        return this.renderTeamHome()
+        return this.renderTeamHome(currentUser)
       } else {
-        return this.renderUserHome()
+        return this.renderUserHome(currentUser)
       }
     } else {
       return (
@@ -92,13 +178,16 @@ module.exports = React.createClass({
       )
     }
   },
-  renderTeamHome: function () {
+  renderTeamHome: function (currentUser) {
     var user = this.state.user
 
+    var isOwner = true
+
     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>
       )
     })
@@ -107,6 +196,7 @@ module.exports = React.createClass({
       return (
         <li key={'user-' + member.id}>
           <Link to='userHome' params={{userName: member.name}}>{member.profileName} ({member.name})</Link>
+          <div className='role'>{member.TeamMember.role}</div>
         </li>
       )
     })
@@ -119,7 +209,7 @@ module.exports = React.createClass({
             <div className='userName'>{user.name}</div>
           </div>
 
-          <button onClick={this.openEditProfileModal} className='editProfileButton'>Edit profile</button>
+          <button onClick={this.openTeamSettingsModal} className='editProfileButton'>Team settings</button>
         </div>
         <div className='memberList'>
           <div className='memberLabel'>{members.length} {members.length > 0 ? 'Members' : 'Member'}</div>
@@ -132,15 +222,18 @@ module.exports = React.createClass({
           <div className='planetGroup'>
             <ul className='planets'>
               {userPlanets}
+              {isOwner ? (<li><button onClick={this.openPlanetCreateModalWithOwnerName(user.name)} className='createPlanetButton'><i className='fa fa-plus-square-o'/> Create new planet</button></li>) : null}
             </ul>
           </div>
         </div>
       </div>
     )
   },
-  renderUserHome: function () {
+  renderUserHome: function (currentUser) {
     var user = this.state.user
 
+    var isOwner = currentUser.id === user.id
+
     var userPlanets = user.Planets.map(function (planet) {
       return (
         <li key={'planet-' + planet.id}>
@@ -159,7 +252,7 @@ module.exports = React.createClass({
     })
 
     var teamPlanets = user.Teams == null ? [] : user.Teams.map(function (team) {
-      var planets = team.Planets.map(function (planet) {
+      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>
@@ -172,10 +265,11 @@ module.exports = React.createClass({
         <div className='planetGroupLabel'>{team.name}</div>
         <ul className='planets'>
           {planets}
+          {isOwner ? (<li><button onClick={this.openPlanetCreateModalWithOwnerName(team.name)} className='createPlanetButton'><i className='fa fa-plus-square-o'/> Create new planet</button></li>) : null}
         </ul>
       </div>
       )
-    })
+    }.bind(this))
 
     return (
       <div className='UserContainer'>
@@ -186,20 +280,25 @@ module.exports = React.createClass({
             <div className='userName'>{user.name}</div>
           </div>
 
-          <button onClick={this.openEditProfileModal} className='editProfileButton'>Edit profile</button>
+          {isOwner ? (
+          <button onClick={this.openEditProfileModal} className='editProfileButton'>Edit profile</button>) : null}
         </div>
         <div className='teamList'>
           <div className='teamLabel'>{teams.length} {teams.length > 0 ? 'Teams' : 'Team'}</div>
           <ul className='teams'>
             {teams}
+            {isOwner ? (<li><button onClick={this.openTeamCreateModal} className='createTeamButton'><i className='fa fa-plus-square-o'/> Create new team</button></li>) : null}
           </ul>
         </div>
         <div className='planetList'>
-          <div className='planetLabel'>{userPlanets.length} {userPlanets.length > 0 ? 'Planets' : 'Planet'}</div>
+          <div className='planetLabel'>{userPlanets.length + user.Teams.reduce(function (sum, team) {
+              return sum + (team.Planets != null ? team.Planets.length : 0)
+            }, 0)} {userPlanets.length > 0 ? 'Planets' : 'Planet'}</div>
           <div className='planetGroup'>
             <div className='planetGroupLabel'>{user.profileName}</div>
             <ul className='planets'>
               {userPlanets}
+              {isOwner ? (<li><button onClick={this.openPlanetCreateModalWithOwnerName(user.name)} className='createPlanetButton'><i className='fa fa-plus-square-o'/> Create new planet</button></li>) : null}
             </ul>
           </div>
           {teamPlanets}

browser/main/Mixins/Helper.js

@@ -0,0 +1,30 @@
+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 = {
+  deleteItemFromTargetArray: deleteItemFromTargetArray,
+  updateItemToTargetArray: updateItemToTargetArray
+}

browser/main/Stores/PlanetStore.js

@@ -4,6 +4,8 @@ var Reflux = require('reflux')
 
 var UserStore = require('./UserStore')
 
+var Helper = require('../Mixins/Helper')
+
 var actions = Reflux.createActions([
   'update',
   'destroy',
@@ -13,33 +15,8 @@ var actions = Reflux.createActions([
   '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({
+  mixins: [Helper],
   listenables: [actions],
   Actions: actions,
   onUpdate: function (planet) {
@@ -54,7 +31,7 @@ module.exports = Reflux.createStore({
     var ownedByCurrentUser = currentUser.id === aPlanet.OwnerId
 
     if (ownedByCurrentUser) {
-      currentUser.Planets = updateItemToTargetArray(aPlanet, currentUser.Planets)
+      currentUser.Planets = this.updateItemToTargetArray(aPlanet, currentUser.Planets)
     }
 
     if (!ownedByCurrentUser) {
@@ -68,7 +45,7 @@ module.exports = Reflux.createStore({
       })
 
       if (team) {
-        team.Planets = updateItemToTargetArray(aPlanet, team.Planets)
+        team.Planets = this.updateItemToTargetArray(aPlanet, team.Planets)
       }
     }
 
@@ -91,7 +68,7 @@ module.exports = Reflux.createStore({
     var ownedByCurrentUser = currentUser.id === planet.OwnerId
 
     if (ownedByCurrentUser) {
-      currentUser.Planets = deleteItemFromTargetArray(planet, currentUser.Planets)
+      currentUser.Planets = this.deleteItemFromTargetArray(planet, currentUser.Planets)
     }
 
     if (!ownedByCurrentUser) {
@@ -105,7 +82,7 @@ module.exports = Reflux.createStore({
       })
 
       if (team) {
-        team.Planets = deleteItemFromTargetArray(planet, team.Planets)
+        team.Planets = this.deleteItemFromTargetArray(planet, team.Planets)
       }
     }
 
@@ -126,7 +103,7 @@ module.exports = Reflux.createStore({
 
     var planet = JSON.parse(localStorage.getItem('planet-' + code.PlanetId))
     if (planet != null) {
-      planet.Codes = updateItemToTargetArray(code, planet.Codes)
+      planet.Codes = this.updateItemToTargetArray(code, planet.Codes)
 
       localStorage.setItem('planet-' + code.PlanetId, JSON.stringify(planet))
     }
@@ -139,7 +116,7 @@ module.exports = Reflux.createStore({
   onDestroyCode: function (code) {
     var planet = JSON.parse(localStorage.getItem('planet-' + code.PlanetId))
     if (planet != null) {
-      planet.Codes = deleteItemFromTargetArray(code, planet.Codes)
+      planet.Codes = this.deleteItemFromTargetArray(code, planet.Codes)
 
       localStorage.setItem('planet-' + code.PlanetId, JSON.stringify(planet))
     }
@@ -155,7 +132,7 @@ module.exports = Reflux.createStore({
 
     var planet = JSON.parse(localStorage.getItem('planet-' + note.PlanetId))
     if (planet != null) {
-      planet.Notes = updateItemToTargetArray(note, planet.Notes)
+      planet.Notes = this.updateItemToTargetArray(note, planet.Notes)
 
       localStorage.setItem('planet-' + note.PlanetId, JSON.stringify(planet))
     }
@@ -168,7 +145,7 @@ module.exports = Reflux.createStore({
   onDestroyNote: function (note) {
     var planet = JSON.parse(localStorage.getItem('planet-' + note.PlanetId))
     if (planet != null) {
-      planet.Notes = deleteItemFromTargetArray(note, planet.Notes)
+      planet.Notes = this.deleteItemFromTargetArray(note, planet.Notes)
 
       localStorage.setItem('planet-' + note.PlanetId, JSON.stringify(planet))
     }

browser/main/Stores/UserStore.js

@@ -1,3 +1,5 @@
+/* global localStorage */
+
 var Reflux = require('reflux')
 
 var actions = Reflux.createActions([
@@ -8,6 +10,36 @@ var actions = Reflux.createActions([
 module.exports = Reflux.createStore({
   listenables: [actions],
   onUpdate: function (user) {
+    var currentUser = JSON.parse(localStorage.getItem('currentUser'))
+
+    if (currentUser.id === user.id) {
+      localStorage.setItem('currentUser', JSON.stringify(user))
+    }
+
+    if (user.userType === 'team') {
+      var isMyTeam = user.Members.some(function (member) {
+        if (currentUser.id === member.id) {
+          return true
+        }
+        return false
+      })
+
+      if (isMyTeam) {
+        var isNew = !currentUser.Teams.some(function (team, index) {
+          if (user.id === team.id) {
+            currentUser.Teams.splice(index, 1, user)
+            return true
+          }
+          return false
+        })
+
+        if (isNew) {
+          currentUser.Teams.push(user)
+        }
+        localStorage.setItem('currentUser', JSON.stringify(currentUser))
+      }
+    }
+
     this.trigger({
       status: 'userUpdated',
       data: user

browser/styles/main/containers/LoginContainer.styl

@@ -9,7 +9,7 @@
     display block
     margin 0 auto
   .authNavigator
-    margin 15px 0
+    margin 15px 0 25px
     a
       font-size 1.5em
       text-decoration none
@@ -47,7 +47,8 @@
     .dividerLabel
       text-align center
       position relative
-      top -35px
+      top -27px
+      font-size 1.3em
       background-color backgroundColor
       margin 0 auto
       width 50px

browser/styles/main/containers/UserContainer.styl

@@ -166,6 +166,23 @@
         border-color darken(brandBorderColor, 10%)
         background-color brandColor
         color white
+      .newPlanetTooltip
+        position fixed
+        z-index 500
+        background-color transparentify(invBackgroundColor, 80%)
+        color invTextColor
+        padding 10px
+        line-height 1em
+        border-radius 5px
+        margin-top -23px
+        margin-left 33px
+        white-space nowrap
+        font-size 1.1em
+        opacity 0
+        transition 0.1s
+        pointer-events none
+      &:hover .newPlanetTooltip
+        opacity 1
   .UserContainer
     absolute top bottom right
     left 55px
@@ -208,6 +225,13 @@
         li
           margin-bottom 10px
           font-size 1.1em
+          .createTeamButton, .addMemberButton
+            btnStripDefault()
+      .members .role
+        margin-left 7px
+        margin-top 2px
+        color inactiveTextColor
+        font-size 0.85em
     .planetList
       absolute right bottom
       top 125px
@@ -226,3 +250,5 @@
           margin-left 15px
           li
             margin-bottom 10px
+            .createPlanetButton
+              btnStripDefault()

browser/styles/main/containers/UserSettingContainer.styl

@@ -1,33 +0,0 @@
-.UserSettingContainer
-  absolute top bottom right
-  left 50px
-  .UserSettingNavigation
-    absolute top bottom left
-    width 200px
-    padding 15px
-    box-sizing border-box
-    border-right solid 1px borderColor
-    .userName
-      font-size 2.0em
-      margin 10px 0
-      color brandColor
-    a
-      display block
-      color textColor
-      width 100%
-      padding 15px
-      margin-bottom 5px
-      border-radius 10px
-      box-sizing border-box
-      cursor pointer
-      &:hover, &.hover
-        color brandColor
-        background-color hoverBackgroundColor
-      &:active, &.active
-        color brandColor
-
-  .UserSettingMain
-    absolute top bottom right
-    left 200px
-    padding 10px
-    box-sizing border-box

browser/styles/shared/modal.styl

@@ -58,7 +58,7 @@
       padding 15px
 
   .EditProfileModal, .PlanetSettingModal
-    .userInfoTab, .paswordTab, .planetProfileTab
+    .userInfoTab, .passwordTab, .planetProfileTab, .userInfoTab, .membersTab
       padding-top 45px
       .formField
         position relative