Merge pull request #108 from Linus045/master

Reload button to manually reload file tree
berzniz · Sep 8, 2021 · b54ad6a · b54ad6a
2 parents 65f55ee + 0ebdeec
commit b54ad6a
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/src/js/components/actions/index.jsx b/src/js/components/actions/index.jsx
@@ -1,9 +1,19 @@
 import React from 'react'
 
-const Actions = ({ filter, filterFiles, onFullWidth, onOptions, onClose }) => (
+const Actions = ({ filter, filterFiles, onFullWidth, onOptions, onClose, onReloadTree }) => (
   <div className='actions'>
     <input type='text' value={filter} className='actions-filter' placeholder='Type to filter files' onChange={filterFiles} />
 
+    <div className='actions-small-button'>
+      <button onClick={onReloadTree} className='reload-tree-button'>
+        <span className='tooltipped tooltipped-s' aria-label='Manually reload the tree'>
+          <svg className='octicon octicon-sync' xmlns="http://www.w3.org/2000/svg" transform="translate(0,4)" width="24" height="20" viewBox="0 0 12 16">
+            <path fillRule="evenodd" d="M10.24 7.4a4.15 4.15 0 0 1-1.2 3.6 4.346 4.346 0 0 1-5.41.54L4.8 10.4.5 9.8l.6 4.2 1.31-1.26c2.36 1.74 5.7 1.57 7.84-.54a5.876 5.876 0 0 0 1.74-4.46l-1.75-.34zM2.96 5a4.346 4.346 0 0 1 5.41-.54L7.2 5.6l4.3.6-.6-4.2-1.31 1.26c-2.36-1.74-5.7-1.57-7.85.54C.5 5.03-.06 6.65.01 8.26l1.75.35A4.17 4.17 0 0 1 2.96 5z"/>
+          </svg>
+        </span>
+      </button>
+    </div>
+
     <div className='actions-small-button'>
       <button onClick={onFullWidth} className='full-width-button' title='Toggle full width mode'>
         <span className='tooltipped tooltipped-s' aria-label='Toggle full width mode'>

diff --git a/src/js/components/tree/index.jsx b/src/js/components/tree/index.jsx
@@ -12,6 +12,7 @@ const fullScreenStorageKey = '__better_github_pr_full_screen'
 class Tree extends React.Component {
   constructor (props) {
     super(props)
+    this.onReloadTree = this.props.reloadTree
 
     this.handleClose = this.handleClose.bind(this)
     this.onScroll = this.onScroll.bind(this)
@@ -188,6 +189,7 @@ class Tree extends React.Component {
           onFullWidth={this.handleFullWidth}
           onOptions={this.handleOptions}
           onClose={this.handleClose}
+          onReloadTree={this.onReloadTree}
         />
         <div className='file-container'>
           <div>

diff --git a/src/js/index.jsx b/src/js/index.jsx
@@ -29,6 +29,11 @@ class Top extends React.Component {
     this.calculateTree()
   }
 
+  loadTree() {
+    const { tree } = createFileTree()
+    this.setState({ tree })
+  }
+
   calculateTree () {
     const isFilteredToCommit = Boolean(document.querySelector('.js-commits-filtered'))
     const fileCount = parseInt((document.getElementById('files_tab_counter') || { innerText: 0 }).innerText, 10)
@@ -50,7 +55,7 @@ class Top extends React.Component {
     if (!tree) {
       return null
     }
-    return <Tree root={tree} />
+    return <Tree root={tree} reloadTree={() => this.loadTree()} />
   }
 }