Update code style to fit project

src/js/components/tree.jsx

@@ -2,9 +2,8 @@ import React from 'react'
 import Branch from './branch.jsx'
 import { isElementVisible } from '../lib'
 
-// Minimum and maximum resizable area width
-const MIN_WIDTH = 55
-const MAX_WIDTH = 700
+const MIN_RESIZE_WIDTH = 55
+const MAX_RESIZE_WIDTH = 700
 
 const widthLocalStorageKey = '__better_github_pr_tree_width'
 
@@ -25,11 +24,7 @@ class Tree extends React.Component {
     this.treeContainer = document.querySelector('.__better_github_pr')
     this.reviewContainers = document.querySelectorAll('.enable_better_github_pr .diff-view, .enable_better_github_pr .commit.full-commit.prh-commit')
 
-    // Set initial width from value saved to localStorrage
-    const savedWitdh = window.localStorage.getItem(widthLocalStorageKey)
-    if (savedWitdh) {
-      this.setWidth(parseInt(savedWitdh, 10))
-    }
+    this.setInitialWidth()
 
     this.state = {
       show: true,
@@ -101,14 +96,21 @@ class Tree extends React.Component {
     this.setWidth(0, false)
   }
 
+  setInitialWidth () {
+    const savedWitdh = window.localStorage.getItem(widthLocalStorageKey)
+    if (savedWitdh) {
+      this.setWidth(parseInt(savedWitdh, 10))
+    }
+  }
+
   setWidth (width, withConstraints = true) {
     if (withConstraints) {
-      if (width <= MIN_WIDTH) width = MIN_WIDTH
-      if (width >= MAX_WIDTH) width = MAX_WIDTH
+      if (width <= MIN_RESIZE_WIDTH) width = MIN_RESIZE_WIDTH
+      if (width >= MAX_RESIZE_WIDTH) width = MAX_RESIZE_WIDTH
     }
 
     this.treeContainer.style.width = `${width}px`
-    this.reviewContainers.forEach((element, index) => {
+    this.reviewContainers.forEach((element) => {
       element.style['margin-left'] = `${width + 10}px`
     })
   }

src/js/index.jsx

@@ -2,7 +2,6 @@ import React from 'react'
 import { render } from 'react-dom'
 import Tree from './components/tree'
 import { createFileTree, createRootElement } from './lib'
-import { folderConcat } from './folderconcat/folder-concat'
 import './style.css'
 
 const { document, MutationObserver, parseInt } = window
@@ -24,8 +23,7 @@ const renderTree = () => {
     return
   }
 
-  let { tree, count } = createFileTree()
-  tree = folderConcat(tree)
+  const { tree, count } = createFileTree()
   render(<Tree root={tree} />, rootElement)
   if (fileCount !== count) {
     setTimeout(renderTree.bind(this, rootElement), 100)

src/js/lib.js

@@ -34,6 +34,28 @@ const hasCommentsForFileIndex = (fileIndex) => {
   return diffTable.querySelectorAll('.inline-comments').length
 }
 
+export const folderConcat = (node) => {
+  const isFileOrEmpty = (node.list === undefined || node.list.length === 0 || (node.href !== null && node.href !== undefined))
+  if (isFileOrEmpty) {
+    return node
+  }
+
+  const hasSingleChild = (node.list.length === 1)
+  if (hasSingleChild) {
+    const collapsed = folderConcat(node.list[0])
+    const isLastCollapsedIsFolder = node.nodeLabel !== '/' && (collapsed.href === null || collapsed.href === undefined)
+    if (isLastCollapsedIsFolder) {
+      node.nodeLabel = node.nodeLabel + '/' + collapsed.nodeLabel
+      node.hasComments = collapsed.hasComments || node.hasComments
+      node.list = collapsed.list
+    }
+    return node
+  }
+
+  node.list.map(x => folderConcat(x))
+  return node
+}
+
 export const createFileTree = () => {
   const fileInfo = [...document.querySelectorAll('.file-info > a')]
   const files = fileInfo.map(({ title, href }) => {
@@ -68,7 +90,7 @@ export const createFileTree = () => {
     })
   })
   return {
-    tree,
+    tree: folderConcat(tree),
     count: fileInfo.length
   }
 }

src/js/style.css

@@ -82,7 +82,6 @@
 .__better_github_pr_wide .container {
     min-width: 980px;
     width: 96% !important;
-    transition: width .2s ease;
 }
 
 .__better_github_pr_wide .repository-content .discussion-timeline {
@@ -110,6 +109,10 @@
     max-width: 708px;
 }
 
+.enable_better_github_pr .container {
+    transition: width .2s ease;
+}
+
 /* react-treeview */
 
 .tree-view_item {