1 files changed, 82 insertions, 0 deletions
diff --git a/client/table/file.table.js b/client/table/file.table.js
new file mode 100644
index 00000000..db53243a
--- /dev/null
+++ b/client/table/file.table.js
@@ -0,0 +1,82 @@
+import React, { Component } from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { ReactTabulator } from 'react-tabulator'
+
+import { toArray, toTuples, domainFromUrl } from '../util'
+import { Loader } from '../common'
+
+import csv from 'parse-csv'
+
+class FileTable extends Component {
+  state = {
+    keys: [],
+    data: [],
+    columns: [],
+  }
+  
+  componentDidMount() {
+    const { payload } = this.props
+    console.log(payload.url)
+    fetch(payload.url, { mode: 'cors' })
+      .then(r => r.text())
+      .then(text => {
+        try {
+          const keys = text.split('\n')[0].split(',').map(s => s.trim().replace(/\"/,''))
+          const data = csv.toJSON(text, { headers: { included: true } })
+          // console.log(data)
+          const columns = this.getColumns(keys, data, payload.fields)
+          this.setState({ keys, data, columns })
+        } catch (e) {
+          console.error("error making json:", payload.url)
+          console.error(e)
+        }
+      })
+  }
+
+  getColumns(keys, data, fields) {
+    let titles = fields.length ? fields[0].split(', ') : keys
+    let numberFields = []
+    let columns = keys.map((field, i) => {
+      const title = titles[i] || field
+      if (field.match('url')) {
+        let textField = field.replace('url', 'label')
+        data.forEach(el => el[textField] = domainFromUrl(el[field]))
+        return {
+          title,
+          field: textField,
+          formatter: 'link',
+          formatterParams: { target: "_blank", urlField: field, },
+          sorter: 'string'
+        }
+      }
+      switch (field) {
+        case 'images':
+        case 'year':
+          return { title, field: field.toLowerCase(), sorter: 'number' }
+        default:
+          return { title, field: field.toLowerCase(), sorter: 'string' }
+      }
+    })
+    return columns
+  }
+
+  render() {
+    const { payload } = this.props
+    if (!this.state.data.length) {
+      return <Loader />
+    }
+    return (
+      <ReactTabulator
+        columns={this.state.columns}
+        data={this.state.data}
+        options={{
+          height: Math.min(37 * this.state.data.length + 29, 311),
+          layout: 'fitColumns',
+          placeholder: 'No Data Set',
+        }}
+      />
+    )
+  }
+}
+export default FileTable