move views into own folder and begin prising away dataset code

1 files changed, 145 insertions, 0 deletions

diff --git a/app/client/modules/samplernn/views/samplernn.import.js b/app/client/modules/samplernn/views/samplernn.import.js
new file mode 100644
index 0000000..6f5f78a
--- /dev/null
+++ b/app/client/modules/samplernn/views/samplernn.import.js
@@ -0,0 +1,145 @@
+import { h, Component } from 'preact'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import * as util from '../../../util'
+
+import * as samplernnActions from '../samplernn.actions'
+
+import Select from '../../../common/select.component'
+import TextInput from '../../../common/textInput.component'
+import Button from '../../../common/button.component'
+
+import SampleRNNDatasets from '../samplernn.datasets'
+
+const samplernnModule = {
+  name: 'samplernn',
+  datatype: 'audio',
+}
+
+class SampleRNNImport extends Component {
+  constructor(){
+    super()
+    this.state = {
+      folder: 1,
+      import_action: 'Hotlink',
+      url_base: 'https://s3.amazonaws.com/i.asdf.us/bucky/data/4279/',
+      selected: {},
+    }
+  }
+  componentWillMount(){
+    const id = this.props.match.params.id || localStorage.getItem('samplernn.last_id')
+    console.log('load dataset:', id)
+    const { match, samplernn, samplernnActions } = this.props
+    if (id === 'new') return
+    if (id) {
+      if (parseInt(id)) localStorage.setItem('samplernn.last_id', id)
+      if (! samplernn.folder || samplernn.folder.id !== id) {
+        samplernnActions.load_directories(id)
+      }
+    }
+  }
+  render(){
+    let datasets = [], folder;
+    if (this.props.samplernn.data) {
+      datasets = (this.props.samplernn.data.folders || []).map(folder => {
+        return [folder.name, folder.id]
+      })
+      folder = this.props.samplernn.data.folderLookup.unsorted
+    }
+    return (
+      <div className='app top'>
+        <div class='heading'>
+          <h1>Import</h1>
+        </div>
+        <div class='params form row datasets'>
+          <div class='row dataset'>
+            <div class='col'>
+            </div>
+            <div class='col'>
+            </div>
+            <div class='col'>
+            </div>
+            <div class='col'>
+              <h2>Import to dataset</h2>
+              <Select
+                title='Destination dataset'
+                options={datasets}
+                name='folder'
+                opt={this.state}
+                onChange={(name, value) => this.setState({ folder: value })}
+              />
+              <Select
+                title='Import action'
+                options={['Hotlink', 'Upload']}
+                name='import_action'
+                opt={this.state}
+                onChange={(name, value) => this.setState({ import_action: value })}
+              />
+              <TextInput
+                title="Remote URL base"
+                value={this.state.url_base}
+                placeholder="http://"
+                onSave={(value) => this.setState({ url_base: value })}
+              />
+              <Button
+                title=""
+                onClick={() => this.doImport()}
+              >
+                Import
+              </Button>
+            </div>
+          </div>
+        </div>
+        <SampleRNNDatasets
+          id="unsorted"
+          folder={folder}
+          history={this.props.history}
+          onPickDataset={(dataset => this.toggle(dataset.name, this.state.selected[name]))}
+          beforeRow={dataset => this.beforeRow(dataset)}
+          afterRow={dataset => this.afterRow(dataset)}
+        />
+      </div>
+    )
+  }
+  toggle(name){
+    this.setState({
+      ...this.state,
+      selected: {
+        ...this.state.selected,
+        [name]: !this.state.selected[name],
+      }
+    })
+  }
+  beforeRow(dataset){
+    // console.log(dataset)
+  }
+  afterRow(dataset){
+    const name = dataset.name
+    return (
+      <div>
+        <input
+          type="checkbox"
+          value={name}
+          checked={!!this.state.selected[name]}
+        />
+      </div>
+    )
+  }
+  doImport(){
+    const { samplernn } = this.props
+    console.log(this.state)
+    this.props.actions.import_files(this.state, samplernn.data.datasetLookup, samplernn.data.fileLookup)
+  }
+}
+
+const mapStateToProps = state => ({
+  samplernn: state.module.samplernn,
+  runner: state.system.runner,
+  task: state.task,
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  actions: bindActionCreators(samplernnActions, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(SampleRNNImport)