on Refactor... #4

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}