update behavior

browser/main/Components/PlanetArticleList.jsx

@@ -8,11 +8,7 @@ var Markdown = require('../Mixins/Markdown')
 var PlanetArticleList = React.createClass({
   mixins: [ReactRouter.Navigation, ReactRouter.State, ForceUpdate(60000), Markdown],
   propTypes: {
-    planet: React.PropTypes.shape({
-      Snippets: React.PropTypes.array,
-      Blueprints: React.PropTypes.array,
-      Articles: React.PropTypes.array
-    }),
+    articles: React.PropTypes.array,
     onPressDown: React.PropTypes.func,
     onPressUp: React.PropTypes.func
   },
@@ -28,7 +24,7 @@ var PlanetArticleList = React.createClass({
     }
   },
   render: function () {
-    var articles = this.props.planet.Articles.map(function (article) {
+    var articles = this.props.articles.map(function (article) {
       var tags = article.Tags.length > 0 ? article.Tags.map(function (tag) {
         return (
           <a key={tag.id} href>#{tag.name}</a>
@@ -92,7 +88,7 @@ var PlanetArticleList = React.createClass({
 
     return (
       <div className='PlanetArticleList'>
-        <ul onKeyDown={this.handleKeyDown} tabIndex='1'>
+        <ul onKeyDown={this.handleKeyDown} tabIndex='2'>
           {articles}
         </ul>
       </div>

browser/main/Components/PlanetHeader.jsx

@@ -3,13 +3,17 @@ var React = require('react/addons')
 var PlanetHeader = React.createClass({
   propTypes: {
     currentPlanet: React.PropTypes.object,
-    currentUser: React.PropTypes.object
+    currentUser: React.PropTypes.object,
+    onSearchChange: React.PropTypes.func
   },
   getInitialState: function () {
     return {
       isMenuDropDownOpen: false
     }
   },
+  componentDidMount: function () {
+    React.findDOMNode(this.refs.search).focus()
+  },
   toggleMenuDropDown: function () {
     this.setState({isMenuDropDownOpen: !this.state.isMenuDropDownOpen}, function () {
       if (this.state.isMenuDropDownOpen) {
@@ -24,6 +28,10 @@ var PlanetHeader = React.createClass({
   interceptClick: function (e) {
     e.stopPropagation()
   },
+  handleChange: function (e) {
+    this.setState({search: e.target.value})
+    this.props.onSearchChange(e.target.value)
+  },
   render: function () {
     var currentPlanetName = this.props.currentPlanet.name
 
@@ -40,7 +48,7 @@ var PlanetHeader = React.createClass({
         </div>
         <span className='searchInput'>
           <i className='fa fa-search'/>
-          <input type='text' className='inline-input circleInput' placeholder='Search...'/>
+          <input onChange={this.handleChange} value={this.state.search} ref='search' tabIndex='1' type='text' className='inline-input circleInput' placeholder='Search...'/>
         </span>
         <a className='downloadBtn btn-primary'>Download Mac app</a>
       </div>