Folder リストに articleの数をだす

Author: Rokt33r

browser/main/HomePage.js

@@ -98,7 +98,7 @@ class HomePage extends React.Component {
   }
 
   render () {
-    let { dispatch, status, articles, activeArticle, folders, filters } = this.props
+    let { dispatch, status, articles, allArticles, activeArticle, folders, filters } = this.props
 
     return (
       <div className='HomePage'>
@@ -107,6 +107,7 @@ class HomePage extends React.Component {
           dispatch={dispatch}
           folders={folders}
           status={status}
+          allArticles={allArticles}
         />
         <ArticleTopBar
           ref='top'
@@ -141,6 +142,7 @@ function remap (state) {
   articles.sort((a, b) => {
     return new Date(b.updatedAt) - new Date(a.updatedAt)
   })
+  let allArticles = articles.slice()
 
   // Filter articles
   let filters = status.search.split(' ').map(key => key.trim()).filter(key => key.length > 0 && !key.match(/^\/$/) && !key.match(/^#$/)).map(key => {
@@ -229,6 +231,7 @@ function remap (state) {
   return {
     folders,
     status,
+    allArticles,
     articles,
     activeArticle,
     filters: {
@@ -247,6 +250,7 @@ HomePage.propTypes = {
     userId: PropTypes.string
   }),
   articles: PropTypes.array,
+  allArticles: PropTypes.array,
   activeArticle: PropTypes.shape(),
   dispatch: PropTypes.func,
   folders: PropTypes.array,

browser/main/HomePage/ArticleNavigator.js

@@ -88,16 +88,17 @@ export default class ArticleNavigator extends React.Component {
   }
 
   render () {
-    let { status, folders } = this.props
+    let { status, folders, allArticles } = this.props
     let { targetFolders } = status
     if (targetFolders == null) targetFolders = []
 
     let folderElememts = folders.map((folder, index) => {
       let isActive = findWhere(targetFolders, {key: folder.key})
+      let articleCount = allArticles.filter(article => article.FolderKey === folder.key).length
 
       return (
         <button onClick={e => this.handleFolderButtonClick(folder.name)(e)} key={'folder-' + folder.key} className={isActive ? 'active' : ''}>
-          <FolderMark color={folder.color}/> {folder.name}
+          <FolderMark color={folder.color}/> {folder.name} <span className='articleCount'>{articleCount}</span>
         </button>
       )
     })
@@ -150,6 +151,7 @@ export default class ArticleNavigator extends React.Component {
 ArticleNavigator.propTypes = {
   activeUser: PropTypes.object,
   folders: PropTypes.array,
+  allArticles: PropTypes.array,
   status: PropTypes.shape({
     folderId: PropTypes.number
   }),

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

@@ -1,4 +1,5 @@
 articleNavBgColor = #353535
+articleCount = #999
 
 .ArticleNavigator
   background-color articleNavBgColor
@@ -150,6 +151,9 @@ articleNavBgColor = #353535
         background-color transparentify(white, 5%)
       &.active, &:active
         background-color brandColor
+      .articleCount
+        color articleCount
+        font-size 12px
   .members
     .memberList>div
       height 33px