From 504a824745183918bc9dbde2b096e5e96645cb86 Mon Sep 17 00:00:00 2001
From: Tal Bereznitskey <berzniz@gmail.com>
Date: Wed, 10 Oct 2018 10:13:59 +0300
Subject: [PATCH] Add strike-through to deleted files

---
 src/js/components/branch.jsx |  4 ++--
 src/js/components/file.jsx   |  8 ++++++--
 src/js/lib.js                | 13 +++++++++++++
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/js/components/branch.jsx b/src/js/components/branch.jsx
index 085ec57..a40b063 100644
--- a/src/js/components/branch.jsx
+++ b/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, diffElement, visibleElement }) => {
+const Branch = ({ nodeLabel, list, href, hasComments, isDeleted, diffElement, visibleElement }) => {
   if (href) {
     const isVisible = (diffElement === visibleElement)
-    return <File name={nodeLabel} href={href} hasComments={hasComments} isVisible={isVisible} />
+    return <File name={nodeLabel} href={href} hasComments={hasComments} isDeleted={isDeleted} isVisible={isVisible} />
   }
 
   return (
diff --git a/src/js/components/file.jsx b/src/js/components/file.jsx
index 55e24a2..6d52cc4 100644
--- a/src/js/components/file.jsx
+++ b/src/js/components/file.jsx
@@ -4,10 +4,14 @@ import fileIcons from 'file-icons-js'
 const highlightColor = '#ebebeb'
 const transparentColor = 'transparent'
 
-const File = ({ name, href, hasComments, isVisible }) => {
+const File = ({ name, href, hasComments, isDeleted, isVisible }) => {
   const className = fileIcons.getClassWithColor(name)
+  const style = {
+    background: isVisible ? highlightColor : transparentColor,
+    textDecoration: isDeleted ? 'line-through' : null
+  }
   return (
-    <div className='github-pr-file' style={{ background: isVisible ? highlightColor : transparentColor }}>
+    <div className='github-pr-file' style={style}>
       <span className={`icon ${className}`} />
       <a href={href} className='link-gray-dark'>{name}</a> {hasComments ? ' 💬' : ''}
     </div>
diff --git a/src/js/lib.js b/src/js/lib.js
index 5cd7080..28b6a18 100644
--- a/src/js/lib.js
+++ b/src/js/lib.js
@@ -34,6 +34,16 @@ const hasCommentsForFileIndex = (fileIndex) => {
   return diffTable.querySelectorAll('.inline-comments').length
 }
 
+const isDeletedForFileIndex = (fileIndex) => {
+  const diffTable = document.getElementById(`diff-${fileIndex}`)
+  if (!diffTable) {
+    return false
+  }
+
+  const hiddenDiffReason = diffTable.querySelector('.hidden-diff-reason')
+  return hiddenDiffReason && (hiddenDiffReason.innerText.includes('file was deleted'))
+}
+
 export const folderConcat = (node) => {
   const isFileOrEmpty = (node.list === undefined || node.list.length === 0 || (node.href !== null && node.href !== undefined))
   if (isFileOrEmpty) {
@@ -47,6 +57,7 @@ export const folderConcat = (node) => {
     if (isLastCollapsedIsFolder) {
       node.nodeLabel = node.nodeLabel + '/' + collapsed.nodeLabel
       node.hasComments = collapsed.hasComments || node.hasComments
+      node.isDeleted = collapsed.isDeleted || node.isDeleted
       node.list = collapsed.list
     }
     return node
@@ -74,6 +85,7 @@ export const createFileTree = () => {
       let node = location.list.find(node => node.nodeLabel === part)
       if (!node) {
         const hasComments = (hasCommentsForFileIndex(fileIndex) > 0)
+        const isDeleted = isDeletedForFileIndex(fileIndex)
         const diffElement = document.getElementById(`diff-${fileIndex}`)
         tree.diffElements.push(diffElement)
         node = {
@@ -81,6 +93,7 @@ export const createFileTree = () => {
           list: [],
           href: (index === parts.length - 1) ? href : null,
           hasComments,
+          isDeleted,
           diffElement
         }
         location.list.push(node)