folder list on new dataset page

1 files changed, 44 insertions, 0 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>
+  )
+}