reload the whole page. easier

8 files changed, 120 insertions, 37 deletions

diff --git a/app/client/common/textInput.component.js b/app/client/common/textInput.component.js
index c514b78..1e2ca01 100644
--- a/app/client/common/textInput.component.js
+++ b/app/client/common/textInput.component.js
@@ -25,6 +25,7 @@ class TextInput extends Component {
             onInput={this.handleInput}
             onKeydown={this.handleKeydown}
             placeholder={this.props.placeholder}
+            autofocus={this.props.autofocus}
           />
         </label>
       </div>
diff --git a/app/client/dataset/dataset.actions.js b/app/client/dataset/dataset.actions.js
index 3fad75f..315f1de 100644
--- a/app/client/dataset/dataset.actions.js
+++ b/app/client/dataset/dataset.actions.js
@@ -4,27 +4,27 @@ import types from '../types'
 import actions from '../actions'
 import { parser } from '../api'
 
-export const createOrUpdateFolder = (module, folder, name) => dispatch => {
+export const createFolder = (module, name) => dispatch => {
+  return actions.folder.create({
+    // username... should get added inside the API
+    module: module.name,
+    datatype: module.datatype,
+    activity: 'dataset',
+    name
+  })
+}
+
+export const updateFolder = (module, folder, name) => dispatch => {
   if (! folder || ! folder.id) {
-    actions.folder.create({
-      // username... should get added inside the API
-      module: module.name,
-      datatype: module.datatype,
-      activity: 'dataset',
-      name
-    }).then(folder => {
-      // set current folder
-    })
-  }
-  else {
-    actions.folder.update({
-      id: folder.id,
-      module: module.name,
-      datatype: module.datatype,
-      activity: 'dataset',
-      name
-    })
+    return null
   }
+  return actions.folder.update({
+    id: folder.id,
+    module: module.name,
+    datatype: module.datatype,
+    activity: 'dataset',
+    name
+  })
 }
 
 export const uploadFile = (module, folder, file) => dispatch => {
diff --git a/app/client/dataset/dataset.form.js b/app/client/dataset/dataset.form.js
index dee0263..f9fc3d7 100644
--- a/app/client/dataset/dataset.form.js
+++ b/app/client/dataset/dataset.form.js
@@ -11,9 +11,6 @@ import FileUpload from '../common/fileUpload.component'
 import TextInput from '../common/textInput.component'
 
 class DatasetForm extends Component {
-  constructor(props){
-    super()
-  }
   render(){
     const {
       loading, status, error,
@@ -49,9 +46,9 @@ class DatasetForm extends Component {
   }
   renderFolderNameInput(name){
     return <TextInput
-      title={!this.props.folder.id ? 'Create a new dataset' : 'Dataset name'}
+      title={'Dataset name'}
       value={name}
-      onSave={this.curry(this.props.actions.dataset.createOrUpdateFolder)}
+      onSave={this.curry(this.props.actions.dataset.updateFolder)}
     />
   }
   renderUploadInput(){
diff --git a/app/client/dataset/dataset.new.js b/app/client/dataset/dataset.new.js
new file mode 100644
index 0000000..16ee8c1
--- /dev/null
+++ b/app/client/dataset/dataset.new.js
@@ -0,0 +1,43 @@
+import { h, Component } from 'preact'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import * as datasetActions from './dataset.actions'
+
+import TextInput from '../common/textInput.component'
+
+function NewDatasetForm (props) {
+  const { loading, status, error, history, actions, module } = props
+  if (loading) return <span>Loading...</span>
+    console.log(props)
+  return (
+    <div class='opaque'>
+      <div class='heading'>
+        <h2>Create a new dataset</h2>
+      </div>
+      <div class='params'>
+        <TextInput
+          autofocus
+          title={'Name your dataset'}
+          onSave={(name) => {
+            actions.createFolder(module, name)
+            .then(folder => {
+              window.location.href = '/samplernn/datasets/' + folder.id + '/'
+            })
+          }}
+        />
+      </div>
+    </div>
+  )
+}
+
+const mapStateToProps = state => {
+  console.log(state);
+  return state.dataset
+}
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  actions: bindActionCreators(datasetActions, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(NewDatasetForm)
diff --git a/app/client/modules/samplernn/index.js b/app/client/modules/samplernn/index.js
index e1c41d5..e75a411 100644
--- a/app/client/modules/samplernn/index.js
+++ b/app/client/modules/samplernn/index.js
@@ -12,7 +12,6 @@ function router () {
       <Route exact path='/samplernn/inspect/' component={SampleRNNInspect} />
       <Route exact path='/samplernn/datasets/' component={SampleRNNDatasets} />
       <Route exact path='/samplernn/datasets/:id/' component={SampleRNNDatasets} />
-      <Route exact path='/samplernn/datasets/new/' component={SampleRNNDatasets} />
       <Route exact path='/samplernn/results/' component={SampleRNNResults} />
     </div>
   )
diff --git a/app/client/modules/samplernn/samplernn.actions.js b/app/client/modules/samplernn/samplernn.actions.js
index 25c9699..70a8a30 100644
--- a/app/client/modules/samplernn/samplernn.actions.js
+++ b/app/client/modules/samplernn/samplernn.actions.js
@@ -44,7 +44,6 @@ export const load_directories = (id) => (dispatch) => {
       folder.datasets.push(dataset)
       return dataset
     }
-
     // take all of the folders and put them in a lookup
     const folderLookup = folders.reduce((folderLookup, folder) => {
       folderLookup[folder.id] = { id: folder.id, name: folder.name, folder, datasets: [] }
@@ -133,6 +132,7 @@ export const load_directories = (id) => (dispatch) => {
     })
     if (id) {
       let folder = id === 'unsorted' ? folderLookup.unsorted : folderLookup[id]
+      console.log(id)
       dispatch({
         type: types.samplernn.set_folder,
         folder: folder,
diff --git a/app/client/modules/samplernn/samplernn.datasets.js b/app/client/modules/samplernn/samplernn.datasets.js
index dafed79..52d4ebd 100644
--- a/app/client/modules/samplernn/samplernn.datasets.js
+++ b/app/client/modules/samplernn/samplernn.datasets.js
@@ -6,6 +6,7 @@ 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'
 
 class SampleRNNDatasets extends Component {
@@ -14,13 +15,14 @@ class SampleRNNDatasets extends Component {
     this.fileOptions = this.fileOptions.bind(this)
     this.pickFile = this.pickFile.bind(this)
     let id = props.match.params.id || localStorage.getItem('samplernn.last_id')
-    if (! id && props.location.pathname.match(/\/new\//)) {
-      id = 'new'
-    } else if (id) {
+    console.log('load dataset:', id)
+    if (id === 'new') return
+    if (id) {
       localStorage.setItem('samplernn.last_id', id)
-    }
-    if (id && (! props.samplernn.folder || props.samplernn.folder.id !== id)) {
-      props.actions.load_directories(id)
+      if (! props.samplernn.folder || props.samplernn.folder.id !== id) {
+        console.log('load directories')
+        props.actions.load_directories(id)
+      }
     }
   }
   pickFile(file){
@@ -50,16 +52,28 @@ class SampleRNNDatasets extends Component {
     )
   }
   render(){
-    const { samplernn } = this.props
+    const { samplernn, match, history } = this.props
     const folder = samplernn.folder
-    if (!folder || !folder.name) return
+    if (match.params.id === 'new') {
+      return <NewDatasetForm module={{name: 'samplernn', datatype: 'audio'}} history={history} />        
+    }
+    if (samplernn.loading) {
+      return <span>Loading</span>
+    }
+    if (!folder || !samplernn.data.folders.length) {
+      return history.push('/samplernn/datasets/new/')
+    }
     return (
       <div className='app'>
         <div class='heading'>
           <h1>{folder.name}</h1>
         </div>
         {folder.name !== 'unsorted' &&
-          <DatasetForm title='Add Files' folder={folder} canUpload canAddURL />
+          <DatasetForm
+            title='Add Files'
+            folder={folder}
+            canUpload canAddURL
+          />
         }
         {this.renderDataset()}
       </div>
diff --git a/app/client/modules/samplernn/samplernn.reducer.js b/app/client/modules/samplernn/samplernn.reducer.js
index 372b3bc..524d650 100644
--- a/app/client/modules/samplernn/samplernn.reducer.js
+++ b/app/client/modules/samplernn/samplernn.reducer.js
@@ -17,34 +17,63 @@ const samplernnReducer = (state = samplernnInitialState, action) => {
         loading: false,
         data: action.data,
       }
+
     case types.socket.connect:
       return {
         ...state,
       }
+
     case types.task.task_begin:
       return {
         ...state,
       }
+
     case types.task.task_finish:
       return {
         ...state,
       }
+
+    case types.folder.create:
+      if (action.data.module === 'samplernn') {
+        return {
+          ...state,
+          loading: false,
+          // folder: {
+          //   ...action.data,
+          //   input: [],
+          //   checkpoints: [],
+          //   output: [],
+          // }
+        }
+      }
+      return state
+
     case types.file.create:
       if (state.folder.id === action.data.folder_id) {
         return {
           ...state,
-          files: [action.data].concat(state.files),
+          loading: false,
+          folder: {
+            ...state.folder,
+            input: [action.data].concat(state.folder.input),
+          },
         }
       }
       return state
+
     case types.folder.upload_complete:
       if (state.folder.id === action.folder) {
         return {
           ...state,
-          files: [action.files].concat(state.files),
+          loading: false,
+          folder: {
+            ...state.folder,
+            input: [action.data].concat(state.folder.input),
+          },
         }
       }
       return state
+
     case types.socket.status:
       return samplernnSocket(state, action.data)