add Tag filter

Author: Rokt33r

browser/main/Components/PlanetArticleDetail.jsx

@@ -11,7 +11,8 @@ var PlanetArticleDetail = React.createClass({
   propTypes: {
     article: React.PropTypes.object,
     onOpenEditModal: React.PropTypes.func,
-    onOpenDeleteModal: React.PropTypes.func
+    onOpenDeleteModal: React.PropTypes.func,
+    showOnlyWithTag: React.PropTypes.func
   },
   getInitialState: function () {
     return {
@@ -29,9 +30,9 @@ var PlanetArticleDetail = React.createClass({
     }
     var tags = article.Tags.length > 0 ? article.Tags.map(function (tag) {
       return (
-        <a key={tag.id} href>#{tag.name}</a>
+        <a onClick={this.props.showOnlyWithTag(tag.name)} key={tag.id}>#{tag.name}</a>
       )
-    }) : (
+    }.bind(this)) : (
       <a className='noTag'>Not tagged yet</a>
     )
     if (article.type === 'snippet') {

browser/main/Components/PlanetArticleList.jsx

@@ -8,7 +8,8 @@ var Markdown = require('../Mixins/Markdown')
 var PlanetArticleList = React.createClass({
   mixins: [ReactRouter.Navigation, ReactRouter.State, ForceUpdate(60000), Markdown],
   propTypes: {
-    articles: React.PropTypes.array
+    articles: React.PropTypes.array,
+    showOnlyWithTag: React.PropTypes.func
   },
   handleKeyDown: function (e) {
     e.preventDefault()
@@ -17,9 +18,9 @@ var PlanetArticleList = React.createClass({
     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>
+          <a onClick={this.props.showOnlyWithTag(tag.name)} key={tag.id}>#{tag.name}</a>
         )
-      }) : (
+      }.bind(this)) : (
         <a className='noTag'>Not tagged yet</a>
       )
       var params = this.getParams()

browser/main/Containers/PlanetContainer.jsx

@@ -63,7 +63,7 @@ function blueprintFilter (articles) {
 function tagFilter (keyword, articles) {
   return articles.filter(function (article) {
     return article.Tags.some(function (tag) {
-      return tag.name.match(new RegExp(keyword, 'i'))
+      return tag.name.match(new RegExp('^' + keyword, 'i'))
     })
   })
 }
@@ -336,6 +336,11 @@ module.exports = React.createClass({
   showOnlyBlueprints: function () {
     this.setState({search: '$b'})
   },
+  showOnlyWithTag: function (tag) {
+    return function () {
+      this.setState({search: '#' + tag})
+    }.bind(this)
+  },
   openLaunchModal: function () {
     this.setState({isLaunchModalOpen: true})
   },
@@ -547,9 +552,9 @@ module.exports = React.createClass({
           showAll={this.showAll}
           showOnlySnippets={this.showOnlySnippets} showOnlyBlueprints={this.showOnlyBlueprints} currentPlanet={this.state.currentPlanet}/>
 
-        <PlanetArticleList ref='list' articles={filteredArticles}/>
+        <PlanetArticleList showOnlyWithTag={this.showOnlyWithTag} ref='list' articles={filteredArticles}/>
 
-        <PlanetArticleDetail ref='detail' article={article} onOpenEditModal={this.openEditModal} onOpenDeleteModal={this.openDeleteModal}/>
+        <PlanetArticleDetail ref='detail' article={article} onOpenEditModal={this.openEditModal} onOpenDeleteModal={this.openDeleteModal} showOnlyWithTag={this.showOnlyWithTag}/>
       </div>
     )
   }

browser/styles/main/containers/PlanetContainer.styl

@@ -7,6 +7,8 @@
     overflow-x: auto;
     a
       margin 0 2px
+      text-decoration underline
+      cursor pointer
       &.noTag
         color inactiveTextColor
         font-size 0.8em