blueprint articles are available in planet list

browser/main/Containers/PlanetContainer.jsx

@@ -13,6 +13,8 @@ var PlanetStore = require('../Stores/PlanetStore')
 
 var PlanetActions = require('../Actions/PlanetActions')
 
+var Markdown = require('../Mixins/Markdown')
+
 var PlanetHeader = React.createClass({
   propTypes: {
     currentPlanet: React.PropTypes.object,
@@ -111,16 +113,17 @@ var PlanetNavigator = React.createClass({
 })
 
 var PlanetArticleList = React.createClass({
-  mixins: [ReactRouter.Navigation, ReactRouter.State, ForceUpdate(60000)],
+  mixins: [ReactRouter.Navigation, ReactRouter.State, ForceUpdate(60000), Markdown],
   propTypes: {
     planet: React.PropTypes.shape({
       Snippets: React.PropTypes.array,
-      Blueprints: React.PropTypes.array
+      Blueprints: React.PropTypes.array,
+      Articles: React.PropTypes.array
     })
   },
   render: function () {
-    var articles = this.props.planet.Snippets.map(function (snippet) {
-      var tags = snippet.Tags.length > 0 ? snippet.Tags.map(function (tag) {
+    var articles = this.props.planet.Articles.map(function (article) {
+      var tags = article.Tags.length > 0 ? article.Tags.map(function (tag) {
         return (
           <a key={tag.id} href>#{tag.name}</a>
         )
@@ -128,30 +131,57 @@ var PlanetArticleList = React.createClass({
         <a className='noTag'>Not tagged yet</a>
       )
       var params = this.getParams()
+      var isActive = article.type === 'snippet' ? this.isActive('snippets') && parseInt(params.localId, 10) === article.localId : this.isActive('blueprints') && parseInt(params.localId, 10) === article.localId
 
-      var isActive = parseInt(params.localId, 10) === snippet.localId
+      var handleClick
 
-      var handleClick = function () {
-        this.transitionTo('snippets', {
+      if (article.type === 'snippet') {
+
+        handleClick = function () {
+          this.transitionTo('snippets', {
+            userName: params.userName,
+            planetName: params.planetName,
+            localId: article.localId
+          })
+        }.bind(this)
+
+        return (
+          <li onClick={handleClick} key={'snippet-' + article.id}>
+            <div className={'articleItem snippetItem' + (isActive ? ' active' : '')}>
+              <div className='itemHeader'>
+                <div className='callSign'><i className='fa fa-code'></i> {article.callSign}</div>
+                <div className='updatedAt'>{moment(article.updatedAt).fromNow()}</div>
+              </div>
+              <div className='description'>{article.description.length > 50 ? article.description.substring(0, 50) + ' …' : article.description}</div>
+              <div className='tags'><i className='fa fa-tags'/>{tags}</div>
+            </div>
+            <div className='divider'></div>
+          </li>
+        )
+      }
+
+      handleClick = function () {
+        this.transitionTo('blueprints', {
           userName: params.userName,
           planetName: params.planetName,
-          localId: snippet.localId
+          localId: article.localId
         })
       }.bind(this)
 
       return (
-        <li onClick={handleClick} key={snippet.id}>
-          <div className={isActive ? 'snippetItem active' : 'snippetItem'}>
+        <li onClick={handleClick} key={'blueprint-' + article.id}>
+          <div className={'articleItem blueprintItem' + (isActive ? ' active' : '')}>
             <div className='itemHeader'>
-              <div className='callSign'><i className='fa fa-code'></i> {snippet.callSign}</div>
-              <div className='updatedAt'>{moment(snippet.updatedAt).fromNow()}</div>
+              <div className='callSign'><i className='fa fa-file-text-o'></i> {article.title}</div>
+              <div className='updatedAt'>{moment(article.updatedAt).fromNow()}</div>
             </div>
-            <div className='description'>{snippet.description.length > 50 ? snippet.description.substring(0, 50) + ' …' : snippet.description}</div>
+            <div className='content'>{this.markdown(article.content.substring(0, 150)).replace(/(<([^>]+)>)/ig, '').substring(0, 75)}</div>
             <div className='tags'><i className='fa fa-tags'/>{tags}</div>
           </div>
           <div className='divider'></div>
         </li>
       )
+
     }.bind(this))
 
     return (
@@ -165,9 +195,9 @@ var PlanetArticleList = React.createClass({
 })
 
 var PlanetArticleDetail = React.createClass({
-  mixins: [ForceUpdate(60000)],
+  mixins: [ForceUpdate(60000), Markdown],
   propTypes: {
-    snippet: React.PropTypes.object
+    article: React.PropTypes.object
   },
   getInitialState: function () {
     return {
@@ -193,44 +223,69 @@ var PlanetArticleDetail = React.createClass({
     this.setState({isDeleteModalOpen: false})
   },
   render: function () {
-    var snippet = this.props.snippet
+    var article = this.props.article
 
-    var tags = snippet.Tags.length > 0 ? snippet.Tags.map(function (tag) {
+    var tags = article.Tags.length > 0 ? article.Tags.map(function (tag) {
       return (
         <a key={tag.id} href>#{tag.name}</a>
       )
     }) : (
       <a className='noTag'>Not tagged yet</a>
     )
+    if (article.type === 'snippet') {
+      return (
+        <div className='PlanetArticleDetail snippetDetail'>
+          <div className='viewer-header'>
+            <i className='fa fa-code'></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>
+            </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'>
+              <div className='description'>{article.description}</div>
+              <div className='tags'><i className='fa fa-tags'/>{tags}</div>
+            </div>
+            <div className='content'>
+              <CodeViewer code={article.content} mode={article.mode}/>
+            </div>
+          </div>
+        </div>
+      )
+    }
     return (
-      <div className='PlanetArticleDetail'>
+      <div className='PlanetArticleDetail blueprintDetail'>
         <div className='viewer-header'>
-          <i className='fa fa-code'></i> {snippet.callSign} <small className='updatedAt'>{moment(snippet.updatedAt).fromNow()}</small>
+          <i className='fa fa-file-text-o'></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>
           </span>
 
           <ModalBase isOpen={this.state.isEditModalOpen} close={this.closeEditModal}>
-            <SnippetEditModal snippet={snippet} submit={this.submitEditModal} close={this.closeEditModal}/>
+            <SnippetEditModal snippet={article} submit={this.submitEditModal} close={this.closeEditModal}/>
           </ModalBase>
 
           <ModalBase isOpen={this.state.isDeleteModalOpen} close={this.closeDeleteModal}>
-            <SnippetDeleteModal snippet={snippet} submit={this.submitDeleteModal} close={this.closeDeleteModal}/>
+            <SnippetDeleteModal snippet={article} submit={this.submitDeleteModal} close={this.closeDeleteModal}/>
           </ModalBase>
         </div>
         <div className='viewer-body'>
-          <div className='viewer-detail'>
-            <div className='description'>{snippet.description}</div>
-            <div className='tags'><i className='fa fa-tags'/>{tags}</div>
-          </div>
-          <div className='content'>
-            <CodeViewer code={snippet.content} mode={snippet.mode}/>
-          </div>
+          <div className='tags'><i className='fa fa-tags'/>{tags}</div>
+          <div className='content' dangerouslySetInnerHTML={{__html: ' ' + this.markdown(article.content)}}></div>
         </div>
       </div>
     )
+
   }
 })
 
@@ -261,11 +316,20 @@ module.exports = React.createClass({
       case 'planetFetched':
         var planet = res.data
         this.setState({currentPlanet: planet}, function () {
-          if (planet.Snippets.length > 0) {
-            this.transitionTo('snippets', {
-              userName: this.props.params.userName,
-              planetName: this.props.params.planetName,
-              localId: this.props.params.localId == null ? planet.Snippets[0].localId : this.props.params.localId})
+          if (planet.Articles.length > 0) {
+            if (this.isActive('snippets')) {
+              this.transitionTo('snippets', {
+                userName: this.props.params.userName,
+                planetName: this.props.params.planetName,
+                localId: this.props.params.localId == null ? planet.Articles[0].localId : this.props.params.localId
+              })
+            } else if (this.isActive('blueprints')) {
+              this.transitionTo('blueprints', {
+                userName: this.props.params.userName,
+                planetName: this.props.params.planetName,
+                localId: this.props.params.localId == null ? planet.Articles[0].localId : this.props.params.localId
+              })
+            }
           }
         })
         break
@@ -326,14 +390,26 @@ module.exports = React.createClass({
     if (user == null) return (<div/>)
     if (this.state.currentPlanet == null) return (<div/>)
 
-    var content = (<div>No selected</div>)
+    var content = (<div>Nothing selected</div>)
     if (this.isActive('snippets')) {
       var localId = parseInt(this.props.params.localId, 10)
 
-      this.state.currentPlanet.Snippets.some(function (_snippet) {
-        if (localId === _snippet.localId) {
+      this.state.currentPlanet.Articles.some(function (article) {
+        if (article.type === 'snippet' && localId === article.localId) {
           content = (
-            <PlanetArticleDetail snippet={_snippet}/>
+            <PlanetArticleDetail article={article}/>
+          )
+          return true
+        }
+        return false
+      })
+    } else if (this.isActive('blueprints')) {
+      var localId = parseInt(this.props.params.localId, 10)
+
+      this.state.currentPlanet.Articles.some(function (article) {
+        if (article.type === 'blueprint' && localId === article.localId) {
+          content = (
+            <PlanetArticleDetail article={article}/>
           )
           return true
         }