refactor hotkeys

2025-12-13 09:46:22 +00:00 · 2015-07-19 15:06:36 +09:00
parent 16b60ada50
commit e9308bdd69
10 changed files with 233 additions and 115 deletions
--- a/browser/main/Components/BlueprintDeleteModal.jsx
+++ b/browser/main/Components/BlueprintDeleteModal.jsx
@@ -9,6 +9,7 @@ var BlueprintDeleteModal = React.createClass({
  },
  componentDidMount: function () {
    this.unsubscribe = PlanetStore.listen(this.onListen)
+    React.findDOMNode(this.refs.submit).focus()
  },
  componentWillUnmount: function () {
    this.unsubscribe()
@@ -23,12 +24,18 @@ var BlueprintDeleteModal = React.createClass({
  stopPropagation: function (e) {
    e.stopPropagation()
  },
+  handleKeyDown: function (e) {
+    if ((e.keyCode === 13 && e.metaKey)) {
+      e.preventDefault()
+      this.submit()
+    }
+  },
  submit: function () {
    PlanetActions.deleteBlueprint(this.props.blueprint.id)
  },
  render: function () {
    return (
-      <div onClick={this.stopPropagation} className='BlueprintDeleteModal modal'>
+      <div onKeyDown={this.handleKeyDown} onClick={this.stopPropagation} className='BlueprintDeleteModal modal'>
        <div className='modal-header'>
          <h1>Delete Blueprint</h1>
        </div>
@@ -37,8 +44,8 @@ var BlueprintDeleteModal = React.createClass({
        </div>
        <div className='modal-footer'>
          <div className='modal-control'>
-            <button onClick={this.props.close} className='btn-default'>Cancle</button>
-            <button onClick={this.submit} className='btn-primary'>Delete</button>
+            <button onClick={this.props.close} className='btn-default'>Cancel</button>
+            <button ref='submit' onClick={this.submit} className='btn-primary'>Delete</button>
          </div>
        </div>
      </div>
--- a/browser/main/Components/BlueprintForm.jsx
+++ b/browser/main/Components/BlueprintForm.jsx
@@ -94,6 +94,7 @@ var BlueprintForm = React.createClass({
  handleKeyDown: function (e) {
    if (e.keyCode === 13 && e.metaKey) {
      this.submit()
+      e.stopPropagation()
    }
  },
  render: function () {
--- a/browser/main/Components/ModalBase.jsx
+++ b/browser/main/Components/ModalBase.jsx
@@ -9,7 +9,7 @@ var ModalBase = React.createClass({
  render: function () {
    if (this.props.isOpen) {
      return (
-        <div onClick={this.props.close} className='ModalBase'>
+        <div ref='modal' onClick={this.props.close} className='ModalBase'>
          {this.props.children}
        </div>
      )
--- a/browser/main/Components/PlanetArticleDetail.jsx
+++ b/browser/main/Components/PlanetArticleDetail.jsx
@@ -2,11 +2,6 @@ var React = require('react/addons')
 var moment = require('moment')

 var CodeViewer = require('../Components/CodeViewer')
-var ModalBase = require('../Components/ModalBase')
-var SnippetEditModal = require('../Components/SnippetEditModal')
-var SnippetDeleteModal = require('../Components/SnippetDeleteModal')
-var BlueprintEditModal = require('../Components/BlueprintEditModal')
-var BlueprintDeleteModal = require('../Components/BlueprintDeleteModal')

 var ForceUpdate = require('../Mixins/ForceUpdate')
 var Markdown = require('../Mixins/Markdown')
@@ -14,31 +9,15 @@ var Markdown = require('../Mixins/Markdown')
 var PlanetArticleDetail = React.createClass({
  mixins: [ForceUpdate(60000), Markdown],
  propTypes: {
-    article: React.PropTypes.object
+    article: React.PropTypes.object,
+    onOpenEditModal: React.PropTypes.func,
+    onOpenDeleteModal: React.PropTypes.func
  },
  getInitialState: function () {
    return {
      isEditModalOpen: false
    }
  },
-  openEditModal: function () {
-    this.setState({isEditModalOpen: true})
-  },
-  closeEditModal: function () {
-    this.setState({isEditModalOpen: false})
-  },
-  submitEditModal: function () {
-    this.setState({isEditModalOpen: false})
-  },
-  openDeleteModal: function () {
-    this.setState({isDeleteModalOpen: true})
-  },
-  closeDeleteModal: function () {
-    this.setState({isDeleteModalOpen: false})
-  },
-  submitDeleteModal: function () {
-    this.setState({isDeleteModalOpen: false})
-  },
  render: function () {
    var article = this.props.article

@@ -55,17 +34,9 @@ var PlanetArticleDetail = React.createClass({
          <div className='viewer-header'>
            <i className='fa fa-code fa-fw'></i> {article.callSign} <small className='updatedAt'>{moment(article.updatedAt).fromNow()}</small>
            <span className='control-group'>
-              <button onClick={this.openEditModal} className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
-              <button onClick={this.openDeleteModal} className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
+              <button onClick={this.props.onOpenEditModal} className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
+              <button onClick={this.props.onOpenDeleteModal} className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
            </span>
-
-            <ModalBase isOpen={this.state.isEditModalOpen} close={this.closeEditModal}>
-              <SnippetEditModal snippet={article} submit={this.submitEditModal} close={this.closeEditModal}/>
-            </ModalBase>
-
-            <ModalBase isOpen={this.state.isDeleteModalOpen} close={this.closeDeleteModal}>
-              <SnippetDeleteModal snippet={article} submit={this.submitDeleteModal} close={this.closeDeleteModal}/>
-            </ModalBase>
          </div>
          <div className='viewer-body'>
            <div className='viewer-detail'>
@@ -84,17 +55,9 @@ var PlanetArticleDetail = React.createClass({
        <div className='viewer-header'>
          <i className='fa fa-file-text-o fa-fw'></i> {article.title} <small className='updatedAt'>{moment(article.updatedAt).fromNow()}</small>
          <span className='control-group'>
-            <button onClick={this.openEditModal} className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
-            <button onClick={this.openDeleteModal} className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
+            <button onClick={this.props.onOpenEditModal} className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
+            <button onClick={this.props.onOpenDeleteModal} className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
          </span>
-
-          <ModalBase isOpen={this.state.isEditModalOpen} close={this.closeEditModal}>
-            <BlueprintEditModal blueprint={article} submit={this.submitEditModal} close={this.closeEditModal}/>
-          </ModalBase>
-
-          <ModalBase isOpen={this.state.isDeleteModalOpen} close={this.closeDeleteModal}>
-            <BlueprintDeleteModal blueprint={article} submit={this.submitDeleteModal} close={this.closeDeleteModal}/>
-          </ModalBase>
        </div>
        <div className='viewer-body'>
          <div className='tags'><i className='fa fa-tags'/>{tags}</div>
--- a/browser/main/Components/PlanetArticleList.jsx
+++ b/browser/main/Components/PlanetArticleList.jsx
@@ -8,20 +8,10 @@ var Markdown = require('../Mixins/Markdown')
 var PlanetArticleList = React.createClass({
  mixins: [ReactRouter.Navigation, ReactRouter.State, ForceUpdate(60000), Markdown],
  propTypes: {
-    articles: React.PropTypes.array,
-    onPressDown: React.PropTypes.func,
-    onPressUp: React.PropTypes.func
+    articles: React.PropTypes.array
  },
  handleKeyDown: function (e) {
-    switch (e.keyCode) {
-      case 38:
-        e.preventDefault()
-        this.props.onPressUp()
-        break
-      case 40:
-        e.preventDefault()
-        this.props.onPressDown()
-    }
+    e.preventDefault()
  },
  render: function () {
    var articles = this.props.articles.map(function (article) {
--- a/browser/main/Components/PlanetHeader.jsx
+++ b/browser/main/Components/PlanetHeader.jsx
@@ -8,7 +8,8 @@ var PlanetHeader = React.createClass({
  },
  getInitialState: function () {
    return {
-      isMenuDropDownOpen: false
+      isMenuDropDownOpen: false,
+      search: ''
    }
  },
  componentDidMount: function () {
@@ -32,6 +33,11 @@ var PlanetHeader = React.createClass({
    this.setState({search: e.target.value})
    this.props.onSearchChange(e.target.value)
  },
+  handleKeyDown: function (e) {
+    if (e.keyCode === 27) {
+      React.findDOMNode(this.refs.search).blur()
+    }
+  },
  render: function () {
    var currentPlanetName = this.props.currentPlanet.name

@@ -48,7 +54,7 @@ var PlanetHeader = React.createClass({
        </div>
        <span className='searchInput'>
          <i className='fa fa-search'/>
-          <input onChange={this.handleChange} value={this.state.search} ref='search' tabIndex='1' type='text' className='inline-input circleInput' placeholder='Search...'/>
+          <input onKeyDown={this.handleKeyDown} 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>
--- a/browser/main/Components/PlanetNavigator.jsx
+++ b/browser/main/Components/PlanetNavigator.jsx
@@ -1,8 +1,5 @@
 var React = require('react/addons')

-var ModalBase = require('../Components/ModalBase')
-var LaunchModal = require('../Components/LaunchModal')
-
 var PlanetNavigator = React.createClass({
  propTypes: {
    currentPlanet: React.PropTypes.shape({
@@ -10,31 +7,14 @@ var PlanetNavigator = React.createClass({
    }),
    currentUser: React.PropTypes.shape({
      name: React.PropTypes.string
-    })
+    }),
+    onOpenLaunchModal: React.PropTypes.func
  },
  getInitialState: function () {
    return {
      isLaunchModalOpen: false
    }
  },
-  handleKeyDown: function (e) {
-    if (e.keyCode === 13 && e.metaKey) {
-      e.preventDefault()
-      this.openLaunchModal()
-    }
-  },
-  componentDidMount: function () {
-    document.addEventListener('keydown', this.handleKeyDown, false)
-  },
-  componentWillUnmount: function () {
-    document.removeEventListener('keydown', this.handleKeyDown, false)
-  },
-  openLaunchModal: function () {
-    this.setState({isLaunchModalOpen: true})
-  },
-  closeLaunchModal: function () {
-    this.setState({isLaunchModalOpen: false})
-  },
  submitLaunchModal: function (ret) {
    console.log(ret)
    this.setState({isLaunchModalOpen: false})
@@ -42,12 +22,9 @@ var PlanetNavigator = React.createClass({
  render: function () {
    return (
      <div className='PlanetNavigator'>
-        <button onClick={this.openLaunchModal} className='btn-primary btn-block'>
+        <button onClick={this.props.onOpenLaunchModal} className='btn-primary btn-block'>
          <i className='fa fa-rocket fa-fw'/> Launch
        </button>
-        <ModalBase isOpen={this.state.isLaunchModalOpen} close={this.closeLaunchModal}>
-          <LaunchModal submit={this.submitLaunchModal} close={this.closeLaunchModal}/>
-        </ModalBase>
        <nav>
          <a>
            <i className='fa fa-home fa-fw'/> Home
--- a/browser/main/Components/SnippetDeleteModal.jsx
+++ b/browser/main/Components/SnippetDeleteModal.jsx
@@ -9,6 +9,7 @@ var SnippetDeleteModal = React.createClass({
  },
  componentDidMount: function () {
    this.unsubscribe = PlanetStore.listen(this.onListen)
+    React.findDOMNode(this.refs.submit).focus()
  },
  componentWillUnmount: function () {
    this.unsubscribe()
@@ -23,12 +24,18 @@ var SnippetDeleteModal = React.createClass({
  stopPropagation: function (e) {
    e.stopPropagation()
  },
+  handleKeyDown: function (e) {
+    if ((e.keyCode === 13 && e.metaKey)) {
+      e.preventDefault()
+      this.submit()
+    }
+  },
  submit: function () {
    PlanetActions.deleteSnippet(this.props.snippet.id)
  },
  render: function () {
    return (
-      <div onClick={this.stopPropagation} className='SnippetDeleteModal modal'>
+      <div onKeyDown={this.handleKeyDown} onClick={this.stopPropagation} className='SnippetDeleteModal modal'>
        <div className='modal-header'>
          <h1>Delete Snippet</h1>
        </div>
@@ -37,8 +44,8 @@ var SnippetDeleteModal = React.createClass({
        </div>
        <div className='modal-footer'>
          <div className='modal-control'>
-            <button onClick={this.props.close} className='btn-default'>Cancle</button>
-            <button onClick={this.submit} className='btn-primary'>Delete</button>
+            <button onClick={this.props.close} className='btn-default'>Cancel</button>
+            <button ref='submit' onClick={this.submit} className='btn-primary'>Delete</button>
          </div>
        </div>
      </div>
--- a/browser/main/Components/SnippetForm.jsx
+++ b/browser/main/Components/SnippetForm.jsx
@@ -86,6 +86,7 @@ var SnippetForm = React.createClass({
  handleKeyDown: function (e) {
    if (e.keyCode === 13 && e.metaKey) {
      this.submit()
+      e.stopPropagation()
    }
  },
  render: function () {
--- a/browser/main/Containers/PlanetContainer.jsx
+++ b/browser/main/Containers/PlanetContainer.jsx
@@ -5,6 +5,12 @@ var PlanetHeader = require('../Components/PlanetHeader')
 var PlanetNavigator = require('../Components/PlanetNavigator')
 var PlanetArticleList = require('../Components/PlanetArticleList')
 var PlanetArticleDetail = require('../Components/PlanetArticleDetail')
+var ModalBase = require('../Components/ModalBase')
+var LaunchModal = require('../Components/LaunchModal')
+var SnippetEditModal = require('../Components/SnippetEditModal')
+var SnippetDeleteModal = require('../Components/SnippetDeleteModal')
+var BlueprintEditModal = require('../Components/BlueprintEditModal')
+var BlueprintDeleteModal = require('../Components/BlueprintDeleteModal')

 var PlanetActions = require('../Actions/PlanetActions')

@@ -27,11 +33,13 @@ module.exports = React.createClass({
    this.unsubscribe = PlanetStore.listen(this.onFetched)

    PlanetActions.fetchPlanet(this.props.params.userName + '/' + this.props.params.planetName)
+    document.addEventListener('keydown', this.handleKeyDown)
  },
  componentWillUnmount: function () {
    this.unsubscribe()
+    document.removeEventListener('keydown', this.handleKeyDown)
  },
-  getIndexOfCurrentArticle: function () {
+  getFilteredIndexOfCurrentArticle: function () {
    var params = this.props.params
    var index = 0

@@ -53,12 +61,35 @@ module.exports = React.createClass({

    return index
  },
+  getIndexOfCurrentArticle: function () {
+    var params = this.props.params
+    var index = 0
+
+    if (this.isActive('snippets')) {
+      this.state.currentPlanet.Articles.some(function (_article, _index) {
+        if (_article.type === 'snippet' && _article.localId === parseInt(params.localId, 10)) {
+          index = _index
+        }
+      })
+    } else if (this.isActive('blueprints')) {
+      this.state.currentPlanet.Articles.some(function (_article, _index) {
+        if (_article.type === 'blueprint' && _article.localId === parseInt(params.localId, 10)) {
+          index = _index
+          return true
+        }
+        return false
+      })
+    }
+
+    return index
+  },
  selectArticleByIndex: function (index) {
    var article = this.state.filteredArticles[index]
    var params = this.props.params

    if (article == null) {
      this.transitionTo('planetHome', params)
+      return
    }

    if (article.type === 'snippet') {
@@ -76,28 +107,42 @@ module.exports = React.createClass({
  selectNextArticle: function () {
    if (this.state.currentPlanet == null || this.state.filteredArticles.length === 0) return

-    var index = this.getIndexOfCurrentArticle()
+    var index = this.getFilteredIndexOfCurrentArticle()

    if (index < this.state.filteredArticles.length - 1) {
      this.selectArticleByIndex(index + 1)
    }
  },
  selectPriorArticle: function () {
-    if (this.state.currentPlanet == null || this.state.filteredArticles.length === 0) return
-
-    var index = this.getIndexOfCurrentArticle()
+    if (this.state.currentPlanet == null || this.state.filteredArticles.length === 0) {
+      return
+    }
+    var index = this.getFilteredIndexOfCurrentArticle()

    if (index > 0) {
      this.selectArticleByIndex(index - 1)
+    } else {
+      React.findDOMNode(this).querySelector('.PlanetHeader .searchInput input').focus()
    }
  },
  onFetched: function (res) {
    var articles = this.state.currentPlanet == null ? null : this.state.currentPlanet.Articles
+    var filteredArticles = this.state.filteredArticles

    if (res.status === 'planetFetched') {
      var planet = res.data
      this.setState({currentPlanet: planet, filteredArticles: planet.Articles}, function () {
-        if (planet.Articles.length > 0) {
+        if (this.state.filteredArticles.length > 0) {
+          if (this.props.params.localId == null) {
+            var article = this.state.filteredArticles[0]
+            if (article == null) return
+            this.transitionTo(article.type === 'snippet' ? 'snippets' : 'blueprints', {
+              userName: this.props.params.userName,
+              planetName: this.props.params.planetName,
+              localId: planet.Articles[0].localId
+            })
+            return
+          }
          if (this.isActive('snippets')) {
            this.transitionTo('snippets', {
              userName: this.props.params.userName,
@@ -117,6 +162,7 @@ module.exports = React.createClass({
    }

    var article = res.data
+    var filteredIndex = this.getFilteredIndexOfCurrentArticle()
    var index = this.getIndexOfCurrentArticle()

    if (article.PlanetId === this.state.currentPlanet.id) {
@@ -124,7 +170,7 @@ module.exports = React.createClass({
        case 'articleCreated':
          articles.unshift(article)

-          this.setState({planet: this.state.currentPlanet}, function () {
+          this.setState({planet: this.state.currentPlanet, filteredArticles: filteredArticles}, function () {
            this.selectArticleByIndex(0)
          })
          break
@@ -132,16 +178,17 @@ module.exports = React.createClass({
          articles.splice(index, 1)
          articles.unshift(article)

-          this.setState({planet: this.state.currentPlanet})
+          this.setState({planet: this.state.currentPlanet, filteredArticles: filteredArticles})
          break
        case 'articleDeleted':
          articles.splice(index, 1)

-          this.setState({planet: this.state.currentPlanet}, function () {
+          this.setState({planet: this.state.currentPlanet, filteredArticles: filteredArticles}, function () {
+            this.closeDeleteModal()
            if (index > 0) {
-              this.selectArticleByIndex(index - 1)
+              this.selectArticleByIndex(filteredIndex - 1)
            } else {
-              this.selectArticleByIndex(index)
+              this.selectArticleByIndex(filteredIndex)
            }
          })
      }
@@ -178,40 +225,159 @@ module.exports = React.createClass({
      this.selectArticleByIndex(0)
    })
  },
+  openLaunchModal: function () {
+    this.setState({isLaunchModalOpen: true})
+  },
+  closeLaunchModal: function () {
+    this.setState({isLaunchModalOpen: false})
+  },
+  openEditModal: function () {
+    this.setState({isEditModalOpen: true})
+  },
+  closeEditModal: function () {
+    this.setState({isEditModalOpen: false})
+  },
+  submitEditModal: function () {
+    this.setState({isEditModalOpen: false})
+  },
+  openDeleteModal: function () {
+    this.setState({isDeleteModalOpen: true})
+  },
+  closeDeleteModal: function () {
+    this.setState({isDeleteModalOpen: false})
+  },
+  submitDeleteModal: function () {
+    this.setState({isDeleteModalOpen: false})
+  },
+  handleKeyDown: function (e) {
+    console.log(e.keyCode)
+    if (this.state.isLaunchModalOpen) {
+      if (e.keyCode === 27) this.closeLaunchModal()
+      return
+    }
+    if (this.state.isEditModalOpen) {
+      if (e.keyCode === 27) this.closeEditModal()
+      return
+    }
+    if (this.state.isDeleteModalOpen) {
+      if (e.keyCode === 27) this.closeDeleteModal()
+      return
+    }
+
+    if ((e.keyCode === 13 && e.metaKey)) {
+      e.preventDefault()
+      this.openLaunchModal()
+    }
+    var searchInput = React.findDOMNode(this).querySelector('.PlanetHeader .searchInput input')
+
+    if (document.activeElement === searchInput) {
+      switch (e.keyCode) {
+        case 38:
+          e.preventDefault()
+          break
+        case 40:
+          e.preventDefault()
+          searchInput.blur()
+          break
+        case 27:
+          searchInput.blur()
+          break
+      }
+      return
+    }
+
+    if (document.activeElement !== searchInput) {
+      switch (e.keyCode) {
+        case 38:
+          e.preventDefault()
+          this.selectPriorArticle()
+          break
+        case 40:
+          e.preventDefault()
+          this.selectNextArticle()
+          break
+        case 27:
+          searchInput.focus()
+          break
+      }
+
+      switch (e.keyCode) {
+        case 65:
+          e.preventDefault()
+          this.openLaunchModal()
+          break
+        case 68:
+          e.preventDefault()
+          this.openDeleteModal()
+          break
+        case 69:
+          e.preventDefault()
+          this.openEditModal()
+      }
+    }
+
+  },
  render: function () {
    var user = AuthStore.getUser()
    if (user == null) return (<div/>)
    if (this.state.currentPlanet == null) return (<div/>)

-    var content = (<div>Nothing selected</div>)
    var localId = parseInt(this.props.params.localId, 10)
+
+    var article
    if (this.isActive('snippets')) {
-      this.state.currentPlanet.Articles.some(function (article) {
-        if (article.type === 'snippet' && localId === article.localId) {
-          content = (
-            <PlanetArticleDetail article={article}/>
-          )
+      this.state.currentPlanet.Articles.some(function (_article) {
+        if (_article.type === 'snippet' && localId === _article.localId) {
+          article = _article
          return true
        }
        return false
      })
    } else if (this.isActive('blueprints')) {
-      this.state.currentPlanet.Articles.some(function (article) {
-        if (article.type === 'blueprint' && localId === article.localId) {
-          content = (
-            <PlanetArticleDetail article={article}/>
-          )
+      this.state.currentPlanet.Articles.some(function (_article) {
+        if (_article.type === 'blueprint' && localId === _article.localId) {
+          article = _article
          return true
        }
        return false
      })
    }

+    var content = article != null ? (
+      <PlanetArticleDetail article={article} onOpenEditModal={this.openEditModal} onOpenDeleteModal={this.openDeleteModal}/>
+    ) : (
+      <div>Nothing selected</div>
+    )
+
+    var editModal = article != null ? (article.type === 'snippet' ? (
+      <SnippetEditModal snippet={article} submit={this.submitEditModal} close={this.closeEditModal}/>
+    ) : (
+      <BlueprintEditModal blueprint={article} submit={this.submitEditModal} close={this.closeEditModal}/>
+    )) : null
+
+    var deleteModal = article != null ? (article.type === 'snippet' ? (
+      <SnippetDeleteModal snippet={article} close={this.closeDeleteModal}/>
+    ) : (
+      <BlueprintDeleteModal blueprint={article} close={this.closeDeleteModal}/>
+    )) : null
+
    return (
      <div className='PlanetContainer'>
+        <ModalBase isOpen={this.state.isLaunchModalOpen} close={this.closeLaunchModal}>
+          <LaunchModal submit={this.submitLaunchModal} close={this.closeLaunchModal}/>
+        </ModalBase>
+
+        <ModalBase isOpen={this.state.isEditModalOpen} close={this.closeEditModal}>
+          {editModal}
+        </ModalBase>
+
+        <ModalBase isOpen={this.state.isDeleteModalOpen} close={this.closeDeleteModal}>
+          {deleteModal}
+        </ModalBase>
+
        <PlanetHeader onSearchChange={this.handleSearchChange} currentPlanet={this.state.currentPlanet} currentUser={user}/>
-        <PlanetNavigator currentPlanet={this.state.currentPlanet} currentUser={user}/>
-        <PlanetArticleList onPressUp={this.selectPriorArticle} onPressDown={this.selectNextArticle} articles={this.state.filteredArticles}/>
+        <PlanetNavigator onOpenLaunchModal={this.openLaunchModal} currentPlanet={this.state.currentPlanet} currentUser={user}/>
+        <PlanetArticleList articles={this.state.filteredArticles}/>
        {content}
      </div>
    )