split out datasets folder

5 files changed, 118 insertions, 319 deletions

diff --git a/app/client/modules/samplernn/datasets.component.js b/app/client/modules/samplernn/datasets.component.js
deleted file mode 100644
index f1e4d71..0000000
--- a/app/client/modules/samplernn/datasets.component.js
+++ /dev/null
@@ -1,197 +0,0 @@
-import { h, Component } from 'preact'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-
-import { actions, parser } from '../../api'
-import * as taskActions from '../../task/task.actions'
-import * as systemActions from '../../system/system.actions'
-  // folderActions.index({ module: 'samplernn' })
-  // folderActions.show(12)
-  // folderActions.create({ module: 'samplernn', name: 'foo' })
-  // folderActions.update(12, { module: 'pix2pix' })
-  // folderActions.destroy(12, { confirm: true })
-  // folderActions.upload(12, form_data)
-
-import Group from '../../common/group.component'
-import Slider from '../../common/slider.component'
-import Select from '../../common/select.component'
-import Button from '../../common/button.component'
-import FileList from '../../common/fileList.component'
-import FileUpload from '../../common/fileUpload.component'
-import TextInput from '../../common/textInput.component'
-
-class SampleRNNDatasets extends Component {
-  constructor(props){
-    super()
-    // fetch file list
-    this.handleName = this.handleName.bind(this)
-    this.handleUpload = this.handleUpload.bind(this)
-    this.handleURL = this.handleURL.bind(this)
-    this.fetchURL = this.fetchURL.bind(this)
-    this.fileOptions = this.fileOptions.bind(this)
-    this.pickFile = this.pickFile.bind(this)
-    props.actions.folder.index({ module: 'samplernn' })
-    props.actions.file.index({ module: 'samplernn' })
-  }
-  handleName(name) {
-    const folder = this.props.samplernn.folder
-    if (! folder.id) {
-      this.props.actions.folder.create({
-        //     username... should get added inside the API
-        module: 'samplernn',
-        activity: 'dataset',
-        datatype: 'audio',
-        name
-      })
-    } else {
-      this.props.actions.folder.update({
-        id: folder.id,
-        module: 'samplernn',
-        activity: 'dataset',
-        datatype: 'audio',
-        name
-      })
-    }
-  }
-  handleUpload(file) {
-    const folder = this.props.samplernn.folder
-    const fd = new FormData()
-    fd.append('file', file)
-    this.props.actions.folder.upload(fd, {
-      id: folder.id,
-      module: 'samplernn',
-      activity: 'url',
-      epoch: 0,
-      processed: false,
-      generated: false,
-    })
-  }
-  handleURL(url) {
-    // name url
-    // mime datatype
-    // duration analysis
-    // size activity
-    // opt created_at updated_at
-    parser.parse(url, media => {
-      if (!media) return
-      console.log('media', media)
-      const folder = this.props.samplernn.folder
-      this.props.actions.file.create({
-        folder_id: folder.id,
-        module: 'samplernn',
-        activity: 'url',
-        epoch: 0,
-        processed: false,
-        generated: false,
-        opt: media,
-        url
-      })
-    })
-  }
-  fetchURL(url) {
-    console.log(url)
-    this.props.actions.task.start_task({
-      activity: 'fetch',
-      module: 'samplernn',
-      dataset: 'test',
-      epochs: 1,
-      opt: { url }
-    }, { preempt: true, watch: true })
-  }
-  pickFile(file){
-    console.log('pick', file)
-  }
-  fileOptions(file){
-    console.log(file)
-    if (file.activity === 'url' && !file.dataset) {
-      if (this.props.runner.cpu.status !== 'IDLE') {
-        return (
-          <div className='gray'>
-            fetching...
-          </div>
-        )
-      } else {
-        return (
-          <div className='link' onClick={() => this.fetchURL(file.url)}>
-            fetch
-          </div>
-        )
-      }
-    }
-    return (
-      <div>
-        <div className='link' onClick={() => this.train(file)}>train</div>
-        {file.epoch == 0 && <div className='epochs'>{file.epochs} ep.</div>}
-      </div>
-    )
-  }
-  render(){
-    const { samplernn } = this.props
-    console.log(samplernn.upload)
-    // sort files??
-    return (
-      <div className='app'>
-        <div className='heading'>
-          <h3>SampleRNN</h3>
-        </div>
-        <div className='params row'>
-          <div className='column'>
-            <Group title='Dataset'>
-              <TextInput
-                title='Dataset name'
-                value={samplernn.folder.name}
-                onSave={this.handleName}
-              />
-              {samplernn.folder.id &&
-                <FileUpload
-                  title='Upload a file'
-                  mime='image.*'
-                  onUpload={this.handleUpload}
-                />
-              }
-              {samplernn.folder.id &&
-                <TextInput
-                  title='Fetch a URL'
-                  placeholder='http://'
-                  onSave={this.handleURL}
-                />
-              }
-            </Group>
-          </div>
-        </div>
-        <div className='params col'>
-          <div class='row heading'>
-            {samplernn.files.length ? 
-              <h3>Files</h3> :
-              <h4>No files</h4>}
-            <div>{samplernn.upload.loading && samplernn.upload.status}</div>
-          </div>
-          <FileList
-            files={samplernn.files}
-            options={this.fileOptions}
-            onClick={this.pickFile}
-            showDelete
-            linkFiles
-          />
-        </div>
-      </div>
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  samplernn: state.module.samplernn,
-  runner: state.system.runner,
-  task: state.task,
-})
-
-const mapDispatchToProps = (dispatch, ownProps) => ({
-  actions: {
-    folder: bindActionCreators(actions.folder, dispatch),
-    file: bindActionCreators(actions.file, dispatch),
-    task: bindActionCreators(taskActions, dispatch),
-    system: bindActionCreators(systemActions, dispatch),
-  }
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(SampleRNNDatasets)
diff --git a/app/client/modules/samplernn/index.js b/app/client/modules/samplernn/index.js
index e098c2e..afb5263 100644
--- a/app/client/modules/samplernn/index.js
+++ b/app/client/modules/samplernn/index.js
@@ -1,6 +1,6 @@
 import { h, Component } from 'preact'
 import { Route, Link } from 'react-router-dom'
-import SampleRNNDatasets from './datasets.component'
+import SampleRNNDatasets from './samplernn.datasets'
 
 function router () {
   return (
diff --git a/app/client/modules/samplernn/samplernn.actions.js b/app/client/modules/samplernn/samplernn.actions.js
index 1e0e3a6..aa9603b 100644
--- a/app/client/modules/samplernn/samplernn.actions.js
+++ b/app/client/modules/samplernn/samplernn.actions.js
@@ -1,18 +1,2 @@
 import socket from '../../socket'
 import types from '../../types'
-
-export const uploadFiles = (files) => {
-  return { type: types.samplernn.upload_files }
-}
-export const fetchURL = (url) => {
-  return { type: types.samplernn.fetch_url }
-}
-
-export const uploadFiles = (files) => {
-  return dispatch => {
-    // return { type: types.samplernn.upload_files }
-
-  }
-}
-
-// export const fetchURL = (url) => { type: types.samplernn.fetch_url }
diff --git a/app/client/modules/samplernn/samplernn.datasets.js b/app/client/modules/samplernn/samplernn.datasets.js
new file mode 100644
index 0000000..5f15dbc
--- /dev/null
+++ b/app/client/modules/samplernn/samplernn.datasets.js
@@ -0,0 +1,109 @@
+import { h, Component } from 'preact'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import { actions, parser } from '../../api'
+import * as taskActions from '../../task/task.actions'
+import * as systemActions from '../../system/system.actions'
+
+import Dataset from '../../dataset/dataset.component'
+
+import Group from '../../common/group.component'
+import Slider from '../../common/slider.component'
+import Select from '../../common/select.component'
+import Button from '../../common/button.component'
+import FileList from '../../common/fileList.component'
+import TextInput from '../../common/textInput.component'
+
+class SampleRNNDatasets extends Component {
+  constructor(props){
+    super()
+    // fetch file list
+    this.fileOptions = this.fileOptions.bind(this)
+    this.pickFile = this.pickFile.bind(this)
+    props.actions.folder.index({ module: 'samplernn' })
+    props.actions.file.index({ module: 'samplernn' })
+  }
+  pickFile(file){
+    console.log('pick', file)
+  }
+  fileOptions(file){
+    console.log(file)
+    if (file.activity === 'url' && !file.dataset) {
+      if (this.props.runner.cpu.status !== 'IDLE') {
+        return (
+          <div className='gray'>
+            fetching...
+          </div>
+        )
+      } else {
+        return (
+          <div className='link' onClick={() => this.fetchURL(file.url)}>
+            fetch
+          </div>
+        )
+      }
+    }
+    return (
+      <div>
+        <div className='link' onClick={() => this.train(file)}>train</div>
+        {file.epoch == 0 && <div className='epochs'>{file.epochs} ep.</div>}
+      </div>
+    )
+  }
+  fetchURL(url) {
+    console.log(url)
+    this.props.actions.task.start_task({
+      activity: 'fetch',
+      module: 'samplernn',
+      dataset: 'test',
+      epochs: 1,
+      opt: { url }
+    }, { preempt: true, watch: true })
+  }
+  render(){
+    const { samplernn } = this.props
+    console.log(samplernn.upload)
+    // sort files??
+    const module = {
+      name: 'samplernn',
+      datatype: 'audio',
+    }
+    return (
+      <div className='app'>
+        <div className='heading'>
+          <h3>SampleRNN</h3>
+        </div>
+        <Dataset
+          canRename
+          canUpload
+          canAddURL
+          canDeleteFile
+          linkFiles
+          fileOptions={this.fileOptions}
+          onPick={this.handlePick}
+          module={module}
+          folder={samplernn.input.folder}
+          files={samplernn.input.files}
+        />
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  samplernn: state.module.samplernn,
+  runner: state.system.runner,
+  task: state.task,
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  actions: {
+    folder: bindActionCreators(actions.folder, dispatch),
+    file: bindActionCreators(actions.file, dispatch),
+    task: bindActionCreators(taskActions, dispatch),
+    system: bindActionCreators(systemActions, dispatch),
+  }
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(SampleRNNDatasets)
diff --git a/app/client/modules/samplernn/samplernn.reducer.js b/app/client/modules/samplernn/samplernn.reducer.js
index efd31f5..b3b58c3 100644
--- a/app/client/modules/samplernn/samplernn.reducer.js
+++ b/app/client/modules/samplernn/samplernn.reducer.js
@@ -3,23 +3,22 @@ import types from '../../types'
 const samplernnInitialState = {
   loading: false,
   error: null,
-  folder: {},
   folders: [],
-  files: [],
+  datasets: [],
   results: [],
-  upload: {
-    loading: false,
-    status: '',
+  input: {
+    folder: {},
+    files: [],
+  },
+  output: {
+    folder: {},
+    files: [],
   },
 }
 
 const samplernnReducer = (state = samplernnInitialState, action) => {
   console.log(action)
   switch(action.type) {
-    case types.socket.connect:
-      return {
-        ...state,
-      }
     case types.task.task_begin:
       return {
         ...state,
@@ -29,102 +28,6 @@ const samplernnReducer = (state = samplernnInitialState, action) => {
         ...state,
       }
 
-    case types.folder.index:
-      return {
-        ...state,
-        folders: action.data,
-        folder: action.data[0],
-      }
-    case types.folder.update:
-      return state
-    case types.file.index:
-      return {
-        ...state,
-        files: action.data
-      }
-
-    case types.folder.upload_loading:
-      return {
-        ...state,
-        upload: {
-          loading: true,
-          status: 'Loading...',
-        },
-      }
-    case types.folder.upload_error:
-      return {
-        ...state,
-        upload: {
-          loading: false,
-          status: 'Error uploading :(',
-        },
-      }
-    case types.folder.upload_progress:
-      console.log(action)
-      return {
-        ...state,
-        upload: {
-          loading: true,
-          status: 'Upload progress ' + action.percent + '%',
-        },
-      }
-    case types.folder.upload_waiting:
-      console.log(action)
-      return {
-        ...state,
-        upload: {
-          loading: true,
-          status: 'Waiting for server to finish processing...',
-        },
-      }
-    case types.file.create_loading:
-      return {
-        ...state,
-        upload: {
-          loading: true,
-          status: 'Creating file...'
-        }
-      }
-    case types.file.create:
-    console.log('booo')
-      if (state.folder.id === action.data.folder_id) {
-        return {
-          ...state,
-          files: [action.data].concat(state.files),
-          upload: {
-            loading: false,
-            status: 'File created',
-          },
-        }
-      } else {
-        return {
-          ...state,
-          upload: {
-            loading: false,
-            status: 'created',
-          },
-        }
-      }
-    case types.folder.upload_complete:
-      console.log(action)
-      if (state.folder.id === action.folder) {
-        return {
-          ...state,
-          files: [action.files].concat(state.files),
-          upload: {
-            loading: false,
-            status: 'Upload complete',
-          },
-        }
-      } else {
-        return {
-          ...state,
-          upload: {
-            loading: false,
-            status: 'Upload complete',
-          },
-        }
-      }
     case types.socket.status:
       return samplernnSocket(state, action.data)
     default: