fileviewer compoonent

1 files changed, 6 insertions, 13 deletions

diff --git a/app/client/browser/browser.component.js b/app/client/browser/browser.component.js
index 5183161..076b4b4 100644
--- a/app/client/browser/browser.component.js
+++ b/app/client/browser/browser.component.js
@@ -3,18 +3,10 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { Route, Link } from 'react-router-dom'
 
-import { Loading, FileList } from '../common'
+import { Loading, FileList, FileViewer } from '../common'
 
 import actions from '../actions'
 
-/*
- at this point we can list files
- - filelist should support parentdirectory
- - filelist should list directories first
- - handle fetching a file from the server
-   - maybe don't let it fetch if it's larger than 2 megs?
-*/
-
 class Browser extends Component {
   state = {
     dir: '/',
@@ -36,7 +28,7 @@ class Browser extends Component {
   fetch(dir) {
     console.log('fetch', dir)
     const { module } = this.state
-    this.setState({ dir, loading: true })
+    this.setState({ dir, file: null, loading: true })
     actions.socket.list_directory({ module, dir }).then(files => {
       console.log(files)
       this.setState({ dir, files, loading: false })
@@ -47,10 +39,10 @@ class Browser extends Component {
     const { module } = this.state
     this.setState({ file: null, loadingFile: true })
     actions.socket.read_file({ module, fn }).then(file => {
+      console.log(file)
       this.setState({ file, loadingFile: false })
     })
   }
-
   render() {
     const { app } = this.props
     const {
@@ -60,7 +52,7 @@ class Browser extends Component {
     console.log(this.props, this.state)
     return (
       <div className='app browser'>
-        <h1>{dir}</h1>
+        <h1>{dir}{dir[dir.length-1] !== '/' && '/'}</h1>
         {app.tool}<br/>
         {loading && <Loading />}
         <FileList
@@ -77,10 +69,11 @@ class Browser extends Component {
           }}
           onClickParent={e => {
             console.log('navigate up')
-            this.fetch(this.state.dir.split('/').slice(0, -1).join('') || '/')
+            this.fetch(this.state.dir.split('/').slice(0, -1).join('/') || '/')
           }}
         />
         {loadingFile && <Loading />}
+        {file && <FileViewer file={file} />}
       </div>
     )
   }