abstract this ugly datasets code!!

7 files changed, 157 insertions, 12 deletions

diff --git a/app/client/modules/samplernn/index.js b/app/client/modules/samplernn/index.js
index e75a411..49d66cd 100644
--- a/app/client/modules/samplernn/index.js
+++ b/app/client/modules/samplernn/index.js
@@ -1,6 +1,9 @@
 import { h, Component } from 'preact'
 import { Route, Link } from 'react-router-dom'
+import SampleRNNNew from './samplernn.new'
+import SampleRNNShow from './samplernn.show'
 import SampleRNNDatasets from './samplernn.datasets'
+import SampleRNNImport from './samplernn.import'
 import SampleRNNResults from './samplernn.results'
 import SampleRNNInspect from './samplernn.inspect'
 import SampleRNNLoss from './samplernn.loss'
@@ -8,10 +11,12 @@ import SampleRNNLoss from './samplernn.loss'
 function router () {
   return (
     <div>
+      <Route exact path='/samplernn/new/' component={SampleRNNNew} />
       <Route exact path='/samplernn/graph/' component={SampleRNNLoss} />
       <Route exact path='/samplernn/inspect/' component={SampleRNNInspect} />
+      <Route exact path='/samplernn/import/' component={SampleRNNImport} />
       <Route exact path='/samplernn/datasets/' component={SampleRNNDatasets} />
-      <Route exact path='/samplernn/datasets/:id/' component={SampleRNNDatasets} />
+      <Route exact path='/samplernn/datasets/:id/' component={SampleRNNShow} />
       <Route exact path='/samplernn/results/' component={SampleRNNResults} />
     </div>
   )
diff --git a/app/client/modules/samplernn/samplernn.datasets.js b/app/client/modules/samplernn/samplernn.datasets.js
index 2a8c224..d37102b 100644
--- a/app/client/modules/samplernn/samplernn.datasets.js
+++ b/app/client/modules/samplernn/samplernn.datasets.js
@@ -16,17 +16,22 @@ const samplernnModule = {
 
 class SampleRNNDatasets extends Component {
   constructor(props){
-    super()
+    super(props)
+    console.log('ba')
     this.fileOptions = this.fileOptions.bind(this)
     this.pickFile = this.pickFile.bind(this)
-    let id = props.match.params.id || localStorage.getItem('samplernn.last_id')
+  }
+  componentWillMount(){
+    const id = this.props.id || this.props.match.params.id || localStorage.getItem('samplernn.last_id')
+    console.log(id)
     console.log('load dataset:', id)
+    const { match, samplernn, actions } = this.props
     if (id === 'new') return
     if (id) {
       localStorage.setItem('samplernn.last_id', id)
-      if (! props.samplernn.folder || props.samplernn.folder.id !== id) {
+      if (! samplernn.folder || samplernn.folder.id !== id) {
         console.log('load directories')
-        props.actions.load_directories(id)
+        actions.load_directories(id)
       }
     }
   }
@@ -58,16 +63,22 @@ class SampleRNNDatasets extends Component {
   }
   render(){
     const { samplernn, match, history } = this.props
-    const folder = samplernn.folder
-    if (match.params.id === 'new') {
-      return <NewDatasetForm module={samplernnModule} history={history} />        
-    }
+    const id = this.props.id || localStorage.getItem('samplernn.last_id')
+    console.log(this.props.id)
+    if (this.props.id && this.props.id !== 'new') return null
     if (samplernn.loading) {
+      console.log('loading')
       return <span>Loading</span>
     }
-    if (!folder || !samplernn.data.folders.length) {
-      return history.push('/samplernn/datasets/new/')
+    if (!samplernn.folder || !samplernn.data.folders.length) {
+      console.log('no folders, redirect to /new')
+      return history.push('/samplernn/new/')
     }
+    console.log('render app')
+    const folder = samplernn.folder
+    console.log(folder)
+    if (!folder || !folder.name) return
+    console.log(folder.name)
     return (
       <div className='app'>
         <div class='heading'>
@@ -106,6 +117,7 @@ class SampleRNNDatasets extends Component {
       const dataset = pair[1]
       return (
         <div className='row dataset'>
+          {this.props.beforeRow && this.props.beforeRow(dataset)}
           <div className='col'>
             {!!dataset.input.length &&
               <FileList
@@ -113,6 +125,7 @@ class SampleRNNDatasets extends Component {
                 className='input_files'
                 fileListClassName=''
                 rowClassName='input_file'
+                options={this.fileOptions}
               />
             }
           </div>
diff --git a/app/client/modules/samplernn/samplernn.import.js b/app/client/modules/samplernn/samplernn.import.js
new file mode 100644
index 0000000..593c67d
--- /dev/null
+++ b/app/client/modules/samplernn/samplernn.import.js
@@ -0,0 +1,43 @@
+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 DatasetForm from '../../dataset/dataset.form'
+import NewDatasetForm from '../../dataset/dataset.new'
+import { FileList, FileRow } from '../../common/fileList.component'
+
+import SampleRNNDatasets from './samplernn.datasets'
+
+const samplernnModule = {
+  name: 'samplernn',
+  datatype: 'audio',
+}
+
+class SampleRNNImport extends Component {
+  render(){
+    return (
+      <SampleRNNDatasets
+        id="unsorted"
+        beforeRow={row => this.beforeRow(row)}
+      />
+    )
+  }
+  beforeRow(row){
+    console.log(row)
+  }
+}
+
+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)
diff --git a/app/client/modules/samplernn/samplernn.new.js b/app/client/modules/samplernn/samplernn.new.js
new file mode 100644
index 0000000..8d8b68c
--- /dev/null
+++ b/app/client/modules/samplernn/samplernn.new.js
@@ -0,0 +1,34 @@
+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 DatasetForm from '../../dataset/dataset.form'
+import NewDatasetForm from '../../dataset/dataset.new'
+import { FileList, FileRow } from '../../common/fileList.component'
+
+const samplernnModule = {
+  name: 'samplernn',
+  datatype: 'audio',
+}
+
+class SampleRNNNew extends Component {
+  constructor(props){
+    super(props)
+  }
+  render(){
+    const { history } = this.props
+    return <NewDatasetForm module={samplernnModule} history={history} />        
+  }
+}
+const mapStateToProps = state => ({
+  samplernn: state.module.samplernn,
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  actions: bindActionCreators(samplernnActions, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(SampleRNNNew)
diff --git a/app/client/modules/samplernn/samplernn.reducer.js b/app/client/modules/samplernn/samplernn.reducer.js
index 4084d48..d91d64d 100644
--- a/app/client/modules/samplernn/samplernn.reducer.js
+++ b/app/client/modules/samplernn/samplernn.reducer.js
@@ -33,6 +33,9 @@ const samplernnReducer = (state = samplernnInitialState, action) => {
         ...state,
       }
 
+    // so now the last thing is to figure out how to access things inside these datasets
+    // and rebuild them if need be, considering this is SUPER awkward inside of redux.
+    
     case types.folder.create:
       if (action.data.module === 'samplernn') {
         return {
diff --git a/app/client/modules/samplernn/samplernn.results.js b/app/client/modules/samplernn/samplernn.results.js
index b689106..13b7879 100644
--- a/app/client/modules/samplernn/samplernn.results.js
+++ b/app/client/modules/samplernn/samplernn.results.js
@@ -1,5 +1,6 @@
 import { h, Component } from 'preact'
 import { bindActionCreators } from 'redux'
+import { Link } from 'react-router-dom';
 import { connect } from 'react-redux'
 
 import * as util from '../../util'
@@ -58,9 +59,12 @@ class SampleRNNResults extends Component {
           return output.map(mapFn).sort(sortFn)[0][1]
         })
       // console.log(bestRenders.map(r => r.epoch))
+      const path = folder.name === 'unsorted'
+        ? "/samplernn/import/"
+        : "/samplernn/datasets/" + folder.id + "/"
       return (
         <div className='col'>
-          <h3>{folder.name}</h3>
+          <h3><Link to={path}>{folder.name}</Link></h3>
           <FileList
             files={bestRenders}
             orderBy='date desc'
@@ -76,6 +80,8 @@ class SampleRNNResults extends Component {
           <h2>SampleRNN</h2>
         </div>
         <div class='rows params renders'>
+          <Link to='/samplernn/new/'>new dataset</Link>
+          <br/><br/>
           {renders}
         </div>
       </div>
diff --git a/app/client/modules/samplernn/samplernn.show.js b/app/client/modules/samplernn/samplernn.show.js
new file mode 100644
index 0000000..a6018c5
--- /dev/null
+++ b/app/client/modules/samplernn/samplernn.show.js
@@ -0,0 +1,41 @@
+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 DatasetForm from '../../dataset/dataset.form'
+import NewDatasetForm from '../../dataset/dataset.new'
+import { FileList, FileRow } from '../../common/fileList.component'
+
+import SampleRNNDatasets from './samplernn.datasets'
+
+const samplernnModule = {
+  name: 'samplernn',
+  datatype: 'audio',
+}
+
+class SampleRNNShow extends Component {
+  constructor(){
+    super()
+    console.log('piss')
+  }
+  render(){
+    console.log('dick')
+    return (
+      <SampleRNNDatasets
+        id={this.props.match.params.id}
+      />
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  actions: bindActionCreators(samplernnActions, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(SampleRNNShow)