-
Notifications
You must be signed in to change notification settings - Fork 0
/
AlgoliaSearch.ts
101 lines (95 loc) · 2.67 KB
/
AlgoliaSearch.ts
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
import { ms, mvs } from "react-native-size-matters";
import { View, StyleSheet, Text } from "react-native";
import { ActivityIndicator } from "react-native-paper";
import { InstantSearch } from "react-instantsearch-core";
import { useNavigation } from "@react-navigation/native";
import React, { useCallback, useLayoutEffect } from "react";
import SearchBox from "./components/SearchBox";
import SearchList from "./components/SearchList";
import useAlgoliaSearch from "./useAlgoliaSearch";
import { SEARCH_TYPES } from "../../../constants";
import { courses, events } from "../../../strings";
import SearchInputWrapper from "../../../view/screens/Courses/styled/SearchInputWrapper";
interface IProps {
route: { params: { searchType: SEARCH_TYPES } };
}
const AlgoliaSearch = ({
route: {
params: { searchType },
},
}: IProps) => {
const navigation = useNavigation();
useLayoutEffect(
useCallback(() => {
navigation.setOptions({
title:
searchType === SEARCH_TYPES.COURSE
? courses.searchHeader
: events.searchHeader,
});
}, []),
);
const {
searchClient,
theme,
apiKeyError,
apiKeyLoading,
indices,
indicesError,
indicesLoading,
} = useAlgoliaSearch({ searchType });
return (
<View
style={{
backgroundColor: theme.color.background,
flex: 1,
}}>
{searchClient && !!Object.keys(indices).length ? (
<InstantSearch
searchClient={searchClient}
indexName={
searchType === SEARCH_TYPES.COURSE
? indices.courses
: `${indices.events}_startDate_asc`
}>
<SearchInputWrapper>
<SearchBox />
<SearchList {...{ searchType }} />
</SearchInputWrapper>
</InstantSearch>
) : null}
{apiKeyLoading || indicesLoading ? (
<View style={styles.loaderContainer}>
<ActivityIndicator size={"large"} color={theme.color.pink} />
</View>
) : null}
{apiKeyError || indicesError ? (
<View style={styles.errorContainer}>
<Text
style={{
fontSize: mvs(18),
color: theme.color.red,
textAlign: "center",
}}>
Etwas ist schief gelaufen. Bitte versuchen Sie es später noch
einmal.
</Text>
</View>
) : null}
</View>
);
};
const styles = StyleSheet.create({
loaderContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
errorContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center",
padding: ms(24),
},
});
export default AlgoliaSearch;