sortable dataset list

2 files changed, 92 insertions, 0 deletions

diff --git a/client/datasetList/datasetList.container.js b/client/datasetList/datasetList.container.js
new file mode 100644
index 00000000..615c6278
--- /dev/null
+++ b/client/datasetList/datasetList.container.js
@@ -0,0 +1,87 @@
+import React, { Component } from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { toArray } from '../util'
+
+// import DatasetListQuery from './datasetList.query'
+
+const parseTypes = {
+  string: s => s.toLowerCase(),
+  number: s => parseInt((s || '0').replace(',', '').trim()),
+}
+
+const sortTypes = {
+  string: (a,b) => a[0].localeCompare(b[0]),
+  number: (a,b) => a[0] - b[0],
+}
+
+const sortOptions = [
+  { field: 'title', title: 'Name', type: 'string' },
+  { field: 'year', title: 'Year', type: 'number' },
+  { field: 'purpose', title: 'Purpose', type: 'string' },
+  { field: 'images', title: 'Images', type: 'number', reversed: true },
+]
+
+class DatasetListContainer extends Component {
+  state = {
+    sort: sortOptions[0],
+    reversed: false,
+  }
+
+  constructor(){
+    super()
+    const parent = document.querySelector('.dataset-intro .dataset-list')
+    this.parent = parent
+    this.els = toArray(parent.children)
+  }
+
+  sortBy(order){
+    let { sort, reversed } = this.state
+    if (sort === order) reversed = !reversed
+    else reversed = !!order.reversed
+    const parseFn = parseTypes[order.type]
+    const sortFn = sortTypes[order.type]
+    let els = this.els
+      .map(el => [
+        parseFn(el.querySelector('.' + order.field).innerText),
+        el,
+      ])
+      .sort(sortFn)
+      .map(pair => pair[1])
+    if (reversed) els.reverse()
+    els.forEach(el => {
+      this.parent.removeChild(el)
+      this.parent.appendChild(el)
+      if (order.field !== 'title' && order.field !== sort.field) {
+        const viz = el.querySelector('.visible')
+        if (viz) {
+          viz.classList.remove('visible')
+        }
+      }
+      el.querySelector('.' + order.field).classList.add('visible')
+    })
+    this.setState({ sort: order, reversed })
+  }
+
+  render() {
+    const { payload } = this.props
+    // console.log(payload)
+    return (
+      <div className='dataset-list'>
+        <ul className='sort-options'>
+          {sortOptions.map(order =>
+            <li
+              key={order.field}
+              className={order.field === this.state.sort.field ? 'active' : ''}
+              onClick={() => this.sortBy(order)}>
+              {order.title}
+            </li>
+          )}
+        </ul>
+      </div>
+    )
+  }
+}
+
+
+export default DatasetListContainer
diff --git a/client/datasetList/index.js b/client/datasetList/index.js
new file mode 100644
index 00000000..5c32b960
--- /dev/null
+++ b/client/datasetList/index.js
@@ -0,0 +1,5 @@
+import Container from './datasetList.container'
+
+export {
+  Container,
+}