From 21d179c762d87e0790206fe59b08ffd49bb4a53b Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Wed, 13 Feb 2019 21:21:20 +0100
Subject: autocompleting

---
 scraper/client/paper/paper.address.js | 110 ++++++++++++++++++++++++++++++----
 scraper/client/paper/paper.css        |  15 ++++-
 2 files changed, 112 insertions(+), 13 deletions(-)

(limited to 'scraper/client/paper')

diff --git a/scraper/client/paper/paper.address.js b/scraper/client/paper/paper.address.js
index 6d02c3db..0da353c9 100644
--- a/scraper/client/paper/paper.address.js
+++ b/scraper/client/paper/paper.address.js
@@ -49,7 +49,7 @@ class PaperAddress extends Component {
           citation,
         })
       } else {
-        console.log(paper)
+        // console.log(paper)
         const citation = this.getCitation(sha256)
         this.setState({
           citation,
@@ -71,29 +71,115 @@ class PaperAddress extends Component {
     if (!citation) {
       citation = (paperInfo.citations || []).find(f => f.id === sha256)
     }
-    console.log(sha256, citation)
+    // console.log(sha256, citation)
     return citation
   }
 
+  save() {
+    console.log(this.state)
+  }
+
   render() {
-    // if (!this.props.match.params.key) return null
-    // if (this.props.api.address.loading) return <Loader />
-    // if (!this.props.api.paperInfo.dataset) return <div className='paperInfo'>Metadata not found</div>
-    let { paperInfo, unknownCitations } = this.props.api
-    if (paperInfo.loading || unknownCitations.loading) return <Loader />
+    let { institutions, paperInfo, unknownCitations } = this.props.api
+    if (institutions.loading || paperInfo.loading || unknownCitations.loading) return <Loader />
     console.log(this.state)
+    console.log(institutions)
     const { citation } = this.state
     if (!citation) {
       return <div>Citation not found in this paper</div>
-    }
+    }console.log(this)
     return (
       <div className='form'>
         <h3>{citation.title}</h3>
         <div className='gray'>{citation.id}</div>
-        {this.state.institution_1}
-        {/*
-          <iframe className='pdfViewer' src={citation.pdf} />
-        */}
+
+        <div className='param'>
+          <input
+            className='vetting'
+            type='text'
+            placeholder='Paste Institution #1'
+            onChange={e => this.setState({
+              institution_1_vetting: e.target.value,
+            })}
+          />
+          <Autocomplete
+            autoFocus
+            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()
+            }}
+            ref={ref => this.institution_1 = ref}
+          />
+        </div>
+
+        <div className='param'>
+          <input
+            className='vetting'
+            type='text'
+            placeholder='Paste Institution #2'
+            onChange={e => this.setState({
+              institution_2_vetting: e.target.value,
+            })}
+          />
+          <Autocomplete
+            placeholder='Institution #2'
+            value={this.state.institution_2}
+            onSelect={value => {
+              this.setState({ institution_2: value })
+            }}
+            ref={ref => this.institution_2 = ref}
+          />
+        </div>
+
+        <div className='param'>
+          <input
+            className='vetting'
+            type='text'
+            placeholder='Paste Institution #3'
+            onChange={e => this.setState({
+              institution_3_vetting: e.target.value,
+            })}
+          />
+          <Autocomplete
+            placeholder='Institution #3'
+            value={this.state.institution_3}
+            onSelect={value => {
+              this.setState({ institution_3: value })
+              // this.institution_4._el.focus()
+            }}
+            ref={ref => this.institution_3 = ref}
+          />
+        </div>
+
+        <div className='param'>
+          <input
+            className='vetting'
+            type='text'
+            placeholder='Paste Institution #4'
+            onChange={e => this.setState({
+              institution_4_vetting: e.target.value,
+            })}
+          />
+          <Autocomplete
+            placeholder='Institution #4'
+            value={this.state.institution_4}
+            onSelect={value => {
+              this.setState({ institution_4: value })
+              this.button.focus()
+            }}
+            ref={ref => this.institution_4 = ref}
+          />
+        </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>
     )
   }
diff --git a/scraper/client/paper/paper.css b/scraper/client/paper/paper.css
index 0977dcb3..c10d21df 100644
--- a/scraper/client/paper/paper.css
+++ b/scraper/client/paper/paper.css
@@ -18,12 +18,25 @@
 .type {
   color: #888;
 }
+
 .gray {
   padding: 3px;
 }
+
+.param {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.vetting {
+  width: 250px;
+  margin-right: 10px;
+}
+
 iframe.pdfViewer {
   margin: 10px 0;
   width: 100%;
-  height: 50vh;
+  height: 75vh;
   border: 1px solid black;
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2