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/auth/auth.gate.js            |  4 +--
 app/client/browser/browser.actions.js   |  3 ++
 app/client/browser/browser.component.js | 64 ++++++++++++++++++++++++++++++---
 app/client/browser/browser.reducer.js   | 40 +++++++++++++++++++++
 app/client/common/fileList.component.js | 21 +++++++++--
 app/client/index.jsx                    |  4 +--
 app/client/store.js                     | 18 +++++-----
 7 files changed, 134 insertions(+), 20 deletions(-)
 create mode 100644 app/client/browser/browser.actions.js
 create mode 100644 app/client/browser/browser.reducer.js

(limited to 'app/client')

diff --git a/app/client/auth/auth.gate.js b/app/client/auth/auth.gate.js
index 6df1238..076ec54 100644
--- a/app/client/auth/auth.gate.js
+++ b/app/client/auth/auth.gate.js
@@ -46,11 +46,11 @@ class AuthRouter extends Component {
 
 class AuthGate extends Component {
   render(){
-    if (!this.props.auth.initialized) {
+    if (true && !this.props.auth.initialized) {
       console.log('loading auth')
       return <div className='loading'>Loading</div>
     }
-    if (this.props.auth.isAuthenticated) {
+    if (true || this.props.auth.isAuthenticated) {
       console.log('authenticated...')
       if (this.props.auth.returnTo) {
         let { returnTo } = this.props.auth
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
diff --git a/app/client/common/fileList.component.js b/app/client/common/fileList.component.js
index b71faae..0e6b25e 100644
--- a/app/client/common/fileList.component.js
+++ b/app/client/common/fileList.component.js
@@ -11,18 +11,24 @@ export const FileList = props => {
   const {
     files,
     fields, sort, title,
-    linkFiles, onClick, onDelete,
+    linkFiles,
+    onClick, onClickParent, onDelete,
+    groupDirectories, parentDirectory,
     orderBy='name asc',
     className='',
     fileListClassName='filelist',
     rowClassName='row file'
   } = props
   const { mapFn, sortFn } = util.sort.orderByFn(orderBy)
-  const fileList = (files || [])
+  let sortedFiles = (files || [])
     .filter(f => !!f)
     .map(mapFn)
     .sort(sortFn)
-    .map(pair => {
+  if (groupDirectories) {
+    const groupedFiles = sortedFiles.reduce((a,b) => { a[b[1].dir].push(b); return a }, { true: [], false: [] })
+    sortedFiles = groupedFiles.true.concat(groupedFiles.false)
+  }
+  const fileList = sortedFiles.map(pair => {
       return <FileRow
         file={pair[1]}
         fields={fieldSet(fields)}
@@ -51,6 +57,15 @@ export const FileList = props => {
       }
 
 	  	<div className={'rows ' + fileListClassName}>
+        {parentDirectory && 
+          <div className={rowClassName + ' parent'}>
+            <div className="filename" title="Parent Directory">
+              <span class='link' onClick={(e) => onClickParent && onClickParent(e)}>
+                <i>Parent Directory</i>
+              </span>
+            </div>
+          </div>
+        }
 	  		{fileList}
       </div>
   	</div>
diff --git a/app/client/index.jsx b/app/client/index.jsx
index 7fec561..2b28ac1 100644
--- a/app/client/index.jsx
+++ b/app/client/index.jsx
@@ -36,8 +36,8 @@ const app = (
           <Route exact path='/dashboard' component={Dashboard} />
           <Route exact path='/browse' component={Browser} />
           <Route exact path='/logout' component={Auth.Logout} />
-          <Route exact path='/login' component={() => { console.log('pziss'); <Redirect to='/' /> }} />
-          <Route exact path='/signup' component={() => { console.log('pziss'); <Redirect to='/' /> }} />
+          <Route exact path='/login' component={() => { <Redirect to='/' /> }} />
+          <Route exact path='/signup' component={() => { <Redirect to='/' /> }} />
           {module_list}
           <Route exact path='/' component={Dashboard} />
           <Route path='/' component={Header} />
diff --git a/app/client/store.js b/app/client/store.js
index 654b22d..d6c632c 100644
--- a/app/client/store.js
+++ b/app/client/store.js
@@ -7,24 +7,26 @@ import { routerReducer } from 'react-router-redux'
 
 // import navReducer from './nav.reducer'
 import authReducer from './auth/auth.reducer'
-import systemReducer from './system/system.reducer'
-import dashboardReducer from './dashboard/dashboard.reducer'
 import liveReducer from './live/live.reducer'
-import uploadReducer from './dataset/upload.reducer'
 import queueReducer from './queue/queue.reducer'
+import systemReducer from './system/system.reducer'
+import uploadReducer from './dataset/upload.reducer'
+import browserReducer from './browser/browser.reducer'
+import dashboardReducer from './dashboard/dashboard.reducer'
 import audioPlayerReducer from './common/audioPlayer/audioPlayer.reducer'
 import { moduleReducer } from './modules/module.reducer'
 
 const appReducer = combineReducers({
+  router: routerReducer,
   auth: authReducer,
-  system: systemReducer,
-  dashboard: dashboardReducer,
   live: liveReducer,
-  upload: uploadReducer,
   queue: queueReducer,
-  router: routerReducer,
-  module: moduleReducer,
+  system: systemReducer,
+  upload: uploadReducer,
+  browser: browserReducer,
+  dashboard: dashboardReducer,
   audioPlayer: audioPlayerReducer,
+  module: moduleReducer,
 })
 
 export const history = createHistory()
-- 
cgit v1.2.3-70-g09d2