Merge pull request #53 from berzniz/diff_stats

Add configurable diff stats

deploy_chrome_store.sh

@@ -1,6 +1,7 @@
 #!/bin/bash -e
 
 yarn
+yarn test-ci
 OUTPUT=extension.zip
 NODE_ENV=production yarn build
 zip -r $OUTPUT build

src/js/components/branch.jsx

@@ -2,10 +2,10 @@ import React from 'react'
 import TreeView from 'react-treeview'
 import File from './file'
 
-const Branch = ({ nodeLabel, list, href, hasComments, isDeleted, diffElement, visibleElement }) => {
+const Branch = ({ nodeLabel, list, href, hasComments, isDeleted, diffElement, diffStats, visibleElement }) => {
   if (href) {
     const isVisible = (diffElement === visibleElement)
-    return <File name={nodeLabel} href={href} hasComments={hasComments} isDeleted={isDeleted} isVisible={isVisible} />
+    return <File name={nodeLabel} href={href} hasComments={hasComments} isDeleted={isDeleted} isVisible={isVisible} diffStats={diffStats} />
   }
 
   return (

src/js/components/diffStats.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+const AdditionBlock = (props) => <span className='change-block addition' {...props} />
+const DeletionBlock = (props) => <span className='change-block deletion' {...props} />
+
+const DiffStats = ({ diffStats }) => {
+  const changeBlocks = []
+  for (let i = 0; i < Math.log(diffStats.additions); i++) {
+    changeBlocks.push(<AdditionBlock key={`addition-${i}`} />)
+  }
+  for (let i = 0; i < Math.log(diffStats.deletions); i++) {
+    changeBlocks.push(<DeletionBlock key={`deletion-${i}`} />)
+  }
+  const changeNumber = (diffStats.additions + diffStats.deletions).toLocaleString()
+
+  return (
+    <span className='changes'>
+      <span className='number'>{changeNumber}</span>
+      {changeBlocks}
+    </span>
+  )
+}
+
+export default DiffStats

src/js/components/file.jsx

@@ -1,21 +1,49 @@
 import React from 'react'
 import fileIcons from 'file-icons-js'
+import DiffStats from './diffStats'
+import { StorageSync } from '../lib'
 
 const highlightColor = '#ebebeb'
 const transparentColor = 'transparent'
 
-const File = ({ name, href, hasComments, isDeleted, isVisible }) => {
-  const className = fileIcons.getClassWithColor(name)
-  const style = {
-    background: isVisible ? highlightColor : transparentColor,
-    textDecoration: isDeleted ? 'line-through' : null
+class File extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {}
+  }
+
+  async componentDidMount () {
+    const options = await StorageSync.get()
+
+    if (this.unmounted) {
+      return
+    }
+
+    this.setState({ options })
+  }
+
+  componentWillUnmount () {
+    this.unmounted = true
+  }
+
+  render () {
+    const { name, href, hasComments, isDeleted, isVisible, diffStats } = this.props
+    const { options = {} } = this.state
+    const className = fileIcons.getClassWithColor(name)
+    const style = {
+      background: isVisible ? highlightColor : transparentColor,
+      textDecoration: isDeleted ? 'line-through' : null
+    }
+
+    return (
+      <div className='github-pr-file' style={style}>
+        <span className={`icon ${className}`} />
+        <a href={href} className='link-gray-dark'>{name}</a>
+        {options.diffStats && diffStats && <DiffStats diffStats={diffStats} />}
+        {hasComments ? ' 💬' : ''}
+      </div>
+    )
   }
-  return (
-    <div className='github-pr-file' style={style}>
-      <span className={`icon ${className}`} />
-      <a href={href} className='link-gray-dark'>{name}</a> {hasComments ? ' 💬' : ''}
-    </div>
-  )
 }
 
 export default File

src/js/components/tree.jsx

@@ -31,7 +31,7 @@ class Tree extends React.Component {
       root: this.props.root,
       show: true,
       visibleElement: null,
-      filter: null
+      filter: ''
     }
   }
 
@@ -137,7 +137,7 @@ class Tree extends React.Component {
   }
 
   filterFiles (event) {
-    const filter = event.target.value || null
+    const filter = event.target.value || ''
     this.setState({
       root: createFileTree(filter).tree,
       filter

src/js/lib.js

@@ -25,6 +25,23 @@ const sorter = (a, b) => {
   }
 }
 
+const parseChangeNumber = (n) => {
+  if (!n.replace) return 0
+  const number = parseInt(n.replace(',', ''), 10)
+  return isNaN(number) ? 0 : number
+}
+
+const getDiffStatsForDiffElement = (diffElement) => {
+  const diffStatSpan = diffElement.getElementsByClassName('diffstat')[0]
+  const changesTxt = diffStatSpan && diffStatSpan.getAttribute('aria-label')
+  const changes = changesTxt &&
+    changesTxt.match(/([\d,]*) additions? & ([\d,]*) deletions?/)
+  return changes && {
+    additions: parseChangeNumber(changes[1]),
+    deletions: parseChangeNumber(changes[2])
+  }
+}
+
 const hasCommentsForFileIndex = (fileIndex) => {
   const diffTable = document.getElementById(`diff-${fileIndex}`)
   if (!diffTable) {
@@ -103,7 +120,8 @@ export const createFileTree = (filter = EMPTY_FILTER) => {
             href: (index === parts.length - 1) ? href : null,
             hasComments,
             isDeleted,
-            diffElement
+            diffElement,
+            diffStats: getDiffStatsForDiffElement(diffElement)
           }
           location.list.push(node)
         }

src/js/style.css

@@ -172,3 +172,24 @@
 .github-pr-file > span {
     margin-right: 4px;
 }
+
+.github-pr-file > span.changes > .number {
+  color: #888888;
+  margin-left: 8px;
+  margin-right: 4px;
+}
+
+.github-pr-file span.addition {
+    background-color: #2cbe4e;
+}
+
+.github-pr-file span.change-block {
+    display: inline-block;
+    height: 6px;
+    margin-right: 2px;
+    width: 6px;
+}
+
+.github-pr-file span.deletion {
+    background-color: #b22;
+}