add PersonalSettingModal

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>
     )
   }