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,
-        profileName: targetUser.profileName,
-        email: targetUser.email
+        name: user.name,
+        profileName: user.profileName,
+        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) {
-          this.setState({currentUser: res.data})
+        var user = 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)
 
-        this.props.transitionTo('planetHome', {userName: planet.userName, planetName: planet.name})
+        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)
-        this.props.transitionTo('userHome', {userName: team.name})
+
+        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>
+    )
+  }
+})