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
|
import React, {useEffect, useState, useMemo} from 'react'
import {StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native'
import {ViewHeader} from '../com/util/ViewHeader'
import {SuggestedFollows} from '../com/discover/SuggestedFollows'
import {UserAvatar} from '../com/util/UserAvatar'
import {ScreenParams} from '../routes'
import {useStores} from '../../state'
import {UserAutocompleteViewModel} from '../../state/models/user-autocomplete-view'
import {s, colors} from '../lib/styles'
import {MagnifyingGlassIcon} from '../lib/icons'
export const Search = ({navIdx, visible, params}: ScreenParams) => {
const store = useStores()
const [query, setQuery] = useState<string>('')
const autocompleteView = useMemo<UserAutocompleteViewModel>(
() => new UserAutocompleteViewModel(store),
[],
)
const {name} = params
useEffect(() => {
if (visible) {
autocompleteView.setup()
store.nav.setTitle(navIdx, `Search`)
}
}, [store, visible, name])
const onChangeQuery = (text: string) => {
setQuery(text)
if (text.length > 0) {
autocompleteView.setActive(true)
autocompleteView.setPrefix(text)
} else {
autocompleteView.setActive(false)
}
}
const onSelect = (handle: string) => {
store.nav.navigate(`/profile/${handle}`)
}
return (
<View style={styles.container}>
<ViewHeader title="Search" />
<View style={styles.inputContainer}>
<MagnifyingGlassIcon style={styles.inputIcon} />
<TextInput
placeholder="Type your query here..."
style={styles.input}
onChangeText={onChangeQuery}
/>
</View>
<View style={styles.outputContainer}>
{query ? (
<View>
{autocompleteView.searchRes.map((item, i) => (
<TouchableOpacity
key={i}
style={styles.searchResult}
onPress={() => onSelect(item.handle)}>
<UserAvatar
handle={item.handle}
displayName={item.displayName}
size={36}
/>
<View style={[s.ml10]}>
<Text style={styles.searchResultDisplayName}>
{item.displayName || item.handle}
</Text>
<Text style={styles.searchResultHandle}>@{item.handle}</Text>
</View>
</TouchableOpacity>
))}
</View>
) : (
<SuggestedFollows asLinks />
)}
</View>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: colors.white,
},
inputContainer: {
flexDirection: 'row',
paddingVertical: 16,
paddingHorizontal: 16,
borderBottomColor: colors.gray1,
borderBottomWidth: 1,
},
inputIcon: {
marginRight: 10,
color: colors.gray3,
},
input: {
fontSize: 16,
},
outputContainer: {
flex: 1,
backgroundColor: colors.gray1,
},
searchResult: {
flexDirection: 'row',
backgroundColor: colors.white,
borderBottomWidth: 1,
borderBottomColor: colors.gray1,
paddingVertical: 16,
paddingHorizontal: 16,
},
searchResultDisplayName: {
fontSize: 16,
fontWeight: 'bold',
},
searchResultHandle: {
fontSize: 14,
color: colors.gray5,
},
})
|
