This repository has been archived by the owner on Dec 30, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 391
/
App.js
100 lines (88 loc) · 2.49 KB
/
App.js
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
import qs from 'qs';
import React, { Component, Fragment } from 'react';
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch, SearchBox, Configure } from 'react-instantsearch-dom';
import {
GoogleMapsLoader,
GeoSearch,
Control,
Marker,
} from 'react-instantsearch-dom-maps';
const searchClient = algoliasearch(
'latency',
'6be0576ff61c053d5f9a3225e2a90f76',
{
_useRequestCache: true,
}
);
const updateAfter = 700;
const searchStateToUrl = searchState =>
searchState ? `${window.location.pathname}?${qs.stringify(searchState)}` : '';
class App extends Component {
constructor() {
super();
this.state = {
searchState: qs.parse(window.location.search.slice(1)),
};
window.addEventListener('popstate', ({ state: searchState }) => {
this.setState({ searchState });
});
}
onSearchStateChange = searchState => {
// update the URL when there is a new search state.
clearTimeout(this.debouncedSetState);
this.debouncedSetState = setTimeout(() => {
window.history.pushState(
searchState,
null,
searchStateToUrl(searchState)
);
}, updateAfter);
this.setState(previousState => {
const hasQueryChanged =
previousState.searchState.query !== searchState.query;
return {
...previousState,
searchState: {
...searchState,
boundingBox: !hasQueryChanged ? searchState.boundingBox : null,
},
};
});
};
render() {
const { searchState } = this.state;
const parameters = {};
if (!searchState.boundingBox) {
parameters.aroundLatLngViaIP = true;
parameters.aroundRadius = 'all';
}
return (
<InstantSearch
searchClient={searchClient}
indexName="airbnb"
searchState={searchState}
onSearchStateChange={this.onSearchStateChange}
>
<Configure {...parameters} />
Type a destination or move the map to see the closest apartment.
<SearchBox />
<GoogleMapsLoader apiKey="AIzaSyBawL8VbstJDdU5397SUX7pEt9DslAwWgQ">
{google => (
<GeoSearch google={google}>
{({ hits }) => (
<Fragment>
<Control />
{hits.map(hit => (
<Marker key={hit.objectID} hit={hit} />
))}
</Fragment>
)}
</GeoSearch>
)}
</GoogleMapsLoader>
</InstantSearch>
);
}
}
export default App;