-
Notifications
You must be signed in to change notification settings - Fork 24
/
SearchLanding.tsx
98 lines (91 loc) · 3.17 KB
/
SearchLanding.tsx
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
import { SearchClient } from 'algoliasearch'
import React, { useCallback } from 'react'
import { Configure, InstantSearch } from 'react-instantsearch-core'
import { StatusBar } from 'react-native'
import AlgoliaSearchInsights from 'search-insights'
import styled from 'styled-components/native'
import { v4 as uuidv4 } from 'uuid'
import { CategoriesButtons } from 'features/search/components/CategoriesButtons/CategoriesButtons'
import { SearchHeader } from 'features/search/components/SearchHeader/SearchHeader'
import { SearchSuggestions } from 'features/search/components/SearchSuggestions/SearchSuggestions'
import { useSearch } from 'features/search/context/SearchWrapper'
import { useSearchHistory } from 'features/search/helpers/useSearchHistory/useSearchHistory'
import { client } from 'libs/algolia/fetchAlgolia/clients'
import { env } from 'libs/environment'
import { useNetInfoContext } from 'libs/network/NetInfoWrapper'
import { OfflinePage } from 'libs/network/OfflinePage'
import { Form } from 'ui/components/Form'
import { Spacer } from 'ui/theme'
const searchInputID = uuidv4()
const searchClient: SearchClient = {
...client,
search(requests) {
if (requests.every(({ params }) => !params?.query)) {
return Promise.resolve({
results: requests.map(() => ({
hits: [],
nbHits: 0,
page: 0,
nbPages: 0,
hitsPerPage: 0,
processingTimeMS: 0,
exhaustiveNbHits: false,
query: '',
params: '',
})),
})
}
return client.search(requests)
},
}
const suggestionsIndex = env.ALGOLIA_SUGGESTIONS_INDEX_NAME
export const SearchLanding = () => {
const netInfo = useNetInfoContext()
const { isFocusOnSuggestions } = useSearch()
const { setQueryHistory, queryHistory, addToHistory, removeFromHistory, filteredHistory } =
useSearchHistory()
const setQueryHistoryMemoized = useCallback(
(query: string) => setQueryHistory(query),
[setQueryHistory]
)
if (!netInfo.isConnected) {
return <OfflinePage />
}
return (
<React.Fragment>
<StatusBar barStyle="dark-content" />
<Form.Flex>
<InstantSearch
searchClient={searchClient}
indexName={suggestionsIndex}
insights={{ insightsClient: AlgoliaSearchInsights }}>
<Configure hitsPerPage={5} clickAnalytics />
<SearchHeader
searchInputID={searchInputID}
shouldDisplaySubtitle
addSearchHistory={addToHistory}
searchInHistory={setQueryHistoryMemoized}
/>
<Spacer.Column numberOfSpaces={2} />
{isFocusOnSuggestions ? (
<SearchSuggestions
queryHistory={queryHistory}
addToHistory={addToHistory}
removeFromHistory={removeFromHistory}
filteredHistory={filteredHistory}
/>
) : (
<CategoriesButtonsContainer>
<CategoriesButtons />
<Spacer.TabBar />
</CategoriesButtonsContainer>
)}
</InstantSearch>
</Form.Flex>
</React.Fragment>
)
}
const CategoriesButtonsContainer = styled.View({
flex: 1,
overflowY: 'auto',
})