Implement user search
parent
99b50e2fd5
commit
903cce20e7
|
@ -120,12 +120,7 @@ export const SuggestedFollows = observer(
|
|||
onPressTryAgain={onPressTryAgain}
|
||||
/>
|
||||
) : view.isEmpty ? (
|
||||
<View style={styles.emptyContainer}>
|
||||
<Text style={[s.gray5, s.textCenter]}>
|
||||
You already follow everybody we were going to suggest. Check back
|
||||
in the future!
|
||||
</Text>
|
||||
</View>
|
||||
<View />
|
||||
) : (
|
||||
<View style={styles.suggestionsContainer}>
|
||||
<FlatList
|
||||
|
|
|
@ -1,36 +1,80 @@
|
|||
import React, {useEffect} from 'react'
|
||||
import {StyleSheet, Text, View} from 'react-native'
|
||||
import React, {useEffect, useState, useMemo} from 'react'
|
||||
import {StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native'
|
||||
import {ViewHeader} from '../com/util/ViewHeader'
|
||||
import {FAB} from '../com/util/FloatingActionButton'
|
||||
import {SuggestedFollows} from '../com/discover/SuggestedFollows'
|
||||
import {UserAvatar} from '../com/util/UserAvatar'
|
||||
import {ScreenParams} from '../routes'
|
||||
import {useStores} from '../../state'
|
||||
import {colors} from '../lib/styles'
|
||||
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 onComposePress = () => {
|
||||
store.shell.openComposer({})
|
||||
|
||||
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.todoContainer}>
|
||||
<Text style={styles.todoLabel}>
|
||||
Search is still being implemented. Check back soon!
|
||||
</Text>
|
||||
<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}
|
||||
</Text>
|
||||
<Text style={styles.searchResultHandle}>@{item.handle}</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
) : (
|
||||
<SuggestedFollows asLinks />
|
||||
)}
|
||||
</View>
|
||||
<Text style={styles.heading}>Suggested follows</Text>
|
||||
<SuggestedFollows asLinks />
|
||||
<FAB icon="pen-nib" onPress={onComposePress} />
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
@ -41,22 +85,40 @@ const styles = StyleSheet.create({
|
|||
backgroundColor: colors.white,
|
||||
},
|
||||
|
||||
todoContainer: {
|
||||
backgroundColor: colors.pink1,
|
||||
margin: 10,
|
||||
padding: 10,
|
||||
borderRadius: 6,
|
||||
inputContainer: {
|
||||
flexDirection: 'row',
|
||||
paddingVertical: 16,
|
||||
paddingHorizontal: 16,
|
||||
borderBottomColor: colors.gray1,
|
||||
borderBottomWidth: 1,
|
||||
},
|
||||
todoLabel: {
|
||||
color: colors.pink5,
|
||||
textAlign: 'center',
|
||||
inputIcon: {
|
||||
marginRight: 10,
|
||||
color: colors.gray3,
|
||||
},
|
||||
input: {
|
||||
fontSize: 16,
|
||||
},
|
||||
|
||||
heading: {
|
||||
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',
|
||||
paddingTop: 12,
|
||||
paddingBottom: 6,
|
||||
paddingHorizontal: 12,
|
||||
},
|
||||
searchResultHandle: {
|
||||
fontSize: 14,
|
||||
color: colors.gray5,
|
||||
},
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue