-
Notifications
You must be signed in to change notification settings - Fork 12
Expand file tree
/
Copy pathSearchInputBox.jsx
More file actions
163 lines (141 loc) · 5.56 KB
/
SearchInputBox.jsx
File metadata and controls
163 lines (141 loc) · 5.56 KB
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
import React from 'react';
import ReactDOM from 'react-dom';
import './SearchInputBox.scss';
import {
InstantSearch,
SearchBox,
Hits,
Configure,
Pagination,
} from 'react-instantsearch-dom';
import { SearchHits } from './SearchHits';
import TypesenseInstantsearchAdapter from "typesense-instantsearch-adapter";
const ClickOutHandler = require('react-onclickout');
// Create the Typesense InstantSearch Adapter instance
// @ts-ignore
// console.log(process.env.TYPESENSE_SEARCH_API_KEY);
// console.log(process.env.TYPESENSE_HOST);
const typesenseInstantsearchAdapter = new TypesenseInstantsearchAdapter({
server: {
apiKey: process.env.TYPESENSE_SEARCH_API_KEY, // Use your Typesense search-only API key here
nodes: [
{
host: process.env.TYPESENSE_HOST,
port: process.env.TYPESENSE_PORT,
protocol: process.env.TYPESENSE_PROTOCOL,
}
],
},
collectionSpecificSearchParameters: {
tutorials: {
query_by: "title,search_keyword,excerpt",
}
}
});
export const searchClient = typesenseInstantsearchAdapter.searchClient;
const debounce = (func, delay) => {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
};
class SearchInputBox extends React.Component {
constructor(props) {
super(props);
this.state = {
beta: '',
cookie: '',
hasInput: false,
refresh: false,
searchQuery: ''
};
this.debouncedSearch = debounce(this.handleSearch, 500);
}
onClickOut = (event) => {
const searchInput = document.getElementsByClassName(
'ais-SearchBox-input',
)[0].value;
const domNode = ReactDOM.findDOMNode(this);
if (searchInput === '' || !domNode || !domNode.contains(event.target))
this.setState({ hasInput: false });
}
handleKeyUp = (event) => {
const query = event.currentTarget.value;
this.setState({
hasInput: query.length > 2,
});
if (this.state.searchQuery !== query) {
this.setState({ searchQuery: '' }, () => {
this.debouncedSearch(query);
});
}
}
handleSearch = (query) => {
console.log('Searching for:', query);
this.setState({
refresh: !this.state.refresh,
searchQuery: query
});
}
render() {
const {
refresh, hasInput, searchQuery
} = this.state;
return (
<>
<div className={!hasInput ? 'form-inline flex w-1/5 items-center pl-4' : 'form-inline flex w-1/5 items-center pl-4 float-searchBox'}>
<label htmlFor="search-lc" />
<ClickOutHandler onClickOut={this.onClickOut}>
<InstantSearch
searchClient={searchClient}
indexName={process.env.TYPESENSE_COLLECTION}
refresh={refresh}
>
<Configure hitsPerPage={10} />
{/* forcefeed className because component does not accept natively as prop */}
<div className="search-icon">
<svg
width="15"
height="15"
viewBox="0 0 20 20"
fill="#6b6b6b"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M8 16C9.77498 15.9996 11.4988 15.4054 12.897 14.312L17.293 18.708L18.707 17.294L14.311 12.898C15.405 11.4997 15.9996 9.77544 16 8C16 3.589 12.411 0 8 0C3.589 0 0 3.589 0 8C0 12.411 3.589 16 8 16ZM8 2C11.309 2 14 4.691 14 8C14 11.309 11.309 14 8 14C4.691 14 2 11.309 2 8C2 4.691 4.691 2 8 2Z" fill="black"/>
</svg>
</div>
<SearchBox
className="w-full pl-2 mt-15"
id="search-lc"
submit={<></>}
reset={<></>}
translations={{
placeholder: 'Search',
}}
onKeyUp={this.handleKeyUp}
/>
<div className={!hasInput ? 'input-empty' : '-mt-1.5 absolute background-white bg-white search_results border h-full top-20 w-2/8'}>
<div className="container">
<div className="row">
<div className="col-12">
{searchQuery && <SearchHits hitComponent={Hits} />}
</div>
</div>
<div className="row">
<div className="col-12">
{searchQuery && <Pagination />}
</div>
</div>
</div>
</div>
</InstantSearch>
</ClickOutHandler>
</div>
</>
);
}
}
export default SearchInputBox;