Implement user search

zio/stable
Paul Frazee 2022-11-22 16:14:58 -06:00
parent 99b50e2fd5
commit 903cce20e7
2 changed files with 88 additions and 31 deletions

View File

@ -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

View File

@ -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,
},
})