zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Integrate search into suggested follows

zio/stable
Paul Frazee 2022-12-30 15:21:09 -06:00
parent a7a310a06b
commit 3d91cf3137
2 changed files with 25 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/view/com/discover/SuggestedFollows.tsx
View File

@ -21,7 +21,8 @@ import {
SuggestedActorsViewModel, SuggestedActorsViewModel,
SuggestedActor, SuggestedActor,
} from '../../../state/models/suggested-actors-view' } from '../../../state/models/suggested-actors-view'
import {s, colors, gradients} from '../../lib/styles' import {s, gradients} from '../../lib/styles'
import {usePalette} from '../../lib/hooks/usePalette'
export const SuggestedFollows = observer( export const SuggestedFollows = observer(
({ ({
@ -31,6 +32,7 @@ export const SuggestedFollows = observer(
onNoSuggestions?: () => void onNoSuggestions?: () => void
asLinks?: boolean asLinks?: boolean
}) => { }) => {
const pal = usePalette('default')
const store = useStores() const store = useStores()
const [follows, setFollows] = useState<Record<string, string>>({}) const [follows, setFollows] = useState<Record<string, string>>({})
@ -116,7 +118,7 @@ export const SuggestedFollows = observer(
) : view.isEmpty ? ( ) : view.isEmpty ? (
<View /> <View />
) : ( ) : (
<View style={styles.suggestionsContainer}> <View style={[styles.suggestionsContainer, pal.view]}>
<FlatList <FlatList
data={view.suggestions} data={view.suggestions}
keyExtractor={item => item._reactKey} keyExtractor={item => item._reactKey}
@ -141,8 +143,9 @@ const User = ({
onPressFollow: (item: SuggestedActor) => void onPressFollow: (item: SuggestedActor) => void
onPressUnfollow: (item: SuggestedActor) => void onPressUnfollow: (item: SuggestedActor) => void
}) => { }) => {
const pal = usePalette('default')
return ( return (
<View style={styles.actor}> <View style={[styles.actor, pal.view, pal.border]}>
<View style={styles.actorMeta}> <View style={styles.actorMeta}>
<View style={styles.actorAvi}> <View style={styles.actorAvi}>
<UserAvatar <UserAvatar
@ -153,17 +156,17 @@ const User = ({
/> />
</View> </View>
<View style={styles.actorContent}> <View style={styles.actorContent}>
<Text style={[s.f17, s.bold]} numberOfLines={1}> <Text type="h5" style={pal.text} numberOfLines={1}>
{item.displayName || item.handle} {item.displayName || item.handle}
</Text> </Text>
<Text style={[s.f14, s.gray5]} numberOfLines={1}> <Text style={pal.textLight} numberOfLines={1}>
@{item.handle} @{item.handle}
</Text> </Text>
</View> </View>
<View style={styles.actorBtn}> <View style={styles.actorBtn}>
{follow ? ( {follow ? (
<TouchableOpacity onPress={() => onPressUnfollow(item)}> <TouchableOpacity onPress={() => onPressUnfollow(item)}>
<View style={[styles.btn, styles.secondaryBtn]}> <View style={[styles.btn, styles.secondaryBtn, pal.btn]}>
<Text style={[s.gray5, s.fw600, s.f15]}>Unfollow</Text> <Text style={[s.gray5, s.fw600, s.f15]}>Unfollow</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
@ -187,7 +190,7 @@ const User = ({
</View> </View>
{item.description ? ( {item.description ? (
<View style={styles.actorDetails}> <View style={styles.actorDetails}>
<Text style={[s.f15]} numberOfLines={4}> <Text style={pal.text} numberOfLines={4}>
{item.description} {item.description}
</Text> </Text>
</View> </View>
@ -203,22 +206,10 @@ const styles = StyleSheet.create({
suggestionsContainer: { suggestionsContainer: {
flex: 1, flex: 1,
backgroundColor: colors.gray1,
},
emptyContainer: {
backgroundColor: colors.gray1,
marginHorizontal: 14,
paddingHorizontal: 8,
paddingVertical: 14,
borderRadius: 6,
}, },
actor: { actor: {
backgroundColor: colors.white, borderTopWidth: 1,
borderRadius: 6,
margin: 2,
marginBottom: 0,
}, },
actorMeta: { actorMeta: {
flexDirection: 'row', flexDirection: 'row',
@ -257,7 +248,6 @@ const styles = StyleSheet.create({
justifyContent: 'center', justifyContent: 'center',
paddingVertical: 7, paddingVertical: 7,
borderRadius: 50, borderRadius: 50,
backgroundColor: colors.gray1,
marginLeft: 6, marginLeft: 6,
}, },
}) })

41
src/view/screens/Search.tsx
View File

@ -14,10 +14,12 @@ import {Text} from '../com/util/text/Text'
import {ScreenParams} from '../routes' import {ScreenParams} from '../routes'
import {useStores} from '../../state' import {useStores} from '../../state'
import {UserAutocompleteViewModel} from '../../state/models/user-autocomplete-view' import {UserAutocompleteViewModel} from '../../state/models/user-autocomplete-view'
import {s, colors} from '../lib/styles' import {s} from '../lib/styles'
import {MagnifyingGlassIcon} from '../lib/icons' import {MagnifyingGlassIcon} from '../lib/icons'
import {usePalette} from '../lib/hooks/usePalette'
export const Search = ({navIdx, visible, params}: ScreenParams) => { export const Search = ({navIdx, visible, params}: ScreenParams) => {
const pal = usePalette('default')
const store = useStores() const store = useStores()
const textInput = useRef<TextInput>(null) const textInput = useRef<TextInput>(null)
const [query, setQuery] = useState<string>('') const [query, setQuery] = useState<string>('')
@ -50,17 +52,17 @@ export const Search = ({navIdx, visible, params}: ScreenParams) => {
} }
return ( return (
<View style={styles.container}> <View style={[pal.view, styles.container]}>
<ViewHeader title="Search" /> <ViewHeader title="Search" />
<View style={styles.inputContainer}> <View style={[pal.view, pal.border, styles.inputContainer]}>
<MagnifyingGlassIcon style={styles.inputIcon} /> <MagnifyingGlassIcon style={[pal.text, styles.inputIcon]} />
<TextInput <TextInput
ref={textInput} ref={textInput}
placeholder="Type your query here..." placeholder="Type your query here..."
placeholderTextColor={colors.gray4} placeholderTextColor={pal.textLight}
selectTextOnFocus selectTextOnFocus
returnKeyType="search" returnKeyType="search"
style={styles.input} style={[pal.text, styles.input]}
onChangeText={onChangeQuery} onChangeText={onChangeQuery}
/> />
</View> </View>
@ -70,7 +72,7 @@ export const Search = ({navIdx, visible, params}: ScreenParams) => {
{autocompleteView.searchRes.map((item, i) => ( {autocompleteView.searchRes.map((item, i) => (
<TouchableOpacity <TouchableOpacity
key={i} key={i}
style={styles.searchResult} style={[pal.view, pal.border, styles.searchResult]}
onPress={() => onSelect(item.handle)}> onPress={() => onSelect(item.handle)}>
<UserAvatar <UserAvatar
handle={item.handle} handle={item.handle}
@ -79,10 +81,10 @@ export const Search = ({navIdx, visible, params}: ScreenParams) => {
size={36} size={36}
/> />
<View style={[s.ml10]}> <View style={[s.ml10]}>
<Text style={styles.searchResultDisplayName}> <Text type="h5" style={pal.text}>
{item.displayName || item.handle} {item.displayName || item.handle}
</Text> </Text>
<Text style={styles.searchResultHandle}>@{item.handle}</Text> <Text style={pal.textLight}>@{item.handle}</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
))} ))}
@ -98,46 +100,31 @@ export const Search = ({navIdx, visible, params}: ScreenParams) => {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
backgroundColor: colors.white,
}, },
inputContainer: { inputContainer: {
flexDirection: 'row', flexDirection: 'row',
paddingVertical: 16, paddingVertical: 16,
paddingHorizontal: 16, paddingHorizontal: 16,
borderBottomColor: colors.gray1, borderTopWidth: 1,
borderBottomWidth: 1,
}, },
inputIcon: { inputIcon: {
marginRight: 10, marginRight: 10,
color: colors.gray3,
alignSelf: 'center', alignSelf: 'center',
}, },
input: { input: {
flex: 1, flex: 1,
fontSize: 16, fontSize: 16,
color: colors.black,
}, },
outputContainer: { outputContainer: {
flex: 1, flex: 1,
backgroundColor: colors.gray1,
}, },
searchResult: { searchResult: {
flexDirection: 'row', flexDirection: 'row',
backgroundColor: colors.white, borderTopWidth: 1,
borderBottomWidth: 1, paddingVertical: 12,
borderBottomColor: colors.gray1,
paddingVertical: 16,
paddingHorizontal: 16, paddingHorizontal: 16,
}, },
searchResultDisplayName: {
fontSize: 16,
fontWeight: 'bold',
},
searchResultHandle: {
fontSize: 14,
color: colors.gray5,
},
}) })