From 19adbf48642085f39b9562ea6ad1e248a546373c Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 20 Sep 2018 02:19:48 +0200
Subject: browser is browsing

---
 app/client/browser/browser.actions.js   |  3 ++
 app/client/browser/browser.component.js | 64 ++++++++++++++++++++++++++++++---
 app/client/browser/browser.reducer.js   | 40 +++++++++++++++++++++
 3 files changed, 102 insertions(+), 5 deletions(-)
 create mode 100644 app/client/browser/browser.actions.js
 create mode 100644 app/client/browser/browser.reducer.js

(limited to 'app/client/browser')

diff --git a/app/client/browser/browser.actions.js b/app/client/browser/browser.actions.js
new file mode 100644
index 0000000..81b9c7c
--- /dev/null
+++ b/app/client/browser/browser.actions.js
@@ -0,0 +1,3 @@
+import types from '../types'
+import actions from '../actions'
+import util from '../util'
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)
diff --git a/app/client/browser/browser.reducer.js b/app/client/browser/browser.reducer.js
new file mode 100644
index 0000000..099176f
--- /dev/null
+++ b/app/client/browser/browser.reducer.js
@@ -0,0 +1,40 @@
+import types from '../types'
+
+import moment from 'moment/min/moment.min'
+let FileSaver = require('file-saver')
+
+const browserInitialState = {
+  loading: false,
+  progress: null,
+  error: null,
+  data: {},
+  images: [
+  ],
+  files: [
+  ]
+}
+
+const browserReducer = (state = browserInitialState, action) => {
+  switch(action.type) {
+    case types.app.load_progress:
+      if (!action.data || action.data.module !== 'browser') {
+        return state
+      }
+      return {
+        ...state,
+        loading: true,
+        progress: action.progress,
+      }
+    case types.app.load:
+      return {
+        ...state,
+        loading: false,
+        error: null,
+        data: action.data,
+      }
+    default:
+      return state
+  }
+}
+
+export default browserReducer
-- 
cgit v1.2.3-70-g09d2