From 41247c08ea359d0a72a247992d2019ae2120536c Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Wed, 13 Feb 2019 22:56:35 +0100
Subject: interface working

---
 scraper/client/actions.js                       |  4 +-
 scraper/client/common/autocomplete.component.js | 11 ++--
 scraper/client/common/common.css                |  3 +-
 scraper/client/common/header.component.js       | 14 ++++-
 scraper/client/paper/paper.address.js           | 71 ++++++++++++++++++-------
 scraper/client/paper/paper.css                  | 16 ++++++
 scraper/client/store.js                         |  6 +++
 scraper/client/types.js                         |  2 +-
 scraper/s2-geocode-server.py                    | 26 ++++-----
 9 files changed, 110 insertions(+), 43 deletions(-)

(limited to 'scraper')

diff --git a/scraper/client/actions.js b/scraper/client/actions.js
index 2723deed..4e1fd620 100644
--- a/scraper/client/actions.js
+++ b/scraper/client/actions.js
@@ -3,7 +3,7 @@ import * as types from './types'
 
 export const api = (dispatch, method, tag, url, params) => {
   dispatch({ type: types.api.loading, tag })
-  get(url, params).then(data => {
+  method(url, params).then(data => {
     dispatch({ type: types.api.loaded, tag, data })
   }).catch(err => {
     dispatch({ type: types.api.error, tag, err })
@@ -18,7 +18,7 @@ export const getPapers = () => dispatch => {
   api(dispatch, get, 'papers', '/api/papers', {})
 }
 
-export const getPaperInfo = (key) => dispatch => {
+export const getPaperInfo = key => dispatch => {
   api(dispatch, get, 'paperInfo', '/reports/datasets/final/' + key + '.json', {})
   api(dispatch, get, 'unknownCitations', '/reports/datasets/unknown/' + key + '.json', {})
 }
diff --git a/scraper/client/common/autocomplete.component.js b/scraper/client/common/autocomplete.component.js
index 03039b1c..e2908cd1 100644
--- a/scraper/client/common/autocomplete.component.js
+++ b/scraper/client/common/autocomplete.component.js
@@ -70,9 +70,9 @@ class Autocomplete extends Component {
 
   componentDidUpdate(oldProps) {
     if (this.props.vetting !== oldProps.vetting) {
-      this.handleChange({ target: { value: this.props.vetting }})
+      this.handleChange({ target: { value: this.props.vetting } })
     } else if (this.props.value !== oldProps.value) {
-      this.handleChange({ target: { value: this.props.value }})
+      this.setState({ q: '' })
     }
   }
 
@@ -155,13 +155,14 @@ class Autocomplete extends Component {
   }
 
   handleSelect(name) {
+    console.log('select', name)
     if (this.props.onSelect) this.props.onSelect(name)
-    this.setState({ q: "", selected: 0, matches: [] })
+    this.setState({ q: name, selected: 0, matches: [] })
   }
 
   handleCancel() {
     if (this.props.onCancel) this.props.onCancel()
-    this.setState({ q: "", selected: 0, matches: [] })
+    this.setState({ q: '', selected: 0, matches: [] })
   }
 
   render() {
@@ -184,7 +185,7 @@ class Autocomplete extends Component {
         <input
           type="text"
           name="q"
-          value={this.state.q}
+          value={this.state.q || this.props.value}
           onKeyDown={this.handleKeyDown}
           onChange={this.handleChange}
           autoFocus={this.props.autoFocus}
diff --git a/scraper/client/common/common.css b/scraper/client/common/common.css
index fb31aefb..7fdaf01c 100644
--- a/scraper/client/common/common.css
+++ b/scraper/client/common/common.css
@@ -63,12 +63,13 @@ header > section {
   justify-content: flex-start;
   align-items: center;
   display: flex;
-  flex: 1 0;
+  flex: 2 0;
   font-weight: bold;
   padding: 10px;
 }
 header > section:last-of-type {
   justify-content: flex-end;
+  flex: 1 0;
 }
 
 /* sidebar / body columns */
diff --git a/scraper/client/common/header.component.js b/scraper/client/common/header.component.js
index 0cd67c76..4da5af8a 100644
--- a/scraper/client/common/header.component.js
+++ b/scraper/client/common/header.component.js
@@ -21,16 +21,26 @@ class Header extends Component {
 
   render() {
     let { papers } = this.props.api.papers
+    let { dataset } = this.props.api.paperInfo
     papers = papers || {}
     const paperOptions = Object.keys(papers).map(key => (
-      <option key={key} value={key}>{papers[key][1]}</option>
+      <option key={key} value={key}>{papers[key].name}</option>
     ))
     return (
       <header>
         <section>
-          <select onChange={this.pickPaper.bind(this)}>
+          <select value={dataset && dataset.key} onChange={this.pickPaper.bind(this)}>
             {paperOptions}
           </select>
+          {dataset && 
+            <div>
+              {dataset.name_full}{' - '}
+              <a href={"/paper/" + dataset.key + "/info"}>Info</a>{' - '}
+              <a href={"/paper/" + dataset.key + "/citations/"}>Citations</a>{' - '}
+              <a href={"/paper/" + dataset.key + "/unknown/"}>Unknown</a>{' - '}
+              <a href={"/paper/" + dataset.key + "/random/"}>Random</a>
+            </div>
+          }
         </section>
         <section></section>
       </header>
diff --git a/scraper/client/paper/paper.address.js b/scraper/client/paper/paper.address.js
index ff2bf032..09b20758 100644
--- a/scraper/client/paper/paper.address.js
+++ b/scraper/client/paper/paper.address.js
@@ -4,6 +4,8 @@ import { connect } from 'react-redux'
 
 import * as actions from '../actions'
 
+import { history } from '../store'
+
 import { Loader, Autocomplete } from '../common'
 
 const initialState = {
@@ -16,6 +18,7 @@ const initialState = {
   institution_2_vetting: '',
   institution_3_vetting: '',
   institution_4_vetting: '',
+  notes: '',
 }
 class PaperAddress extends Component {
   state = {
@@ -25,8 +28,9 @@ class PaperAddress extends Component {
   componentDidMount() {
     const { sha256 } = this.props.match.params
     this.props.actions.getAddress(sha256)
-    const citation = this.getCitation(sha256)
-    this.setState({ citation })
+    const citationState = this.getCitationState(sha256)
+    console.log('DID MOUNT')
+    this.setState(citationState)
   }
 
   componentDidUpdate(oldProps) {
@@ -40,23 +44,25 @@ class PaperAddress extends Component {
     if (oldSha256 && sha256 !== oldSha256) {
       console.log('update address')
       this.props.actions.getAddress(sha256)
-      const citation = this.getCitation(sha256)
+      const citationState = this.getCitationState(sha256)
       this.setState({
         ...initialState,
-        citation
+        ...citationState,
       })
     } else if (address && !address.loading && address.paper && (!oldPaper || oldPaper !== address.paper)) {
       if (paper.error) {
-        const citation = this.getCitation(sha256)
+        console.log('USING PAPER ADDRESS')
+        const citationState = this.getCitationState(sha256)
         this.setState({
           ...initialState,
-          citation,
+          ...citationState,
         })
       } else {
         // console.log(paper)
-        const citation = this.getCitation(sha256)
+        console.log('GOT CUSTOM ADDRESS')
+        const citationState = this.getCitationState(sha256)
         this.setState({
-          citation,
+          ...citationState,
           institution_1: paper.institution_1,
           institution_2: paper.institution_2,
           institution_3: paper.institution_3,
@@ -68,24 +74,31 @@ class PaperAddress extends Component {
         })
       }
     } else if (oldProps.api.unknownCitations !== this.props.api.unknownCitations) {
-      const citation = this.getCitation(sha256)
-      this.setState({ citation })
+      const citationState = this.getCitationState(sha256)
+      this.setState(citationState)
     }
   }
 
-  getCitation(sha256) {
+  getCitationState(sha256) {
     const { paperInfo, unknownCitations } = this.props.api
     let citation = (unknownCitations.citations || []).find(f => f.id === sha256)
     if (!citation) {
       citation = (paperInfo.citations || []).find(f => f.id === sha256)
     }
     // console.log(sha256, citation)
-    return citation
+    let state = { citation }
+    let addresses = citation ? citation.addresses : []
+    if (addresses) {
+      addresses.forEach((address, i) => {
+        state['institution_' + (i + 1)] = address.address
+      })
+    }
+    return state
   }
 
   save() {
     console.log(this.state)
-    this.actions.postAddress({
+    this.props.actions.postAddress({
       paper_id: this.state.citation.id,
       title: this.state.citation.title,
       institution_1: this.state.institution_1,
@@ -96,7 +109,9 @@ class PaperAddress extends Component {
       institution_2_vetting: this.state.institution_2_vetting,
       institution_3_vetting: this.state.institution_3_vetting,
       institution_4_vetting: this.state.institution_4_vetting,
+      notes: this.state.notes,
     })
+    history.push('/paper/' + this.props.api.paperInfo.dataset.key + '/random/')
   }
 
   render() {
@@ -118,6 +133,7 @@ class PaperAddress extends Component {
             autoFocus
             className='vetting'
             type='text'
+            value={this.state.institution_1_vetting}
             placeholder='Paste Institution #1'
             onChange={e => this.setState({
               institution_1_vetting: e.target.value,
@@ -127,7 +143,6 @@ class PaperAddress extends Component {
             autoFocus={false}
             placeholder='Institution #1'
             value={this.state.institution_1}
-            vetting={this.state.institution_1_vetting}
             onSelect={value => {
               this.setState({ institution_1: value })
               // this.institution_2._el.focus()
@@ -141,6 +156,7 @@ class PaperAddress extends Component {
             className='vetting'
             type='text'
             placeholder='Paste Institution #2'
+            value={this.state.institution_2_vetting}
             onChange={e => this.setState({
               institution_2_vetting: e.target.value,
             })}
@@ -160,6 +176,7 @@ class PaperAddress extends Component {
             className='vetting'
             type='text'
             placeholder='Paste Institution #3'
+            value={this.state.institution_3_vetting}
             onChange={e => this.setState({
               institution_3_vetting: e.target.value,
             })}
@@ -180,6 +197,7 @@ class PaperAddress extends Component {
             className='vetting'
             type='text'
             placeholder='Paste Institution #4'
+            value={this.state.institution_4_vetting}
             onChange={e => this.setState({
               institution_4_vetting: e.target.value,
             })}
@@ -195,12 +213,25 @@ class PaperAddress extends Component {
           />
         </div>
 
-        <button
-          className='btn btn-primary'
-          onClick={this.save.bind(this)}
-          ref={ref => this.button = ref}
-        >Save Institutions</button>
-        <iframe className='pdfViewer' src={citation.pdf} />
+        <div className='param'>
+          <input
+            type='text'
+            className='notes'
+            value={this.state.notes}
+            placeholder='Notes'
+            onChange={e => this.setState({ notes: e.target.value })}
+          />
+        </div>
+
+        <div className='param'>
+          <button
+            className='btn btn-primary'
+            onClick={this.save.bind(this)}
+            ref={ref => this.button = ref}
+          >Save Institutions</button>
+        </div>
+
+         <iframe className='pdfViewer' src={citation.pdf} />
       </div>
     )
   }
diff --git a/scraper/client/paper/paper.css b/scraper/client/paper/paper.css
index c10d21df..430face4 100644
--- a/scraper/client/paper/paper.css
+++ b/scraper/client/paper/paper.css
@@ -29,6 +29,10 @@
   justify-content: flex-start;
   align-items: flex-start;
 }
+input.notes { width: 400px; }
+.param .btn {
+  margin-top: 5px;
+}
 .vetting {
   width: 250px;
   margin-right: 10px;
@@ -39,4 +43,16 @@ iframe.pdfViewer {
   width: 100%;
   height: 75vh;
   border: 1px solid black;
+}
+header select {
+  margin-right: 10px;
+  width: 100px;
+}
+header a {
+  color: white;
+  text-decoration: none;
+  font-weight: normal;
+}
+.desktop header a:hover {
+  text-decoration: underline;
 }
\ No newline at end of file
diff --git a/scraper/client/store.js b/scraper/client/store.js
index 3bf64114..8649d472 100644
--- a/scraper/client/store.js
+++ b/scraper/client/store.js
@@ -37,6 +37,12 @@ export default function apiReducer(state = initialState(), action) {
         [action.tag]: { error: action.err },
       }
 
+    case types.api.set_paper_key:
+      return {
+        ...state,
+        paperKey: action.paperKey
+      }
+
     default:
       return state
   }
diff --git a/scraper/client/types.js b/scraper/client/types.js
index 8507d556..53c0cff0 100644
--- a/scraper/client/types.js
+++ b/scraper/client/types.js
@@ -7,7 +7,7 @@ export const tagAsType = (type, names) => (
 )
 
 export const api = tagAsType('api', [
-  'loading', 'loaded', 'error',
+  'loading', 'loaded', 'error', 'set_paper_key',
 ])
 
 export const init = '@@INIT'
diff --git a/scraper/s2-geocode-server.py b/scraper/s2-geocode-server.py
index beac75e3..edf768aa 100644
--- a/scraper/s2-geocode-server.py
+++ b/scraper/s2-geocode-server.py
@@ -69,19 +69,21 @@ def find_address(sha256):
 
 @app.route('/api/address/add', methods=['POST'])
 def add_address():
+  form = request.get_json()
+  print(form)
   # id, title, institution_1, institution_2, institution_3, institution_4, notes
-  locations_worksheet.insert_row([
-    request.form['paper_id'],
-    request.form['title'],
-    request.form['institution_1'],
-    request.form['institution_1_vetting'],
-    request.form['institution_2'],
-    request.form['institution_2_vetting'],
-    request.form['institution_3'],
-    request.form['institution_3_vetting'],
-    request.form['institution_4'],
-    request.form['institution_4_vetting'],
-    request.form['notes'],
+  locations_worksheet.append_row([
+    form['paper_id'],
+    form['title'],
+    form['institution_1'],
+    form['institution_1_vetting'],
+    form['institution_2'],
+    form['institution_2_vetting'],
+    form['institution_3'],
+    form['institution_3_vetting'],
+    form['institution_4'],
+    form['institution_4_vetting'],
+    form['notes'],
   ])
   return jsonify({
     'status': 'ok'
-- 
cgit v1.2.3-70-g09d2