adding chart... whole verify app working nicer

1 files changed, 13 insertions, 20 deletions

diff --git a/scraper/client/paper/citationList.component.js b/scraper/client/paper/citationList.component.js
index be8528bf..002c0dcb 100644
--- a/scraper/client/paper/citationList.component.js
+++ b/scraper/client/paper/citationList.component.js
@@ -9,38 +9,31 @@ import { TableObject, Loader } from '../common'
 import { USES_DATASET } from '../types'
 
 class CitationList extends Component {
-  componentDidMount() {
-    const { citations, api } = this.props
-    const { paperInfo, unknownCitations, verifications } = api
-    const { dataset } = paperInfo
-    if (!dataset || !citations || !verifications[dataset.key]) {
-      this.props.actions.setSortedCitations([])
-      return
-    }
-    let verifiedLookup = verifications[dataset.key] || {}
-    const sortedCitations = citations.map(citation => [
-        citation.title,
-        verifiedLookup[citation.id] ? verifiedLookup[citation.id].uses_dataset : USES_DATASET.NO_DATA,
-        citation.pdf.length,
-        citation
-      ])
-      .sort((a,b) => (b[1] - a[1] || b[2] - a[2] || (a[0].localeCompare(b[0]))))
-      .map(tup => tup[3])
-    this.props.actions.setSortedCitations(sortedCitations)
+  state = {
+    filter: USES_DATASET.YES,
   }
 
   render() {
     const { citations, title, api } = this.props
     const { paperInfo, unknownCitations, verifications, sortedCitations } = api
     const { dataset } = paperInfo
+    const { filter } = this.state
     if (!dataset || !citations || !verifications[dataset.key]) return <Loader />
     let verifiedLookup = verifications[dataset.key] || {}
-    // console.log(verifications)
+    let filteredCitations = sortedCitations.filter(citation => (
+      citation.verified === filter
+    ))
     return (
       <div className='citations'>
         <h2>{title}</h2>
+        <div className='filter_buttons'>
+          <span className='verified' onClick={() => this.setState({ filter: USES_DATASET.YES })}>uses dataset</span>
+          <span className='unverified' onClick={() => this.setState({ filter: USES_DATASET.NO })}>{"doesn't use dataset"}</span>
+          <span className='not_enough_info' onClick={() => this.setState({ filter: USES_DATASET.UNKNOWN })}>{'not enough information'}</span>
+          <span className='unknown' onClick={() => this.setState({ filter: USES_DATASET.NO_DATA })}>{'unverified'}</span>
+        </div>
         <ul>
-        {(sortedCitations || []).map((citation, i) => {
+        {(filteredCitations || []).map((citation, i) => {
           let cite = { ...citation }
           cite.id = {
             _raw: true,