1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
import { h, Component } from 'preact'
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 {
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
const { loading, dir, module, files } = this.state
console.log(this.props, this.state)
return (
<div className='app browser'>
<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>
)
}
}
const mapStateToProps = state => ({
app: state.system.app,
})
const mapDispatchToProps = (dispatch, ownProps) => ({
actions: bindActionCreators({}, dispatch),
})
export default connect(mapStateToProps, mapDispatchToProps)(Browser)
|
