Add support for single diff view (berzniz#132)

src/js/components/file/index.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import fileIcons from 'file-icons-js'
 import DiffStats from '../diffStats'
-import { StorageSync } from '../../lib'
-
+import { StorageSync, hideAllDiffs } from '../../lib'
 class File extends React.Component {
   constructor (props) {
     super(props)
     this.state = {}
+
+    this.onClick = this.onClick.bind(this)
   }
 
   async componentDidMount () {
@@ -23,6 +24,22 @@ class File extends React.Component {
     this.unmounted = true
   }
 
+  onClick () {
+    const { href } = this.props
+    const { options } = this.state
+
+    const id = href.split('#')[1]
+    const currentDiff = document.getElementById(id)
+
+    // hide all elements but the selected one
+    if (options.singleDiff) {
+      hideAllDiffs()
+
+      // get the diff id to show it
+      currentDiff.style.display = 'block'
+    }
+  }
+
   getHighlight ({ name, filter, index }) {
     const prefix = name.substring(0, index)
     const middle = name.substring(index, index + filter.length)
@@ -53,7 +70,7 @@ class File extends React.Component {
     return (
       <div className={topClassName}>
         <span className={`icon ${className}`} />
-        <a href={href} className='link-gray-dark'>{highlightedName}</a>
+        <a href={href} className='link-gray-dark' onClick={this.onClick}>{highlightedName}</a>
         {options.diffStats && diffStats && <DiffStats diffStats={diffStats} />}
         {hasComments ? (
           <svg className='github-pr-file-comment octicon octicon-comment text-gray' viewBox='0 0 16 16' width='16' height='16' aria-hidden='true'>

src/js/components/options/index.jsx

@@ -48,6 +48,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='singleDiff'
+              type='checkbox'
+              checked={Boolean(this.state.singleDiff)}
+              onChange={this.updateOptions}
+            />
+            <span className='label-body'>Show <strong>Single Diff</strong> for a selected file</span>
+          </label>
         </div>
       </div>
     )

src/js/createTree.js

@@ -26,8 +26,8 @@ export const createTree = ({ nodeLabel, list, href, hasComments, isDeleted, diff
 
   return (
     <Folder nodeLabel={nodeLabel} isViewed={rawChildren.every(child => child.props.isViewed)} >
-      {rawChildren.map(node => (
-        <span key={node.nodeLabel}>
+      {rawChildren.map((node, index) => (
+        <span key={`${node.nodeLabel}-${index}`}>
           {node}
         </span>
       ))}

src/js/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from 'react-dom'
 import Tree from './components/tree'
-import { createFileTree, createRootElement, getBrowserApi } from './lib'
+import { createFileTree, createRootElement, getBrowserApi, hideAllDiffs, StorageSync } from './lib'
 
 import './style.css'
 
@@ -40,6 +40,8 @@ class Top extends React.Component {
 
     if (fileCount !== count) {
       setTimeout(this.calculateTree.bind(this), 100)
+    } else {
+      initSingleDiff()
     }
   }
 
@@ -85,6 +87,26 @@ const loadFonts = () => {
     })
 }
 
+const initSingleDiff = async () => {
+  const options = await StorageSync.get()
+  if (!options.singleDiff) {
+    return
+  }
+
+  hideAllDiffs()
+
+  const id = window.location.href.split('#')[1]
+
+  // if we have a diff ref in the URL try to unhide it
+  if (id) {
+    const currentDiff = document.getElementById(id)
+
+    if (currentDiff) {
+      currentDiff.style.display = 'block'
+    }
+  }
+}
+
 const start = () => {
   observe()
   renderTree()

src/js/lib.js

@@ -204,8 +204,10 @@ export const StorageSync = {
   save () {
     return new Promise(resolve => {
       const diffStats = document.getElementById('diffStats').checked
+      const singleDiff = document.getElementById('singleDiff').checked
       const options = {
-        diffStats
+        diffStats,
+        singleDiff
       }
 
       if (window.chrome) {
@@ -218,7 +220,8 @@ export const StorageSync = {
   get () {
     return new Promise(resolve => {
       const defaults = {
-        diffStats: false
+        diffStats: false,
+        singleDiff: false
       }
       if (window.chrome) {
         window.chrome.storage.sync.get(defaults, resolve)
@@ -233,3 +236,12 @@ export const isFileViewed = diffElement => {
   const checkbox = diffElement.querySelector('.js-reviewed-checkbox')
   return checkbox && checkbox.checked
 }
+
+// hide all the diff elements
+export const hideAllDiffs = () => {
+  const diffNodeList = document.getElementsByClassName('js-file')
+
+  for (let i = 0; i < diffNodeList.length; i++) {
+    diffNodeList[i].style.display = 'none'
+  }
+}