switch Angular -> React(half done)

browser/main/Containers/PlanetContainer.jsx

@@ -0,0 +1,138 @@
+var React = require('react/addons')
+var RouteHandler = require('react-router').RouteHandler
+var ReactRouter = require('react-router')
+var Link = ReactRouter.Link
+
+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 PlanetNavigator = React.createClass({
+  propTypes: {
+    currentPlanet: React.PropTypes.object
+  },
+  render: function () {
+    var planets = userPlanets.map(function (planet) {
+      return (
+        <li key={planet.id} className={this.props.currentPlanet.name === planet.name ? 'active' : ''}><a>{planet.profileName[0]}</a></li>
+      )
+    }.bind(this))
+
+    return (
+      <div className='PlanetNavigator'>
+        <ul>
+          {planets}
+        </ul>
+      </div>
+    )
+  }
+})
+
+var PlanetMain = React.createClass({
+  propTypes: {
+    currentPlanet: React.PropTypes.object
+  },
+  render: function () {
+    return (
+      <div className='PlanetMain'>
+        <SideNavigator currentPlanet={this.props.currentPlanet}/>
+        <Screen currentPlanet={this.props.currentPlanet}/>
+      </div>
+    )
+  }
+})
+
+var SideNavigator = React.createClass({
+  propTypes: {
+    currentPlanet: React.PropTypes.shape({
+      name: React.PropTypes.string
+    })
+  },
+  render: function () {
+    var currentPlanetName = this.props.currentPlanet.name
+
+    return (
+      <div className='SideNavigator'>
+        <div className='nav-header'>
+          <p className='planet-name'>{currentPlanetName}</p>
+          <button className='menu-btn'>
+            <i className='fa fa-chevron-down'></i>
+          </button>
+        </div>
+        <button className='btn-primary btn-block'>
+          <i className='fa fa-rocket fa-fw'/> Launch
+        </button>
+        <nav>
+          <Link to='dashboard' params={{planetName: currentPlanetName}}>
+            <i className='fa fa-home fa-fw'/> Home
+          </Link>
+          <Link to='snippets' params={{planetName: currentPlanetName}}>
+            <i className='fa fa-code fa-fw'/> Snippets
+          </Link>
+          <Link to='blueprint' params={{planetName: currentPlanetName}}>
+            <i className='fa fa-wrench fa-fw'/> Blueprints
+          </Link>
+        </nav>
+      </div>
+    )
+  }
+})
+
+var Screen = React.createClass({
+  render: function () {
+    return (
+      <div className='Screen'>
+        <RouteHandler/>
+      </div>
+    )
+  }
+})
+
+module.exports = React.createClass({
+  mixins: [ReactRouter.Navigation],
+  propTypes: {
+    params: React.PropTypes.object,
+    planetName: React.PropTypes.string
+  },
+  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
+    })
+    if (currentPlanet == null) {
+      var redirectTo = userPlanets[0].name
+      this.transitionTo('planet', {planetName: redirectTo})
+      return (
+        <div className='PlanetContainer'>
+          Redirecting...
+        </div>
+      )
+    }
+
+    return (
+      <div className='PlanetContainer'>
+        <PlanetNavigator currentPlanet={currentPlanet}/>
+        <PlanetMain currentPlanet={currentPlanet}/>
+      </div>
+    )
+  }
+})