From 93d2214b84eaef61c9a9f980d24b5c1addbd67dc Mon Sep 17 00:00:00 2001
From: Monika Hedman <monika_hedman@brown.edu>
Date: Tue, 7 May 2019 16:26:51 -0400
Subject: things working

---
 src/client/views/SearchBox.scss |  6 ++++++
 src/client/views/SearchBox.tsx  | 46 ++++++++++++-----------------------------
 src/client/views/SearchItem.tsx |  2 +-
 3 files changed, 20 insertions(+), 34 deletions(-)

(limited to 'src')

diff --git a/src/client/views/SearchBox.scss b/src/client/views/SearchBox.scss
index 1aad13b2e..f4fc0029e 100644
--- a/src/client/views/SearchBox.scss
+++ b/src/client/views/SearchBox.scss
@@ -64,6 +64,12 @@
     height: 20px;
 }
 
+.results {
+    top: 300px;
+    display: flex;
+    flex-direction: column;
+}
+
 .search-item {
     width: 500px;
     height: 50px;
diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
index 0760578a8..ff215efab 100644
--- a/src/client/views/SearchBox.tsx
+++ b/src/client/views/SearchBox.tsx
@@ -15,6 +15,7 @@ import * as rp from 'request-promise';
 import { Document } from '../../fields/Document';
 import { SearchItem } from './SearchItem';
 import { isString } from 'util';
+import { constant } from 'async';
 
 
 library.add(faSearch);
@@ -30,40 +31,15 @@ export class SearchBox extends React.Component {
     @observable
     private _results: Document[] = [];
 
-    // constructor(props: any) {
-    //     super(props);
-    //     let searchInput = document.getElementById("input");
-    //     if (searchInput) {
-    //         // searchInput.addEventListener("keydown", this.onKeyPress)
-    //     }
-    // }
-
-    // //this is not working?????
-    // @action
-    // onKeyPress = (e: KeyboardEvent) => {
-    //     console.log('things happening')
-    //     //Number 13 is the "Enter" key on the keyboard
-    //     if (e.keyCode === 13) {
-    //         console.log("happi")
-    //         // Cancel the default action, if needed
-    //         e.preventDefault();
-    //         // Trigger the button element with a click
-    //         let btn = document.getElementById("submit");
-    //         if (btn) {
-    //             console.log("yesyesyes")
-    //             btn.click();
-    //         }
-    //     }
-    // }
-
     @action.bound
     onChange(e: React.ChangeEvent<HTMLInputElement>) {
         this.searchString = e.target.value;
+        console.log(this.searchString)
     }
 
     @action
     submitSearch = async () => {
-
+        runInAction(() => this._results = []);
         let query = this.searchString;
 
         let response = await rp.get('http://localhost:1050/search', {
@@ -112,19 +88,23 @@ export class SearchBox extends React.Component {
         this._open = !this._open;
     }
 
+    enter = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === "Enter") {
+            this.submitSearch();
+        }
+    }
+
     render() {
         return (
             <div id="outer">
                 <div className="searchBox" id="outer">
-                    {/* <input value={this.searchString} onChange={this.onChange} />
-                <button onClick={this.submitSearch} /> */}
 
-                    <input value={this.searchString} onChange={this.onChange} type="text" placeholder="Search.." className="search" id="input" />
-                    <div style={this._resultsOpen ? { display: "flex" } : { display: "none" }}>
-                        {this._results.map(result => <SearchItem doc={result} key={result.Id} />)}
-                    </div>
+                    <input value={this.searchString} onChange={this.onChange} type="text" placeholder="Search.." className="search" id="input" onKeyPress={this.enter} />
                     <button className="filter-button" onClick={this.toggleDisplay}> Filter </button>
                     <div className="submit-search" id="submit" onClick={this.submitSearch}><FontAwesomeIcon style={{ height: "100%" }} icon="search" size="lg" /></div>
+                    <div className="results" style={this._resultsOpen ? { display: "flex" } : { display: "none" }}>
+                        {this._results.map(result => <SearchItem doc={result} key={result.Id} />)}
+                    </div>
                 </div>
                 <div className="filter-form" id="filter" style={this._open ? { display: "flex" } : { display: "none" }}>
                     <div className="filter-form" id="header">Filter Search Results</div>
diff --git a/src/client/views/SearchItem.tsx b/src/client/views/SearchItem.tsx
index c8fd6457b..6021c0736 100644
--- a/src/client/views/SearchItem.tsx
+++ b/src/client/views/SearchItem.tsx
@@ -21,7 +21,7 @@ export interface SearchProps {
 export class SearchItem extends React.Component<SearchProps> {
 
     onClick = () => {
-        console.log("clicked search item");
+        console.log("document clicked: ", this.props.doc);
     }
 
     render() {
-- 
cgit v1.2.3-70-g09d2