Implement file count display for folders

src/js/components/folder/index.jsx

@@ -1,18 +1,31 @@
 import React from 'react'
 import TreeView from 'react-treeview'
+import { StorageSync } from '../../lib'
 
 class Folder extends React.Component {
   constructor (props) {
     super(props)
     this.state = {}
   }
 
+  async componentDidMount () {
+    const options = await StorageSync.get()
+
+    if (this.unmounted) {
+      return
+    }
+
+    this.setState({ options })
+  }
+
   render () {
-    const { children, nodeLabel, isViewed } = this.props
+    const { children, nodeLabel, isViewed, fileCount } = this.props
+    const { options = {} } = this.state
+    const fileCountLabel = fileCount > 1 ? 'files' : 'file'
 
     const display = (
-      <div>
-        {nodeLabel}
+      <div className='github-pr-folder-label'>
+        {nodeLabel} {options.fileCount && fileCount && <span className='github-pr-folder-count-label'>({fileCount} {fileCountLabel})</span>}
         {isViewed
           ? (
             <svg className='github-pr-file-checkmark octicon octicon-check' viewBox='0 0 12 16' version='1.1' width='12' height='16' aria-hidden='true'>

src/js/components/options/index.jsx

@@ -47,6 +47,15 @@ class Options extends React.Component {
             />
             <span className='label-body'>Show <strong>Diff Stats</strong> next to files</span>
           </label>
+          <label className='label-enabled'>
+            <input
+              id='fileCount'
+              type='checkbox'
+              checked={Boolean(this.state.fileCount)}
+              onChange={this.handleOptions}
+            />
+            <span className='label-body'>Show <strong>File Count</strong> next to folders</span>
+          </label>
         </div>
       </div>
     )

src/js/createTree.js

@@ -3,7 +3,7 @@ import { isFileViewed } from './lib'
 import File from './components/file'
 import Folder from './components/folder'
 
-export const createTree = ({ nodeLabel, list, href, hasComments, isDeleted, diffElement, diffStats, visibleElement, filter }) => {
+export const createTree = ({ nodeLabel, list, href, hasComments, isDeleted, diffElement, diffStats, visibleElement, filter, fileCount }) => {
   if (href) {
     const isVisible = (diffElement === visibleElement)
     const isViewed = isFileViewed(diffElement)
@@ -26,7 +26,7 @@ export const createTree = ({ nodeLabel, list, href, hasComments, isDeleted, diff
   const rawChildren = list.map(node => createTree({ ...node, visibleElement, filter }))
 
   return (
-    <Folder key={nodeLabel} nodeLabel={nodeLabel} isViewed={rawChildren.every(child => child.props.isViewed)}>
+    <Folder key={nodeLabel} nodeLabel={nodeLabel} fileCount={fileCount} isViewed={rawChildren.every(child => child.props.isViewed)}>
       {rawChildren.map(node => (
         <span key={node.key}>
           {node}

src/js/lib.js

@@ -146,10 +146,13 @@ export const createFileTree = (filter = EMPTY_FILTER) => {
               hasComments,
               isDeleted,
               diffElement,
+              fileCount: 1,
               diffStats: getDiffStatsForDiffElement(diffElement)
             }
             location.list.push(node)
           }
+        } else {
+          node.fileCount = (node.fileCount || 0) + 1
         }
         location.list = location.list.sort(sorter)
         location = node
@@ -204,8 +207,10 @@ export const StorageSync = {
   save () {
     return new Promise(resolve => {
       const diffStats = document.getElementById('diffStats').checked
+      const fileCount = document.getElementById('fileCount').checked
       const options = {
-        diffStats
+        diffStats,
+        fileCount
       }
 
       if (window.chrome) {
@@ -218,7 +223,8 @@ export const StorageSync = {
   get () {
     return new Promise(resolve => {
       const defaults = {
-        diffStats: false
+        diffStats: false,
+        fileCount: true
       }
       if (window.chrome) {
         window.chrome.storage.sync.get(defaults, resolve)

src/js/style.css

@@ -290,3 +290,12 @@
     color: #2cbe4e;
     margin-left: 5px;
 }
+
+.github-pr-folder-count-label {
+    color: #999;
+    margin-left: 3px;
+}
+
+.github-pr-folder-label {
+    white-space: nowrap;
+}