folder list on new dataset page

14 files changed, 122 insertions, 65 deletions

diff --git a/app/client/common/folderList.component.js b/app/client/common/folderList.component.js
new file mode 100644
index 0000000..13ef398
--- /dev/null
+++ b/app/client/common/folderList.component.js
@@ -0,0 +1,44 @@
+import { h, Component } from 'preact'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
+import util from '../util'
+
+import Group from './group.component'
+import Param from './param.component'
+import Loading from './loading.component'
+
+export default function FolderList ({ db, path, emptyText }) {
+  if (! db) return null
+  if (db.loading || !db.data) {
+    return (
+      <div class='col folderList'>
+        <Loading progress={db.progress} />
+      </div>
+    )
+  } else if (! db.data.folders.length && emptyText) {
+    return (
+      <div class='col folderList'>
+        {emptyText}
+      </div>
+    )
+  }
+  console.log(db.data.folders)
+  const folders = db.data.folders.map(folder => {
+    const datasetCount = folder.datasets ? folder.datasets.length : 0
+    const [ className, size ] = util.hush_null(datasetCount)
+    return (
+      <Param title={<Link to={path + folder.id + '/'}>{folder.name}</Link>}>
+        <span className={className}>{datasetCount} dataset{util.courtesy_s(datasetCount)}</span>
+      </Param>
+    )
+  })
+
+  return (
+    <div class='col folderList'>
+      <Group title='Projects'>
+        {folders}
+      </Group>
+    </div>
+  )
+}
diff --git a/app/client/common/index.js b/app/client/common/index.js
index de3e5b4..471bdd3 100644
--- a/app/client/common/index.js
+++ b/app/client/common/index.js
@@ -1,6 +1,7 @@
 import Button from './button.component'
 import { FileList, FileRow } from './fileList.component'
 import FileUpload from './fileUpload.component'
+import FolderList from './folderList.component'
 import Gallery from './gallery.component'
 import Group from './group.component'
 import Header from './header.component'
@@ -12,10 +13,12 @@ import Progress from './progress.component'
 import Select from './select.component'
 import Slider from './slider.component'
 import TextInput from './textInput.component'
+import * as Views from './views'
 
 export {
+  Views,
   Loading, Progress, Header,
-  FileList, FileRow, FileUpload,
+  FolderList, FileList, FileRow, FileUpload,
   Gallery, Player,
   Group, ParamGroup, Param,
   TextInput, Slider, Select, Button,
diff --git a/app/client/common/views/index.js b/app/client/common/views/index.js
new file mode 100644
index 0000000..e7f7386
--- /dev/null
+++ b/app/client/common/views/index.js
@@ -0,0 +1,3 @@
+import NewView from './new.view.js'
+
+export const New = NewView
diff --git a/app/client/common/views/new.view.js b/app/client/common/views/new.view.js
new file mode 100644
index 0000000..93ac3d5
--- /dev/null
+++ b/app/client/common/views/new.view.js
@@ -0,0 +1,35 @@
+import { h, Component } from 'preact'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
+import util from '../../util'
+
+import Group from '../group.component'
+import Param from '../param.component'
+import Loading from '../loading.component'
+import FolderList from '../folderList.component'
+
+import NewDatasetForm from '../../dataset/dataset.new'
+
+export default class NewView extends Component {
+  constructor(props){
+    super(props)
+    console.log(props)
+    if (! props.db.data) {
+      props.actions.load_directories()
+    }
+  }
+  render(){
+    const { module, history, db, path } = this.props
+    return (
+      <div class={'app ' + module.name}>
+        <h1>&nbsp;{module.displayName || module.name}</h1>
+        <br/>
+        <div class='col narrow'>
+          <NewDatasetForm module={module} history={history} />
+          <FolderList db={db} path={path} emptyText={<i>No projects yet. Please create one~</i>} />
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/app/client/dataset/dataset.new.js b/app/client/dataset/dataset.new.js
index a74e0bf..7aed579 100644
--- a/app/client/dataset/dataset.new.js
+++ b/app/client/dataset/dataset.new.js
@@ -14,12 +14,12 @@ function NewDatasetForm (props) {
   return (
     <div class='opaque'>
       <div class='heading'>
-        <h2>Create a new dataset</h2>
+        <h2>Create a new {module.name} project</h2>
       </div>
       <div class='params'>
         <TextInput
           autofocus
-          title={'Name your dataset'}
+          title={'Name your project'}
           onSave={(name) => {
             actions.createFolder(module, name)
             .then(folder => {
diff --git a/app/client/modules/pix2pix/index.js b/app/client/modules/pix2pix/index.js
index f3a4050..607292e 100644
--- a/app/client/modules/pix2pix/index.js
+++ b/app/client/modules/pix2pix/index.js
@@ -22,6 +22,7 @@ function router () {
 function links(){
   return (
     <span>
+      <span><Link to="/pix2pix/new/">new</Link></span>
       <span><Link to="/pix2pix/sequences/">sequences</Link></span>
       <span>train</span>
       <span>process</span>
diff --git a/app/client/modules/pix2pix/pix2pix.module.js b/app/client/modules/pix2pix/pix2pix.module.js
index 65e173a..ef831b5 100644
--- a/app/client/modules/pix2pix/pix2pix.module.js
+++ b/app/client/modules/pix2pix/pix2pix.module.js
@@ -1,5 +1,6 @@
 const pix2pixModule = {
   name: 'pix2pix',
+  displayName: 'Pix2Pix',
   datatype: 'video',
 }
 
diff --git a/app/client/modules/pix2pix/views/pix2pix.new.js b/app/client/modules/pix2pix/views/pix2pix.new.js
index f9f5db7..6699cf4 100644
--- a/app/client/modules/pix2pix/views/pix2pix.new.js
+++ b/app/client/modules/pix2pix/views/pix2pix.new.js
@@ -1,33 +1,24 @@
 import { h, Component } from 'preact'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
+import util from '../../../util'
 
-import NewDatasetForm from '../../../dataset/dataset.new'
+import { Views } from '../../../common'
 
 import * as pix2pixActions from '../pix2pix.actions'
 import pix2pixModule from '../pix2pix.module'
 
-class Pix2PixNew extends Component {
-  constructor(props){
-    super(props)
-    props.actions.load_directories()
-  }
-  render(){
-    const { pix2pix, history } = this.props
-    console.log(pix2pix)
-    let folders
-    if (pix2pix.data) {
-      pix2pix.data.folders.forEach(folder => {
-        console.log(folder)
-      })
-    }
-    return (
-      <div class='app pix2pix'>
-        <NewDatasetForm module={pix2pixModule} history={history} />
-        {folders}
-      </div>
-    )
-  }
+function Pix2PixNew(props){
+  return (
+    <Views.New
+      db={props.pix2pix}
+      path='/pix2pix/datasets/'
+      actions={props.actions}
+      module={pix2pixModule}
+      history={props.history}
+    />
+  )
 }
 
 const mapStateToProps = state => ({
@@ -39,3 +30,4 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(Pix2PixNew)
+
diff --git a/app/client/modules/pix2wav/index.js b/app/client/modules/pix2wav/index.js
index 3a23395..15496a2 100644
--- a/app/client/modules/pix2wav/index.js
+++ b/app/client/modules/pix2wav/index.js
@@ -21,6 +21,7 @@ function router () {
 function links(){
   return (
     <span>
+      <span><Link to="/pix2wav/new/">new</Link></span>
       <span><Link to="/pix2wav/datasets/">datasets</Link></span>
       <span>train</span>
       <span>process</span>
diff --git a/app/client/modules/pix2wav/pix2wav.module.js b/app/client/modules/pix2wav/pix2wav.module.js
index bca268f..44c6238 100644
--- a/app/client/modules/pix2wav/pix2wav.module.js
+++ b/app/client/modules/pix2wav/pix2wav.module.js
@@ -1,5 +1,6 @@
 const pix2wavModule = {
   name: 'pix2wav',
+  displayName: 'Pix2Wav',
   datatype: 'spectrogram',
 }
 
diff --git a/app/client/modules/samplernn/index.js b/app/client/modules/samplernn/index.js
index 98195df..55c492e 100644
--- a/app/client/modules/samplernn/index.js
+++ b/app/client/modules/samplernn/index.js
@@ -25,6 +25,7 @@ function router () {
 function links(){
   return (
     <span>
+      <span><Link to="/samplernn/new/">new</Link></span>
       <span><Link to="/samplernn/datasets/">datasets</Link></span>
       <span><Link to="/samplernn/graph/">graph</Link></span>
       <span><Link to="/samplernn/results/">results</Link></span>
diff --git a/app/client/modules/samplernn/samplernn.module.js b/app/client/modules/samplernn/samplernn.module.js
index 60411b4..6fb4f33 100644
--- a/app/client/modules/samplernn/samplernn.module.js
+++ b/app/client/modules/samplernn/samplernn.module.js
@@ -1,5 +1,6 @@
 const samplernnModule = {
   name: 'samplernn',
+  displayName: 'SampleRNN',
   datatype: 'audio',
 }
 
diff --git a/app/client/modules/samplernn/views/samplernn.import.js b/app/client/modules/samplernn/views/samplernn.import.js
index 61df4da..653d930 100644
--- a/app/client/modules/samplernn/views/samplernn.import.js
+++ b/app/client/modules/samplernn/views/samplernn.import.js
@@ -34,11 +34,12 @@ class SampleRNNImport extends Component {
     if (id) {
       if (parseInt(id)) localStorage.setItem('samplernn.last_id', id)
       if (! samplernn.folder || samplernn.folder.id !== id) {
-        samplernnActions.load_directories(id)
+        this.props.actions.load_directories(id)
       }
     }
   }
   render(){
+    const { samplernn } = this.props
     let datasets = [], folder;
     if (this.props.samplernn.data) {
       datasets = (this.props.samplernn.data.folders || []).map(folder => {
diff --git a/app/client/modules/samplernn/views/samplernn.new.js b/app/client/modules/samplernn/views/samplernn.new.js
index 821c1d8..b25eab0 100644
--- a/app/client/modules/samplernn/views/samplernn.new.js
+++ b/app/client/modules/samplernn/views/samplernn.new.js
@@ -4,49 +4,21 @@ import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 import util from '../../../util'
 
-import {
-  Group, Param
-} from '../../../common'
-
-import NewDatasetForm from '../../../dataset/dataset.new'
+import { Views } from '../../../common'
 
 import * as samplernnActions from '../samplernn.actions'
 import samplernnModule from '../samplernn.module'
 
-class SampleRNNNew extends Component {
-  constructor(props){
-    super(props)
-    props.actions.load_directories()
-  }
-  render(){
-    const { samplernn, history } = this.props
-    console.log(samplernn)
-    let folders
-    if (samplernn.data) {
-      folders = samplernn.data.folders.map(folder => {
-        console.log(folder)
-        const datasetCount = folder.datasets ? folder.datasets.length : 0
-        const [ className, size ] = util.hush_null(datasetCount)
-        return (
-          <Param title={<Link to={'/samplernn/datasets/' + folder.id + '/'}>{folder.name}</Link>}>
-            <span className={className}>{datasetCount} dataset{util.courtesy_s(datasetCount)}</span>
-          </Param>
-        )
-      })
-    }
-    return (
-      <div class='app samplernn'>
-        <div class='col narrow'>
-          <NewDatasetForm module={samplernnModule} history={history} />
-          {folders && <div class='col folderList'>
-            <Group title='Projects'>
-              {folders}
-            </Group>
-          </div>}
-        </div>
-      </div>
-    )
-  }
+function SampleRNNNew(props){
+  return (
+    <Views.New
+      db={props.samplernn}
+      path='/samplernn/datasets/'
+      actions={props.actions}
+      module={samplernnModule}
+      history={props.history}
+    />
+  )
 }
 
 const mapStateToProps = state => ({
@@ -58,3 +30,4 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(SampleRNNNew)
+