From fb1462f669afc6085807aa49653bc25c8077b20d Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sun, 15 Nov 2015 01:07:46 +0900
Subject: [PATCH] =?UTF-8?q?Folder=20=E3=83=AA=E3=82=B9=E3=83=88=E3=81=AB?=
 =?UTF-8?q?=20article=E3=81=AE=E6=95=B0=E3=82=92=E3=81=A0=E3=81=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 browser/main/HomePage.js                                    | 6 +++++-
 browser/main/HomePage/ArticleNavigator.js                   | 6 ++++--
 .../main/HomeContainer/components/ArticleNavigator.styl     | 4 ++++
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/browser/main/HomePage.js b/browser/main/HomePage.js
index e3fe68be..1504cda9 100644
--- a/browser/main/HomePage.js
+++ b/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,
diff --git a/browser/main/HomePage/ArticleNavigator.js b/browser/main/HomePage/ArticleNavigator.js
index 17e37c45..d4c21131 100644
--- a/browser/main/HomePage/ArticleNavigator.js
+++ b/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
   }),
diff --git a/browser/styles/main/HomeContainer/components/ArticleNavigator.styl b/browser/styles/main/HomeContainer/components/ArticleNavigator.styl
index 77b19b03..68c798cf 100644
--- a/browser/styles/main/HomeContainer/components/ArticleNavigator.styl
+++ b/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