3 files changed, 64 insertions, 2 deletions

diff --git a/app/client/common/index.js b/app/client/common/index.js
index eeb8bfc..13b3189 100644
--- a/app/client/common/index.js
+++ b/app/client/common/index.js
@@ -17,6 +17,7 @@ import Select from './select.component'
 import SelectGroup from './selectGroup.component'
 import Slider from './slider.component'
 import TextInput from './textInput.component'
+import TaskList from './taskList.component'
 import * as Views from './views'
 
 export {
@@ -27,5 +28,5 @@ export {
   Group, ParamGroup, Param,
   TextInput, NumberInput,
   Slider, Select, SelectGroup, Button, Checkbox,
-  CurrentTask,
+  CurrentTask, TaskList,
 }
\ No newline at end of file
diff --git a/app/client/common/numberInput.component.js b/app/client/common/numberInput.component.js
index 43f9878..53fbf45 100644
--- a/app/client/common/numberInput.component.js
+++ b/app/client/common/numberInput.component.js
@@ -13,7 +13,7 @@ class NumberInput extends Component {
       changed: true,
     })
     this.props.onInput && this.props.onInput(e.target.value, e.target.name)
-    this.props.onChange && this.props.onInput(e.target.name, e.target.value)
+    this.props.onChange && this.props.onChange(e.target.name, e.target.value)
   }
   handleKeydown(e){
     if (e.keyCode === 13) {
diff --git a/app/client/common/taskList.component.js b/app/client/common/taskList.component.js
new file mode 100644
index 0000000..f6383e0
--- /dev/null
+++ b/app/client/common/taskList.component.js
@@ -0,0 +1,61 @@
+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 actions from '../actions'
+
+class TaskList extends Component {
+  constructor(props){
+    super()
+  }
+  render(){
+    const { title, tasks } = this.props
+    let time = 0
+    const { mapFn, sortFn } = util.sort.orderByFn(this.props.sort || 'date desc')
+    const taskList = tasks.map(mapFn).sort(sortFn).map(pair => {
+      const task = pair[1]
+      const { dataset } = task
+      let dataset_link;
+      if (task.folder_id) {
+        const href = '/' + task.module +
+                     '/' + (task.module === 'samplernn' ? 'datasets' : 'sequences') +
+                     '/' + task.folder_id + '/'
+        dataset_link = <Link to={href}>{dataset}</Link>
+      } else {
+        dataset_link = dataset
+      }
+      return (
+        <div class='row'>
+          <div class='activity'>{task.activity} {task.module}</div>
+          <div class='dataset'>{dataset_link}</div>
+          <div className={"age " + util.carbon_date(task.updated_at)}>{util.get_age(task.updated_at)}</div>
+          <div class='options'>
+            <span class='destroy' onClick={() => this.handleDestroy(task)}>x</span>
+          </div>
+        </div>
+      )
+    })
+    return (
+      <div class='tasklist rows'>
+        {taskList}
+      </div>
+    )
+  }
+  handleDestroy(task) {
+    const yes = confirm('Are you sure you want to delete this task?')
+    if (yes) {
+      actions.task.destroy(task)
+    }
+  }
+}
+
+const mapStateToProps = state => ({
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  // actions: bindActionCreators(liveActions, dispatch)
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(TaskList)