1 files changed, 59 insertions, 5 deletions
diff --git a/app/client/browser/browser.component.js b/app/client/browser/browser.component.js
index 7330171..767c5fb 100644
--- a/app/client/browser/browser.component.js
+++ b/app/client/browser/browser.component.js
@@ -3,14 +3,68 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { Route, Link } from 'react-router-dom'
 
+import { Loading, FileList } 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 {
-  render(){
+  state = {
+    dir: '/',
+    module: 'pix2pixhd',
+    files: [],
+    loading: true
+  }
+  componentDidMount() {
+    this.fetch(this.state.dir)
+  }
+  handlePick(file) {
+    console.log(file)
+    this.fetch([this.state.dir, file.name].join('/').replace('//','/'))
+  }
+  fetch(dir) {
+    console.log('fetch', dir)
+    const { module } = this.state
+    this.setState({ dir, loading: true })
+    actions.socket.list_directory({ module, dir }).then(files => {
+      console.log(files)
+      this.setState({ dir, files, loading: false })
+    })
+  }
+
+  render() {
     const { app } = this.props
-    console.log(this.props)
+    const { loading, dir, module, files } = this.state
+    console.log(this.props, this.state)
     return (
       <div className='app browser'>
-        <h1>browser</h1>
-        {app.tool}
+        <h1>{dir}</h1>
+        {app.tool}<br/>
+        {loading && <Loading />}
+        <FileList
+          files={files}
+          groupDirectories
+          parentDirectory={dir !== '/'}
+          orderBy='name asc'
+          fields={'name datetime size'}
+          onClick={(file, e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            console.log('picked a result', file)
+            this.handlePick(file)
+          }}
+          onClickParent={e => {
+            console.log('navigate up')
+            this.fetch(this.state.dir.split('/').slice(0, -1).join('') || '/')
+          }}
+        />
       </div>
     )
   }
@@ -21,7 +75,7 @@ const mapStateToProps = state => ({
 })
 
 const mapDispatchToProps = (dispatch, ownProps) => ({
-  // actions: bindActionCreators(dashboardActions, dispatch),
+  actions: bindActionCreators({}, dispatch),
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(Browser)