refactor Router & add User settings

browser/main/Containers/PlanetContainer.jsx

@@ -29,49 +29,44 @@ var userPlanets = [
   }
 ]
 
-var PlanetNavigator = React.createClass({
-  propTypes: {
-    currentPlanet: React.PropTypes.object,
-    currentUser: React.PropTypes.object
-  },
-  render: function () {
-    var planets = userPlanets.map(function (planet, index) {
-      return (
-        <li key={planet.id} className={this.props.currentPlanet.name === planet.name ? 'active' : ''}>
-          <a>{planet.profileName[0]}</a>
-          <div className='shortCut'>⌘{index + 1}</div>
-        </li>
-      )
-    }.bind(this))
-
-    return (
-      <div className='PlanetNavigator'>
-        <a className='userConfig'>
-          <img width='50' height='50' src='../vendor/dummy.jpg'/>
-        </a>
-        <ul>
-          {planets}
-        </ul>
-        <button className='newPlanet'><i className='fa fa-plus'/></button>
-      </div>
-    )
-  }
-})
-
 var PlanetHeader = React.createClass({
   propTypes: {
     currentPlanet: React.PropTypes.object,
     currentUser: React.PropTypes.object
   },
+  getInitialState: function () {
+    return {
+      isMenuDropDownOpen: false
+    }
+  },
+  toggleMenuDropDown: function () {
+    this.setState({isMenuDropDownOpen: !this.state.isMenuDropDownOpen}, function () {
+      if (this.state.isMenuDropDownOpen) {
+        document.body.onclick = function () {
+          this.setState({isMenuDropDownOpen: false}, function () {
+            document.body.onclick = null
+          })
+        }.bind(this)
+      }
+    })
+  },
+  interceptClick: function (e) {
+    e.stopPropagation()
+  },
   render: function () {
     var currentPlanetName = this.props.currentPlanet.name
 
     return (
-      <div className='PlanetHeader'>
+      <div onClick={this.interceptClick} className='PlanetHeader'>
         <span className='planetName'>{currentPlanetName}</span>
-        <button className='menuBtn'>
+        <button onClick={this.toggleMenuDropDown} className={this.state.isMenuDropDownOpen ? 'menuBtn active' : 'menuBtn'}>
           <i className='fa fa-chevron-down'></i>
         </button>
+        <div className={this.state.isMenuDropDownOpen ? 'dropDown' : 'dropDown hide'} ref='menuDropDown'>
+          <a href='#'><i className='fa fa-wrench fa-fw'/> Planet Setting</a>
+          <a href='#'><i className='fa fa-group fa-fw'/> Manage member</a>
+          <a href='#'><i className='fa fa-trash fa-fw'/> Delete Planet</a>
+        </div>
         <span className='searchInput'>
           <i className='fa fa-search'/>
           <input type='text' className='inline-input circleInput' placeholder='Search...'/>
@@ -143,7 +138,7 @@ var SideNavigator = React.createClass({
             <i className='fa fa-code fa-fw'/> Snippets
           </Link>
           <Link to='blueprint' params={{userName: currentUserName, planetName: currentPlanetName}}>
-            <i className='fa fa-wrench fa-fw'/> Blueprints
+            <i className='fa fa-file-text-o fa-fw'/> Blueprints
           </Link>
         </nav>
       </div>
@@ -189,7 +184,6 @@ module.exports = React.createClass({
 
     return (
       <div className='PlanetContainer'>
-        <PlanetNavigator currentPlanet={currentPlanet} currentUser={currentUser}/>
         <PlanetMain currentPlanet={currentPlanet} currentUser={currentUser}/>
       </div>
     )

browser/main/Containers/UserContainer.jsx

@@ -0,0 +1,85 @@
+var React = require('react/addons')
+var ReactRouter = require('react-router')
+var Link = ReactRouter.Link
+var RouteHandler = ReactRouter.RouteHandler
+
+// Dummy
+var currentUser = {
+  name: 'testcat',
+  email: 'testcat@example.com',
+  profileName: 'Test Cat'
+}
+
+var userPlanets = [
+  {
+    id: 1,
+    name: 'testcat',
+    profileName: 'TestCat'
+  },
+  {
+    id: 2,
+    name: 'group1',
+    profileName: 'Some Group#1'
+  },
+  {
+    id: 3,
+    name: 'group2',
+    profileName: 'Some Group#1'
+  }
+]
+
+var UserNavigator = React.createClass({
+  propTypes: {
+    currentPlanet: React.PropTypes.object,
+    currentUser: React.PropTypes.object
+  },
+  render: function () {
+    var planets = userPlanets.map(function (planet, index) {
+      return (
+        <li key={planet.id} className={this.props.currentPlanet != null && this.props.currentPlanet.name === planet.name ? 'active' : ''}>
+          <a href>{planet.profileName[0]}</a>
+          <div className='shortCut'>⌘{index + 1}</div>
+        </li>
+      )
+    }.bind(this))
+    if (this.props.currentUser == null) {
+      return (
+        <div className='UserNavigator'>
+        </div>
+      )
+    }
+
+    return (
+      <div className='UserNavigator'>
+        <Link to='userHome' params={{userName: this.props.currentUser.name}} className='userConfig'>
+          <img width='50' height='50' src='../vendor/dummy.jpg'/>
+        </Link>
+        <ul>
+          {planets}
+        </ul>
+        <button className='newPlanet'><i className='fa fa-plus'/></button>
+      </div>
+    )
+  }
+})
+
+module.exports = React.createClass({
+  mixins: [React.addons.LinkedStateMixin, ReactRouter.Navigation],
+  render: function () {
+    var currentPlanetName = this.props.params.planetName
+    var currentPlanet = null
+    userPlanets.some(function (planet) {
+      if (planet.name === currentPlanetName) {
+        currentPlanet = planet
+        return true
+      }
+      return false
+    })
+    return (
+      <div className='UserContainer'>
+        <UserNavigator currentPlanet={currentPlanet} currentUser={currentUser}/>
+        <RouteHandler/>
+      </div>
+    )
+  }
+})

browser/main/Containers/UserSettingContainer.jsx

@@ -0,0 +1,115 @@
+var React = require('react/addons')
+var ReactRouter = require('react-router')
+var Link = ReactRouter.Link
+
+var currentUser = {
+  name: 'testcat',
+  email: 'testcat@example.com',
+  profileName: 'Test Cat'
+}
+
+var UserSettingNavigation = React.createClass({
+  propTypes: {
+    currentUser: React.PropTypes.shape({
+      name: React.PropTypes.string
+    })
+  },
+  changeFactory: function (current) {
+    return function () {
+      this.props.changeCurrent(current)
+    }.bind(this)
+  },
+  render: function () {
+    return (
+      <div className='UserSettingNavigation'>
+        <div className='userName'>{this.props.currentUser.name}</div>
+        <nav>
+          <a className={this.props.current === 'profile' ? 'active' : ''} onClick={this.changeFactory('profile')}><i className='fa fa-user fa-fw'/> Profile</a>
+          <a className={this.props.current === 'setting' ? 'active' : ''} onClick={this.changeFactory('setting')}><i className='fa fa-gears fa-fw'/> Setting</a>
+          <a className={this.props.current === 'integration' ? 'active' : ''} onClick={this.changeFactory('integration')}><i className='fa fa-share-alt fa-fw'/> Integration</a>
+          <a className={this.props.current === 'help' ? 'active' : ''} onClick={this.changeFactory('help')}><i className='fa fa-info-circle fa-fw'/> Help</a>
+          <a onClick={this.logOut}><i className='fa fa-sign-out fa-fw'/> Logout</a>
+        </nav>
+      </div>
+    )
+  }
+})
+
+var UserSettingMain = React.createClass({
+  propTypes: {
+    currentUser: React.PropTypes.shape({
+      name: React.PropTypes.string
+    })
+  },
+  render: function () {
+    var view
+
+    switch (this.props.current) {
+      case 'profile':
+        view = (
+          <div>
+            <h1>User Info</h1>
+            <form>
+              <div>
+                <label>Name</label> <input className='inline-input'/>
+              </div>
+              <div>
+                <label>Mail</label> <input className='inline-input'/>
+              </div>
+              <div>
+                <button className='btn-primary'>Save</button>
+              </div>
+            </form>
+            <hr/>
+            <h1>Password Reset</h1>
+            <form>
+              <div>
+                <label>Name</label> <input className='inline-input'/>
+              </div>
+              <div>
+                <label>Mail</label> <input className='inline-input'/>
+              </div>
+              <div>
+                <button className='btn-primary'>Save</button>
+              </div>
+            </form>
+          </div>
+        )
+        break
+      default:
+        view = (
+          <div>
+            Missing...
+          </div>
+        )
+        break
+    }
+    return (
+      <div className='UserSettingMain'>
+        {view}
+      </div>
+    )
+  }
+})
+
+module.exports = React.createClass({
+  mixins: [React.addons.LinkedStateMixin, ReactRouter.Navigation],
+  getInitialState: function () {
+    return {
+      current: 'profile'
+    }
+  },
+  changeCurrent: function (current) {
+    this.setState({
+      current: current
+    })
+  },
+  render: function () {
+    return (
+      <div className='UserSettingContainer'>
+        <UserSettingNavigation currentUser={currentUser} current={this.state.current} changeCurrent={this.changeCurrent}/>
+        <UserSettingMain currentUser={currentUser} current={this.state.current}/>
+      </div>
+    )
+  }
+})