1 files changed, 152 insertions, 0 deletions
diff --git a/app/client/dataset/dataset.component.js b/app/client/dataset/dataset.component.js
new file mode 100644
index 0000000..e6c1bfd
--- /dev/null
+++ b/app/client/dataset/dataset.component.js
@@ -0,0 +1,152 @@
+import { h, Component } from 'preact'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import { actions, parser } from '../api'
+
+import Group from '../common/group.component'
+import Param from '../common/param.component'
+import FileList from '../common/fileList.component'
+import FileUpload from '../common/fileUpload.component'
+import TextInput from '../common/textInput.component'
+
+class Dataset extends Component {
+  constructor(props){
+    super()
+    this.handleName = this.handleName.bind(this)
+    this.handleUpload = this.handleUpload.bind(this)
+    this.handleURL = this.handleURL.bind(this)
+    this.pickFile = this.pickFile.bind(this)
+  }
+  handleName(name) {
+    const { module, folder } = this.props
+    if (! folder.id) {
+      this.props.actions.folder.create({
+        // username... should get added inside the API
+        module: module.name,
+        datatype: module.datatype,
+        activity: 'dataset',
+        name
+      })
+    } else {
+      this.props.actions.folder.update({
+        id: folder.id,
+        module: module.name,
+        datatype: module.datatype,
+        activity: 'dataset',
+        name
+      })
+    }
+  }
+  handleUpload(file) {
+    const { module, folder } = this.props
+    const fd = new FormData()
+    fd.append('file', file)
+    this.props.actions.folder.upload(fd, {
+      id: folder.id,
+      module: module.name,
+      activity: 'file',
+      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)
+      this.props.actions.file.create({
+        folder_id: this.props.folder.id,
+        module: this.props.module.name,
+        activity: 'url',
+        duration: parseInt(media.duration) || 0,
+        epoch: 0,
+        processed: false,
+        generated: false,
+        opt: media,
+        url
+      })
+    })
+  }
+  pickFile(file){
+    console.log('pick', file)
+    this.props.onPick && this.props.onPick(file)
+  }
+  render(){
+    const {
+      loading, status, error,
+      module, title, folder, files,
+      canRename, canUpload, canAddURL, canDeleteFile,
+      linkFiles,
+      fileOptions, pickFile
+    } = this.props
+    // sort files??
+    return (
+      <div className='dataset'>
+        <div className='params row'>
+          <div className='column'>
+            <Group title={title || 'Dataset'}>
+              {canRename
+              ? this.renderFolderNameInput(folder.name)
+              : <Param title='Dataset name'>{folder.name}</Param>}
+              {folder.id && canUpload && this.renderUploadInput()}
+              {folder.id && canAddURL && this.renderURLInput()}
+            </Group>
+          </div>
+        </div>
+        <div className='params col'>
+          <div class='row heading'>
+            {files.length ? 
+              <h3>Files</h3> :
+              <h4>No files</h4>}
+            <div>{(loading || error) && status}</div>
+          </div>
+          <FileList
+            files={files}
+            options={fileOptions}
+            onClick={pickFile}
+            canDelete={canDeleteFile}
+            linkFiles={linkFiles}
+          />
+        </div>
+      </div>
+    )
+  }
+  renderFolderNameInput(name){
+    return <TextInput
+      title='Dataset name'
+      value={name}
+      onSave={this.handleName}
+    />
+  }
+  renderUploadInput(){
+    return <FileUpload
+      title='Upload a file'
+      mime='image.*'
+      onUpload={this.handleUpload}
+    />
+  }
+  renderURLInput(){
+    return <TextInput
+      title='Fetch a URL'
+      placeholder='http://'
+      onSave={this.handleURL}
+    />
+  }
+}
+
+const mapStateToProps = state => state.dataset
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  actions: {
+    folder: bindActionCreators(actions.folder, dispatch),
+    file: bindActionCreators(actions.file, dispatch),
+  }
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Dataset)