From 0bede27de3bcc0c7f03d16c7607a0ae693daebc7 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Mon, 1 Apr 2019 10:23:29 +0200
Subject: citations table in react

---
 client/table/citations.table.js | 53 ++++++++++++++++++++++++++++++++++++
 client/table/file.table.js      | 59 +++++++++++++++++++++++++++++++++++++++++
 client/table/index.js           | 10 +++++++
 3 files changed, 122 insertions(+)
 create mode 100644 client/table/citations.table.js
 create mode 100644 client/table/file.table.js
 create mode 100644 client/table/index.js

(limited to 'client/table')

diff --git a/client/table/citations.table.js b/client/table/citations.table.js
new file mode 100644
index 00000000..1ec2d10c
--- /dev/null
+++ b/client/table/citations.table.js
@@ -0,0 +1,53 @@
+import React, { Component } from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { ReactTabulator } from 'react-tabulator'
+import { Loader } from '../common'
+import { toArray, toTuples } from '../util'
+
+export const citationsColumns = [
+  { title: 'Title', field: 'title', sorter: 'string' },
+  { title: 'Institution', field: 'institution', sorter: 'string' },
+  { title: 'Country', field: 'country', sorter: 'string', width: 140 },
+  { title: 'Year', field: 'year', sorter: 'number', width: 70 },
+  { title: 'PDF', field: 'pdf_text', formatter: 'link',
+    formatterParams: { target: "_blank", urlField: 'pdf_link', },
+    sorter: 'string', width: 100 },
+]
+
+class CitationsTable extends Component {
+  render() {
+    const { payload } = this.props
+    const { paper, citations } = payload.data
+    console.log(this.props)
+    if (!citations.length) return <Loader />
+
+    const formattedCitations = citations.map(citation => ({
+      title: citation.title,
+      institution: citation.addresses[0].name,
+      country: citation.addresses[0].country,
+      year: citation.year,
+      pdf: (citation.pdf && citation.pdf.length)
+        ? citation.pdf[0]
+        : (citation.doi && citation.doi.length)
+          ? citation.doi[0]
+          : "",
+    }))
+
+    console.log(formattedCitations)
+
+    return (
+      <ReactTabulator
+        columns={citationsColumns}
+        data={formattedCitations}
+        options={{
+          height: 311,
+          layout: 'fitColumns',
+          placeholder: 'No Data Set',
+        }}
+      />
+    )
+  }
+}
+
+export default CitationsTable
diff --git a/client/table/file.table.js b/client/table/file.table.js
new file mode 100644
index 00000000..a7e25bbf
--- /dev/null
+++ b/client/table/file.table.js
@@ -0,0 +1,59 @@
+import React, { Component } from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { toArray, toTuples } from '../util'
+
+import { Loader } from '../common'
+
+import csv from 'parse-csv'
+
+class FileTable extends Component {
+  state = {
+    data: []
+  }
+  
+  componentDidMount() {
+    fetch(payload.url, { mode: 'cors' })
+      .then(r => r.text())
+      .then(text => {
+        try {
+          const data = csv.toJSON(text, { headers: { included: true } })
+          this.setState({ data })
+        } catch (e) {
+          console.error("error making json:", payload.url)
+          console.error(e)
+        }
+      })
+  }
+
+  getColumns(payload) {
+    let { cmd, url, fields } = payload
+    return ((fields && fields.length) ? fields[0] : '').split(', ').map(field => {
+      switch (field) {
+        default:
+          return { title: field, field: field.toLowerCase(), sorter: 'string' }
+      }
+    })
+  }
+
+  render() {
+    const { payload } = this.props
+    const { paper, citations } = payload.data
+    const columns = getColumns(payload)
+    if (!this.state.data.length) {
+      return <Loader />
+    }
+    return (
+      <ReactTabulator
+        columns={citationsColumns}
+        data={this.state.data}
+        options={{
+          height: 311,
+          layout: 'fitColumns',
+          placeholder: 'No Data Set',
+        }}
+      />
+    )
+  }
+}
+export default FileTable
diff --git a/client/table/index.js b/client/table/index.js
new file mode 100644
index 00000000..43db7dbb
--- /dev/null
+++ b/client/table/index.js
@@ -0,0 +1,10 @@
+import 'react-tabulator/lib/styles.css'
+import 'react-tabulator/lib/css/tabulator.min.css'
+
+import CitationsTable from './citations.table'
+import FileTable from './file.table'
+
+export {
+  CitationsTable,
+  FileTable,
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2