blob: ff215efaba427018ee762b5a0729186631f71db0 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
import * as React from 'react';
import { observer } from 'mobx-react';
import { observable, action, runInAction } from 'mobx';
import { Utils } from '../../Utils';
import { MessageStore } from '../../server/Message';
import { Server } from '../Server';
import "./SearchBox.scss";
import { faSearch } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
// const app = express();
// import * as express from 'express';
import { Search } from '../../server/Search';
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);
@observer
export class SearchBox extends React.Component {
@observable
searchString: string = "";
@observable private _open: boolean = false;
@observable private _resultsOpen: boolean = false;
@observable
private _results: Document[] = [];
@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', {
qs: {
query
}
});
let results = JSON.parse(response);
//gets json result into a list of documents that can be used
this.getResults(results);
runInAction(() => { this._resultsOpen = true; });
}
@action
getResults = async (res: string[]) => {
res.map(async result => {
const doc = await Server.GetField(result);
if (doc instanceof Document) {
runInAction(() => this._results.push(doc));
}
});
}
@action
handleClick = (e: Event): void => {
var className = (e.target as any).className;
var id = (e.target as any).id;
if (className !== "filter-button" && className !== "filter-form") {
this._open = false;
}
}
componentWillMount() {
document.addEventListener('mousedown', this.handleClick, false);
}
componentWillUnmount() {
document.removeEventListener('mousedown', this.handleClick, false);
}
@action
toggleDisplay = () => {
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} 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>
<div className="filter-form" id="option">
filter by collection, key, type of node
</div>
</div>
</div>
);
}
}
|
