add PersonalSettingModal

browser/main/Containers/LoginContainer.jsx

@@ -2,7 +2,6 @@ var React = require('react/addons')
 var ReactRouter = require('react-router')
 var Link = ReactRouter.Link
 
-var AuthStore = require('../Stores/AuthStore')
 var AuthActions = require('../Actions/AuthActions')
 
 var OnlyGuest = require('../Mixins/OnlyGuest')
@@ -15,12 +14,6 @@ module.exports = React.createClass({
       password: ''
     }
   },
-  componentDidMount: function () {
-    this.unsubscribe = AuthStore.listen(this.onLogin)
-  },
-  componentWillUnmount: function () {
-    this.unsubscribe()
-  },
   handleSubmit: function (e) {
     AuthActions.login({
       email: this.state.email,
@@ -28,14 +21,6 @@ module.exports = React.createClass({
     })
     e.preventDefault()
   },
-  onLogin: function (user) {
-    var planet = user.Planets.length > 0 ? user.Planets[0] : null
-    if (planet == null) {
-      this.transitionTo('user', {userName: user.name})
-      return
-    }
-    this.transitionTo('planetHome', {userName: user.name, planetName: planet.name})
-  },
   render: function () {
     return (
       <div className='LoginContainer'>

browser/main/Containers/MainContainer.jsx

@@ -2,8 +2,33 @@ var React = require('react/addons')
 var ReactRouter = require('react-router')
 var RouteHandler = ReactRouter.RouteHandler
 
+var AuthStore = require('../Stores/AuthStore')
+
 module.exports = React.createClass({
     mixins: [ReactRouter.Navigation, ReactRouter.State],
+    componentDidMount: function () {
+      this.unsubscribe = AuthStore.listen(this.onListen)
+    },
+    componentWillUnmount: function () {
+      this.unsubscribe()
+    },
+    onListen: function (res) {
+      if (res.status === 'loggedIn' || res.status === 'registered') {
+        var user = res.data
+        var planet = user.Planets.length > 0 ? user.Planets[0] : null
+        if (planet == null) {
+          this.transitionTo('user', {userName: user.name})
+          return
+        }
+        this.transitionTo('planetHome', {userName: user.name, planetName: planet.name})
+        return
+      }
+
+      if (res.status === 'loggedOut') {
+        this.transitionTo('login')
+        return
+      }
+    },
     render: function () {
       // Redirect Login state
       if (this.getPath() === '/') {

browser/main/Containers/PlanetContainer.jsx

@@ -56,18 +56,21 @@ module.exports = React.createClass({
   },
   getInitialState: function () {
     return {
+      currentUser: AuthStore.getUser(),
       currentPlanet: null,
       search: '',
       isFetched: false
     }
   },
   componentDidMount: function () {
-    this.unsubscribe = PlanetStore.listen(this.onFetched)
+    this.unsubscribePlanet = PlanetStore.listen(this.onFetched)
+    this.unsubscribeAuth = AuthStore.listen(this.onListenAuth)
 
     PlanetActions.fetchPlanet(this.props.params.userName, this.props.params.planetName)
   },
   componentWillUnmount: function () {
-    this.unsubscribe()
+    this.unsubscribePlanet()
+    this.unsubscribeAuth()
   },
   componentDidUpdate: function () {
     if (this.state.currentPlanet == null || this.state.currentPlanet.name !== this.props.params.planetName || this.state.currentPlanet.userName !== this.props.params.userName) {
@@ -161,6 +164,19 @@ module.exports = React.createClass({
       React.findDOMNode(this).querySelector('.PlanetHeader .searchInput input').focus()
     }
   },
+  onListenAuth: function (res) {
+    if (res.status === 'userProfileUpdated') {
+      if (this.state.currentPlanet != null) {
+        res.data.Planets.some(function (planet) {
+          if (planet.id === this.state.currentPlanet.id) {
+            this.transitionTo('planet', {userName: planet.userName, planetName: planet.name})
+            return true
+          }
+          return false
+        }.bind(this))
+      }
+    }
+  },
   onFetched: function (res) {
     if (res == null) {
       return
@@ -396,8 +412,7 @@ module.exports = React.createClass({
 
   },
   render: function () {
-    var user = AuthStore.getUser()
-    if (user == null) return (<div/>)
+    if (this.state.currentUser == null) return (<div/>)
     if (this.state.currentPlanet == null) return (<div/>)
 
     var localId = parseInt(this.props.params.localId, 10)

browser/main/Containers/RegisterContainer.jsx

@@ -2,7 +2,6 @@ var React = require('react/addons')
 var ReactRouter = require('react-router')
 var Link = ReactRouter.Link
 
-var AuthStore = require('../Stores/AuthStore')
 var AuthActions = require('../Actions/AuthActions')
 
 var OnlyGuest = require('../Mixins/OnlyGuest')
@@ -17,12 +16,6 @@ module.exports = React.createClass({
       profileName: ''
     }
   },
-  componentDidMount: function () {
-    this.unsubscribe = AuthStore.listen(this.onRegister)
-  },
-  componentWillUnmount: function () {
-    this.unsubscribe()
-  },
   handleSubmit: function (e) {
     AuthActions.register({
       email: this.state.email,
@@ -33,14 +26,6 @@ module.exports = React.createClass({
 
     e.preventDefault()
   },
-  onRegister: function (user) {
-    var planet = user.Planets.length > 0 ? user.Planets[0] : null
-    if (planet == null) {
-      this.transitionTo('user', {userName: user.name})
-      return
-    }
-    this.transitionTo('planetHome', {userName: user.name, planetName: planet.name})
-  },
   render: function () {
     return (
       <div className='RegisterContainer'>

browser/main/Containers/UserContainer.jsx

@@ -2,6 +2,8 @@
 var React = require('react/addons')
 var ReactRouter = require('react-router')
 var RouteHandler = ReactRouter.RouteHandler
+var Link = ReactRouter.Link
+var request = require('superagent')
 
 var UserNavigator = require('../Components/UserNavigator')
 
@@ -9,22 +11,49 @@ var AuthStore = require('../Stores/AuthStore')
 var PlanetStore = require('../Stores/PlanetStore')
 
 module.exports = React.createClass({
-  mixins: [React.addons.LinkedStateMixin, ReactRouter.Navigation],
+  mixins: [React.addons.LinkedStateMixin, ReactRouter.Navigation, ReactRouter.State],
   propTypes: {
     params: React.PropTypes.shape({
+      userName: React.PropTypes.string,
       planetName: React.PropTypes.string
     })
   },
   getInitialState: function () {
     return {
-      currentUser: AuthStore.getUser()
+      currentUser: AuthStore.getUser(),
+      isUserFetched: false,
+      user: null
     }
   },
   componentDidMount: function () {
-    this.unsubscribe = PlanetStore.listen(this.onListen)
+    this.unsubscribePlanet = PlanetStore.listen(this.onListen)
+    this.unsubscribeAuth = AuthStore.listen(this.onListen)
+
+    if (this.isActive('userHome')) {
+      this.fetchUser(this.props.params.userName)
+    }
   },
   componentWillUnmount: function () {
-    this.unsubscribe()
+    this.unsubscribePlanet()
+    this.unsubscribeAuth()
+  },
+  componentDidUpdate: function () {
+    if (this.isActive('userHome') && (this.state.user == null || this.state.user.name !== this.props.params.userName)) {
+      this.fetchUser(this.props.params.userName)
+    }
+  },
+  fetchUser: function (userName) {
+    request
+      .get('http://localhost:8000/' + userName)
+      .send()
+      .end(function (err, res) {
+        if (err) {
+          console.error(err)
+          return
+        }
+
+        this.setState({user: res.body, isUserFetched: true})
+      }.bind(this))
   },
   onListen: function (res) {
     if (res.status == null) return
@@ -40,10 +69,15 @@ module.exports = React.createClass({
     if (res.status === 'nameChanged') {
       this.setState({currentUser: AuthStore.getUser()})
     }
+
+    if (res.status === 'userProfileUpdated') {
+      this.setState({currentUser: AuthStore.getUser()})
+    }
   },
   render: function () {
     var currentPlanetName = this.props.params.planetName
     var currentUser = this.state.currentUser
+    var user = this.state.user
 
     // user must be logged in
     if (currentUser == null) return (<div></div>)
@@ -57,10 +91,49 @@ module.exports = React.createClass({
       return false
     })
 
+    var content
+    if (this.isActive('userHome')) {
+      if (this.state.isUserFetched === false) {
+        content = (
+          <div className='UserHome'>
+            User Loading...
+          </div>
+        )
+      } else {
+        var planets = 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>
+            </li>
+          )
+        })
+        content = (
+          <div className='UserHome'>
+            <h1>User Profile</h1>
+            <div className='userProfile'>
+              <img className='userPhoto' width='150' height='150' src='../vendor/dummy.jpg'/>
+              <div className='userIntro'>
+                <div className='userProfileName'>{user.profileName}</div>
+                <Link className='userName' to='user' params={{userName: user.name}}>{user.name}</Link>
+              </div>
+            </div>
+            <h2>Planets</h2>
+            <ul className='userPlanetList'>
+              {planets}
+            </ul>
+          </div>
+        )
+      }
+    } else {
+      content = (
+        <RouteHandler/>
+      )
+    }
+
     return (
       <div className='UserContainer'>
         <UserNavigator currentPlanet={currentPlanet} currentUser={currentUser}/>
-        <RouteHandler/>
+        {content}
       </div>
     )
   }