addTag search

Author: Rokt33r

browser/main/HomePage.js

@@ -6,14 +6,15 @@ import ArticleNavigator from './HomePage/ArticleNavigator'
 import ArticleTopBar from './HomePage/ArticleTopBar'
 import ArticleList from './HomePage/ArticleList'
 import ArticleDetail from './HomePage/ArticleDetail'
-import { findWhere, findIndex, pick } from 'lodash'
+import _, { findWhere, findIndex, pick } from 'lodash'
 import keygen from 'boost/keygen'
 import api from 'boost/api'
 import auth from 'boost/auth'
 import io from 'boost/socket'
 
 const TEXT_FILTER = 'TEXT_FILTER'
 const FOLDER_FILTER = 'FOLDER_FILTER'
+const TAG_FILTER = 'TAG_FILTER'
 
 class HomePage extends React.Component {
   componentDidMount () {
@@ -83,14 +84,18 @@ function remap (state) {
   })
 
   // Filter articles
-  let filters = status.search.split(' ').map(key => key.trim()).filter(key => key.length > 0).map(key => {
+  let filters = status.search.split(' ').map(key => key.trim()).filter(key => key.length > 0 && !key.match(/^#$/)).map(key => {
     if (key.match(/^in:.+$/)) {
       return {type: FOLDER_FILTER, value: key.match(/^in:(.+)$/)[1]}
     }
+    if (key.match(/^#(.+)/)) {
+      return {type: TAG_FILTER, value: key.match(/^#(.+)$/)[1]}
+    }
     return {type: TEXT_FILTER, value: key}
   })
   let folderFilters = filters.filter(filter => filter.type === FOLDER_FILTER)
   let textFilters = filters.filter(filter => filter.type === TEXT_FILTER)
+  let tagFilters = filters.filter(filter => filter.type === TAG_FILTER)
 
   if (activeUser.Folders != null) {
     let targetFolders = activeUser.Folders.filter(folder => {
@@ -110,6 +115,14 @@ function remap (state) {
         })
       }, articles)
     }
+
+    if (tagFilters.length > 0) {
+      articles = tagFilters.reduce((articles, tagFilter) => {
+        return articles.filter(article => {
+          return _.find(article.Tags, tag => tag.name.match(new RegExp(tagFilter.value, 'i')))
+        })
+      }, articles)
+    }
   }
 
   // Grab active article

browser/main/HomePage/ArticleDetail.js

@@ -10,6 +10,7 @@ import Select from 'react-select'
 import linkState from 'boost/linkState'
 import api from 'boost/api'
 import FolderMark from 'boost/components/FolderMark'
+import TagLink from 'boost/components/TagLink'
 
 var modeOptions = aceModes.map(function (mode) {
   return {
@@ -86,13 +87,13 @@ export default class ArticleDetail extends React.Component {
   renderIdle () {
     let { activeArticle, activeUser } = this.props
 
-    let tags = activeArticle.Tags.length > 0 ? activeArticle.Tags.map(tag => {
-      return (
-        <a key={tag.name}>{tag.name}</a>
+    let tags = activeArticle.Tags.length > 0
+      ? activeArticle.Tags.map(tag => {
+        return (<TagLink key={tag.name} tag={tag}/>)
+      })
+      : (
+        <span className='noTags'>Not tagged yet</span>
       )
-    }) : (
-      <span className='noTags'>Not tagged yet</span>
-    )
     let folder = findWhere(activeUser.Folders, {id: activeArticle.FolderId})
     let folderName = folder != null ? folder.name : '(unknown)'
 

browser/main/HomePage/ArticleList.js

@@ -4,6 +4,7 @@ import ModeIcon from 'boost/components/ModeIcon'
 import moment from 'moment'
 import { switchArticle, NEW } from 'boost/actions'
 import FolderMark from 'boost/components/FolderMark'
+import TagLink from 'boost/components/TagLink'
 
 export default class ArticleList extends React.Component {
   handleArticleClick (key) {
@@ -19,7 +20,7 @@ export default class ArticleList extends React.Component {
     let articlesEl = articles.map(article => {
       let tags = Array.isArray(article.Tags) && article.Tags.length > 0
         ? article.Tags.map(tag => {
-          return (<a key={tag.name}>{tag.name}</a>)
+          return (<TagLink key={tag.name} tag={tag}/>)
         })
         : (<span>Not tagged yet</span>)
 

browser/main/index.html

@@ -53,7 +53,7 @@
   <div id="content"></div>
 
   <script src="../../submodules/ace/src-min/ace.js"></script>
-  <script type="text/javascript">
+  <script>
     var version = require('remote').require('app').getVersion()
     document.title = 'Boost' + ((version == null || version.length === 0) ? ' DEV' : '')
     document.addEventListener('mousewheel', function(e) {

browser/styles/main/HomeContainer/components/ArticleDetail.styl

@@ -158,6 +158,7 @@ noTagsColor = #999
             margin 2px
             font-size 10px
             opacity 0.8
+            cursor pointer
             &:hover
               opacity 1
           span.noTags

lib/actions.js

@@ -9,6 +9,7 @@ export const SWITCH_FOLDER = 'SWITCH_FOLDER'
 export const SWITCH_MODE = 'SWITCH_MODE'
 export const SWITCH_ARTICLE = 'SWITCH_ARTICLE'
 export const SET_SEARCH_FILTER = 'SET_SEARCH_FILTER'
+export const SET_TAG_FILTER = 'SET_TAG_FILTER'
 
 // Status - mode
 export const IDLE_MODE = 'IDLE_MODE'
@@ -84,3 +85,10 @@ export function setSearchFilter (search) {
     data: search
   }
 }
+
+export function setTagFilter (tag) {
+  return {
+    type: SET_TAG_FILTER,
+    data: tag
+  }
+}

lib/components/CodeEditor.js

@@ -1,5 +1,5 @@
 import React from 'react'
-
+let ReactDOM = require('react-dom')
 var ace = window.ace
 
 module.exports = React.createClass({
@@ -16,7 +16,7 @@ module.exports = React.createClass({
     }
   },
   componentDidMount: function () {
-    var el = React.findDOMNode(this.refs.target)
+    var el = ReactDOM.findDOMNode(this.refs.target)
     var editor = ace.edit(el)
     editor.$blockScrolling = Infinity
     editor.setValue(this.props.code)

lib/components/TagLink.js

@@ -0,0 +1,20 @@
+import React, { PropTypes } from 'react'
+import store from '../store'
+import { setTagFilter } from '../actions'
+
+export default class TagLink extends React.Component {
+  handleClick (e) {
+    store.dispatch(setTagFilter(this.props.tag.name))
+  }
+  render () {
+    return (
+      <a onClick={e => this.handleClick(e)}>{this.props.tag.name}</a>
+    )
+  }
+}
+
+TagLink.propTypes = {
+  tag: PropTypes.shape({
+    name: PropTypes.string
+  })
+}

lib/components/modal/CreateNewFolder.js

@@ -27,7 +27,7 @@ export default class CreateNewFolder extends React.Component {
 
     api.createFolder(input)
       .then(res => {
-        console.log(res)
+        console.log(res.body)
         close()
       })
       .catch(err => {

lib/reducer.js

@@ -1,6 +1,6 @@
 import { combineReducers } from 'redux'
 import { findIndex } from 'lodash'
-import { SWITCH_USER, SWITCH_FOLDER, SWITCH_MODE, SWITCH_ARTICLE, SET_SEARCH_FILTER, USER_UPDATE, ARTICLE_REFRESH, ARTICLE_UPDATE, ARTICLE_DESTROY, IDLE_MODE, CREATE_MODE } from './actions'
+import { SWITCH_USER, SWITCH_FOLDER, SWITCH_MODE, SWITCH_ARTICLE, SET_SEARCH_FILTER, SET_TAG_FILTER, USER_UPDATE, ARTICLE_REFRESH, ARTICLE_UPDATE, ARTICLE_DESTROY, IDLE_MODE, CREATE_MODE } from './actions'
 import auth from 'boost/auth'
 
 const initialStatus = {
@@ -40,6 +40,7 @@ function status (state, action) {
     case SWITCH_USER:
       state.userId = action.data
       state.mode = IDLE_MODE
+      state.search = ''
       return state
     case SWITCH_FOLDER:
       state.mode = IDLE_MODE
@@ -58,6 +59,10 @@ function status (state, action) {
       state.search = action.data
       state.mode = IDLE_MODE
       return state
+    case SET_TAG_FILTER:
+      state.search = `#${action.data}`
+      state.mode = IDLE_MODE
+      return state
     default:
       if (state == null) return initialStatus
       return state