Folder indexing

browser/main/HomePage/ArticleList.js

@@ -15,7 +15,6 @@ export default class ArticleList extends React.Component {
 
   render () {
     let { articles, activeArticle } = this.props
-    console.log(articles)
 
     let articlesEl = articles.map(article => {
       let tags = Array.isArray(article.Tags) && article.Tags.length > 0

browser/main/HomePage/ArticleNavigator.js

@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react'
 import ProfileImage from 'boost/components/ProfileImage'
 import { findWhere } from 'lodash'
-import { switchMode, CREATE_MODE } from 'boost/actions'
+import { setSearchFilter, switchFolder, switchMode, CREATE_MODE } from 'boost/actions'
 import { openModal } from 'boost/modal'
 import FolderMark from 'boost/components/FolderMark'
 import Preferences from 'boost/components/modal/Preferences'
@@ -27,16 +27,30 @@ export default class ArticleNavigator extends React.Component {
     openModal(CreateNewFolder, {user: activeUser})
   }
 
+  handleFolderButtonClick (name) {
+    return e => {
+      let { dispatch } = this.props
+      dispatch(switchFolder(name))
+    }
+  }
+
+  handleAllFoldersButtonClick (e) {
+    let { dispatch } = this.props
+    dispatch(setSearchFilter(''))
+  }
+
   render () {
     let { activeUser, status } = this.props
     if (activeUser == null) return (<div className='ArticleNavigator'/>)
-
-    let activeFolder = findWhere(activeUser.Folders, {id: status.folderId})
+    let { targetFolders } = status
+    if (targetFolders == null) targetFolders = []
 
     let folders = activeUser.Folders != null
       ? activeUser.Folders.map((folder, index) => {
+        let isActive = findWhere(targetFolders, {id: folder.id})
+
         return (
-          <button key={'folder-' + folder.id} className={activeFolder != null && activeFolder.id === folder.id ? 'active' : ''}>
+          <button onClick={e => this.handleFolderButtonClick(folder.name)(e)} key={'folder-' + folder.id} className={isActive ? 'active' : ''}>
           <FolderMark id={folder.id}/> {folder.name} {folder.public ? <i className='fa fa-fw fa-lock'/> : null}</button>
         )
       })
@@ -71,7 +85,7 @@ export default class ArticleNavigator extends React.Component {
             <button onClick={e => this.handleNewFolderButton(e)} className='addBtn'><i className='fa fa-fw fa-plus'/></button>
           </div>
           <div className='folderList'>
-            <button className={activeFolder == null ? 'active' : ''}>All folders</button>
+            <button onClick={e => this.handleAllFoldersButtonClick(e)} className={targetFolders.length === 0 ? 'active' : ''}>All folders</button>
             {folders}
           </div>
         </div>

browser/main/HomePage/ArticleTopBar.js

@@ -1,14 +1,21 @@
 import React, { PropTypes } from 'react'
 import ExternalLink from 'boost/components/ExternalLink'
+import { setSearchFilter } from 'boost/actions'
+
+export default class ArticleTopBar extends React.Component {
+  handleSearchChange (e) {
+    let { dispatch } = this.props
+
+    dispatch(setSearchFilter(e.target.value))
+  }
 
-const ArticleTopBar = React.createClass({
   render () {
     return (
       <div className='ArticleTopBar'>
         <div className='left'>
           <div className='search'>
             <i className='fa fa-search fa-fw' />
-            <input placeholder='Search' type='text'/>
+            <input value={this.props.status.search} onChange={e => this.handleSearchChange(e)} placeholder='Search' type='text'/>
           </div>
           <button className='refreshBtn'><i className='fa fa-fw fa-refresh'/></button>
         </div>
@@ -22,6 +29,9 @@ const ArticleTopBar = React.createClass({
       </div>
     )
   }
-})
+}
 
-export default ArticleTopBar
+ArticleTopBar.propTypes = {
+  search: PropTypes.string,
+  dispatch: PropTypes.func
+}