2 files changed, 91 insertions, 1 deletions
diff --git a/app/client/common/browser.component.js b/app/client/common/browser.component.js
new file mode 100644
index 0000000..50b31cf
--- /dev/null
+++ b/app/client/common/browser.component.js
@@ -0,0 +1,89 @@
+import { h, Component } from 'preact'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { Route, Link } from 'react-router-dom'
+
+import { Loading, FileList, FileViewer } from '../common'
+
+import actions from '../actions'
+
+class Browser extends Component {
+  state = {
+    dir: '/',
+    files: [],
+    loading: true
+  }
+  componentDidMount() {
+    this.fetch(this.state.dir)
+  }
+  handlePick(file) {
+    console.log(file)
+    if (file.dir) {
+      this.fetch([this.state.dir, file.name].join('/').replace('//','/'))
+    } else {
+      this.fetchFile([this.state.dir, file.name].join('/').replace('//','/'))
+    }
+  }
+  fetch(dir) {
+    console.log('fetch', dir)
+    const { tool: module } = this.props.app
+    this.setState({ dir, file: null, loading: true })
+    actions.socket.list_directory({ module, dir }).then(files => {
+      console.log(files)
+      this.setState({ dir, files, loading: false })
+    })
+  }
+  fetchFile(fn) {
+    console.log('fetch file', fn)
+    const { tool: module } = this.props.app
+    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 {
+      loading, dir, files,
+      loadingFile, file,
+    } = this.state
+    console.log(this.props, this.state)
+    return (
+      <div className='app browser'>
+        <h1>{dir}{dir[dir.length-1] !== '/' && '/'}</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('/') || '/')
+          }}
+        />
+        {loadingFile && <Loading />}
+        {file && <FileViewer file={file} />}
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  app: state.system.app,
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  actions: bindActionCreators({}, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Browser)
diff --git a/app/client/common/index.js b/app/client/common/index.js
index ffb852d..e120597 100644
--- a/app/client/common/index.js
+++ b/app/client/common/index.js
@@ -1,5 +1,6 @@
 import AudioPlayer from './audioPlayer/audioPlayer.component'
 import AugmentationGrid from './augmentationGrid.component'
+import Browser from './browser.component'
 import Button from './button.component'
 import ButtonGrid from './buttonGrid.component'
 import Checkbox from './checkbox.component'
@@ -28,7 +29,7 @@ export {
   Views,
   Loading, Progress, Header, AudioPlayer,
   FolderList, FileList, FileRow, FileUpload, FileViewer,
-  Gallery, Player,
+  Gallery, Player, Browser,
   Group, ParamGroup, Param,
   TextInput, NumberInput,
   Slider, Select, SelectGroup, Button, Checkbox,