abstract into citationList component

5 files changed, 143 insertions, 108 deletions

diff --git a/scraper/client/common/autocomplete.component.js b/scraper/client/common/autocomplete.component.js
index e6c638eb..67dc78c9 100644
--- a/scraper/client/common/autocomplete.component.js
+++ b/scraper/client/common/autocomplete.component.js
@@ -91,14 +91,12 @@ class Autocomplete extends Component {
         e.preventDefault()
         this.handleCancel()
         break
-      case 37: // left
       case 38: // up
         e.preventDefault()
         this.setState({
           selected: (this.state.matches.length + this.state.selected - 1) % this.state.matches.length
         })
         return false
-      case 39: // right
       case 40: // down
         e.preventDefault()
         this.setState({
@@ -111,7 +109,12 @@ class Autocomplete extends Component {
         this.handleSelect(name, true)
         return false
       case 9: // tab - keep the unverified text
-        this.handleSelect(this.state.q, false)
+        name = this.state.matches[this.state.selected]
+        if (name === this.state.q) {
+          this.handleSelect(this.state.q, true)
+        } else {
+          this.handleSelect(this.state.q, false)
+        }
         return false
       default:
         break
@@ -132,7 +135,6 @@ class Autocomplete extends Component {
       return
     }
     let seen = {}
-    let matches = []
     value.split(' ').forEach(word => {
       const re = new RegExp(word)
       this.index.forEach(([synonym, term]) => {
@@ -150,14 +152,14 @@ class Autocomplete extends Component {
           }
         }
       })
-      matches = Object.keys(seen)
-        .map(term => [seen[term], term])
-        .sort((a, b) => {
-          return b[0] - a[0]
-        })
-        .slice(0, 100)
-        .map(pair => pair[1])
     })
+    let matches = Object.keys(seen)
+      .map(term => [seen[term], term])
+      .sort((a, b) => {
+        return b[0] - a[0]
+      })
+      .slice(0, 100)
+      .map(pair => pair[1])
     this.setState({
       q,
       selected: 0,
diff --git a/scraper/client/paper/citationList.component.js b/scraper/client/paper/citationList.component.js
new file mode 100644
index 00000000..435dfde2
--- /dev/null
+++ b/scraper/client/paper/citationList.component.js
@@ -0,0 +1,96 @@
+import React, { Component } from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
+
+import * as actions from '../actions'
+
+import { TableObject, Loader } from '../common'
+import { USES_DATASET } from '../types'
+
+class CitationList extends Component {
+  render() {
+    const { citations, title, api } = this.props
+    const { paperInfo, unknownCitations, verifications } = api
+    const { dataset } = paperInfo
+    if (!dataset || !citations || !verifications[dataset.key]) return <Loader />
+    let verifiedLookup = verifications[dataset.key] || {}
+    // console.log(verifications)
+
+    return (
+      <div className='citations'>
+        <h2>{title}</h2>
+        <ul>
+        {citations
+        .map(citation => [citation.title, verifiedLookup[citation.id] ? verifiedLookup[citation.id].uses_dataset : USES_DATASET.UNKNOWN, citation])
+        .sort((a,b) => (b[1] - a[1] || (a[0].localeCompare(b[0]))))
+        .map((pair, i) => {
+          const [ title, uses_dataset, citation ] = pair
+          let cite = { ...citation }
+          cite.id = {
+            _raw: true,
+            value: <Link to={'/paper/' + dataset.key + '/verify/' + citation.id}>{citation.id}</Link>
+          }
+          cite.pdf = {
+            _raw: true,
+            value: (cite.pdf && cite.pdf.length)
+            ? cite.pdf.map((pdf, i) => <a key={'pdf_' + i} href={pdf} rel='noopener noreferrer' target="_blank">[pdf]</a>)
+            : "no pdf"
+          }
+          cite.s2 = {
+            _raw: true,
+            value: <a
+              href={'https://www.semanticscholar.org/paper/' + citation.id}
+              target="_blank"
+              rel="noopener noreferrer"
+              className={'pdfLink'}
+            >{'[semantic scholar]'}</a>
+          }
+          cite.addresses = {
+            _raw: true,
+            value: (cite.addresses || []).map((address, j) => (
+              <div key={j}>{address.name}{', '}<span className='type'>{address.type}</span></div>
+            ))
+          }
+          if (citation.id in verifiedLookup) {
+            const verification = verifiedLookup[citation.id]
+            cite.verified = {
+              _raw: true,
+              value: verification.uses_dataset === USES_DATASET.YES
+                ? <span className='verified'>uses dataset</span>
+                : verification.uses_dataset === USES_DATASET.NO
+                  ? <span className='unverified'>{"doesn't use dataset"}</span>
+                  : <span className='not_enough_info'>{"not enough information"}</span>
+            }
+          }
+          else {
+            cite.verified = {
+              _raw: true,
+              value: <span className='unknown'>unknown</span>
+            }
+          }
+          return (
+            <li key={i}>
+              <TableObject
+                summary
+                object={cite}
+                tag={cite.title}
+                order={['id', 'pdf', 's2', 'year', 'addresses', 'verified']}
+              />
+            </li>
+          )
+        })}
+        </ul>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  api: state.api
+})
+const mapDispatchToProps = dispatch => ({
+  actions: bindActionCreators({ ...actions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(CitationList)
diff --git a/scraper/client/paper/paper.citations.js b/scraper/client/paper/paper.citations.js
index c55599e0..f0e9ea26 100644
--- a/scraper/client/paper/paper.citations.js
+++ b/scraper/client/paper/paper.citations.js
@@ -5,9 +5,11 @@ import { Link } from 'react-router-dom'
 
 import * as actions from '../actions'
 
-import { TableObject, Loader } from '../common'
+import { Loader } from '../common'
 import { USES_DATASET } from '../types'
 
+import CitationList from './citationList.component'
+
 class PaperCitations extends Component {
   componentDidUpdate(prevProps) {
     if (this.props.api.paperInfo.dataset !== prevProps.api.paperInfo.dataset) {
@@ -19,74 +21,12 @@ class PaperCitations extends Component {
     const { paperInfo, unknownCitations, verifications } = this.props.api
     const { dataset, citations } = paperInfo
     if (!dataset || !citations || !verifications[dataset.key]) return <Loader />
-    let verifiedLookup = verifications[dataset.key] || {}
-    // console.log(verifications)
 
     return (
-      <div className='citations'>
-        <h2>{dataset.name_full}: Citations</h2>
-        <ul>
-        {citations.concat(unknownCitations.citations)
-        .map(citation => [citation.title, verifiedLookup[citation.id] ? verifiedLookup[citation.id].uses_dataset : USES_DATASET.UNKNOWN, citation])
-        .sort((a,b) => (b[1] - a[1] || (a[0].localeCompare(b[0]))))
-        .map((pair, i) => {
-          const [ title, uses_dataset, citation ] = pair
-          let cite = { ...citation }
-          cite.id = {
-            _raw: true,
-            value: <Link to={'/paper/' + dataset.key + '/verify/' + citation.id}>{citation.id}</Link>
-          }
-          cite.pdf = {
-            _raw: true,
-            value: (cite.pdf && cite.pdf.length)
-            ? cite.pdf.map((pdf, i) => <a key={'pdf_' + i} href={pdf} rel='noopener noreferrer' target="_blank">[pdf]</a>)
-            : "no pdf"
-          }
-          cite.s2 = {
-            _raw: true,
-            value: <a
-              href={'https://www.semanticscholar.org/paper/' + citation.id}
-              target="_blank"
-              rel="noopener noreferrer"
-              className={'pdfLink'}
-            >{'[semantic scholar]'}</a>
-          }
-          cite.addresses = {
-            _raw: true,
-            value: (cite.addresses || []).map((address, j) => (
-              <div key={j}>{address.name}{', '}<span className='type'>{address.type}</span></div>
-            ))
-          }
-          if (citation.id in verifiedLookup) {
-            const verification = verifiedLookup[citation.id]
-            cite.verified = {
-              _raw: true,
-              value: verification.uses_dataset === USES_DATASET.YES
-                ? <span className='verified'>uses dataset</span>
-                : verification.uses_dataset === USES_DATASET.NO
-                  ? <span className='unverified'>{"doesn't use dataset"}</span>
-                  : <span className='unknown'>{"not enough information"}</span>
-            }
-          }
-          else {
-            cite.verified = {
-              _raw: true,
-              value: <span className='unknown'>unknown</span>
-            }
-          }
-          return (
-            <li key={i}>
-              <TableObject
-                summary
-                object={cite}
-                tag={cite.title}
-                order={['id', 'pdf', 's2', 'year', 'addresses', 'verified']}
-              />
-            </li>
-          )
-        })}
-        </ul>
-      </div>
+      <CitationList
+        title={dataset.name_full + ': Citations'}
+        citations={citations.concat(unknownCitations.citations)}
+      />
     )
   }
 }
diff --git a/scraper/client/paper/paper.css b/scraper/client/paper/paper.css
index 025d6b8a..302eceb0 100644
--- a/scraper/client/paper/paper.css
+++ b/scraper/client/paper/paper.css
@@ -61,6 +61,15 @@
   padding:4px;
   font-size:12px;
 }
+.not_enough_info {
+  font-weight: bold;
+  color: white;
+  font-weight: bold;
+  display: inline-block;
+  background: #e0c200;
+  padding:4px;
+  font-size:12px;
+}
 .unknown {
   font-weight: bold;
   color: white;
diff --git a/scraper/client/paper/paper.unknown.js b/scraper/client/paper/paper.unknown.js
index 7f1e053a..876ac144 100644
--- a/scraper/client/paper/paper.unknown.js
+++ b/scraper/client/paper/paper.unknown.js
@@ -5,40 +5,28 @@ import { Link } from 'react-router-dom'
 
 import * as actions from '../actions'
 
-import { TableObject } from '../common'
+import { Loader } from '../common'
+import { USES_DATASET } from '../types'
+
+import CitationList from './citationList.component'
 
 class PaperUnknown extends Component {
+  componentDidUpdate(prevProps) {
+    if (this.props.api.paperInfo.dataset !== prevProps.api.paperInfo.dataset) {
+      this.props.actions.getVerificationsDataset(this.props.api.paperInfo.dataset.key)
+    }
+  }
+
   render() {
-    const { dataset } = this.props.api.paperInfo
-    const { citations } = this.props.api.unknownCitations
-    if (!dataset || !citations) return null
-    console.log('rendering unknown citations...')
+    const { paperInfo, unknownCitations, verifications } = this.props.api
+    const { dataset, citations } = paperInfo
+    if (!dataset || !citations || !verifications[dataset.key]) return <Loader />
+
     return (
-      <div className='citations'>
-        <h2>{dataset.name_full}: Unknown Citations</h2>
-        <ul>
-        {citations.map((citation, i) => {
-          let cite = { ...citation }
-          cite.id = {
-            _raw: true,
-            value: <Link to={'/paper/' + dataset.key + '/verify/' + citation.id}>{citation.id}</Link>
-          }
-          cite.pdf = {
-            _raw: true,
-            value: cite.pdf ? <a href={cite.pdf} rel='noopener noreferrer' target="_blank">[pdf]</a> : "no pdf"
-          }
-          return (
-            <li key={i}>
-              <TableObject
-                summary
-                object={cite}
-                tag={cite.title}
-              />
-            </li>
-          )
-        })}
-        </ul>
-      </div>
+      <CitationList
+        title={dataset.name_full + ': Unknown Citations'}
+        citations={unknownCitations.citations}
+      />
     )
   }
 }