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,
SuggestedActor,
} 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(
({
@ -31,6 +32,7 @@ export const SuggestedFollows = observer(
onNoSuggestions?: () => void
asLinks?: boolean
}) => {
const pal = usePalette('default')
const store = useStores()
const [follows, setFollows] = useState<Record<string, string>>({})
@ -116,7 +118,7 @@ export const SuggestedFollows = observer(
) : view.isEmpty ? (
<View />
) : (
<View style={styles.suggestionsContainer}>
<View style={[styles.suggestionsContainer, pal.view]}>
<FlatList
data={view.suggestions}
keyExtractor={item => item._reactKey}
@ -141,8 +143,9 @@ const User = ({
onPressFollow: (item: SuggestedActor) => void
onPressUnfollow: (item: SuggestedActor) => void
}) => {
const pal = usePalette('default')
return (
<View style={styles.actor}>
<View style={[styles.actor, pal.view, pal.border]}>
<View style={styles.actorMeta}>
<View style={styles.actorAvi}>
<UserAvatar
@ -153,17 +156,17 @@ const User = ({
/>
</View>
<View style={styles.actorContent}>
<Text style={[s.f17, s.bold]} numberOfLines={1}>
<Text type="h5" style={pal.text} numberOfLines={1}>
{item.displayName || item.handle}
</Text>
<Text style={[s.f14, s.gray5]} numberOfLines={1}>
<Text style={pal.textLight} numberOfLines={1}>
@{item.handle}
</Text>
</View>
<View style={styles.actorBtn}>
{follow ? (
<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>
</View>
</TouchableOpacity>
@ -187,7 +190,7 @@ const User = ({
</View>
{item.description ? (
<View style={styles.actorDetails}>
<Text style={[s.f15]} numberOfLines={4}>
<Text style={pal.text} numberOfLines={4}>
{item.description}
</Text>
</View>
@ -203,22 +206,10 @@ const styles = StyleSheet.create({
suggestionsContainer: {
flex: 1,
backgroundColor: colors.gray1,
},
emptyContainer: {
backgroundColor: colors.gray1,
marginHorizontal: 14,
paddingHorizontal: 8,
paddingVertical: 14,
borderRadius: 6,
},
actor: {
backgroundColor: colors.white,
borderRadius: 6,
margin: 2,
marginBottom: 0,
borderTopWidth: 1,
},
actorMeta: {
flexDirection: 'row',
@ -257,7 +248,6 @@ const styles = StyleSheet.create({
justifyContent: 'center',
paddingVertical: 7,
borderRadius: 50,
backgroundColor: colors.gray1,
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 {useStores} from '../../state'
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 {usePalette} from '../lib/hooks/usePalette'
export const Search = ({navIdx, visible, params}: ScreenParams) => {
const pal = usePalette('default')
const store = useStores()
const textInput = useRef<TextInput>(null)
const [query, setQuery] = useState<string>('')
@ -50,17 +52,17 @@ export const Search = ({navIdx, visible, params}: ScreenParams) => {
}
return (
<View style={styles.container}>
<View style={[pal.view, styles.container]}>
<ViewHeader title="Search" />
<View style={styles.inputContainer}>
<MagnifyingGlassIcon style={styles.inputIcon} />
<View style={[pal.view, pal.border, styles.inputContainer]}>
<MagnifyingGlassIcon style={[pal.text, styles.inputIcon]} />
<TextInput
ref={textInput}
placeholder="Type your query here..."
placeholderTextColor={colors.gray4}
placeholderTextColor={pal.textLight}
selectTextOnFocus
returnKeyType="search"
style={styles.input}
style={[pal.text, styles.input]}
onChangeText={onChangeQuery}
/>
</View>
@ -70,7 +72,7 @@ export const Search = ({navIdx, visible, params}: ScreenParams) => {
{autocompleteView.searchRes.map((item, i) => (
<TouchableOpacity
key={i}
style={styles.searchResult}
style={[pal.view, pal.border, styles.searchResult]}
onPress={() => onSelect(item.handle)}>
<UserAvatar
handle={item.handle}
@ -79,10 +81,10 @@ export const Search = ({navIdx, visible, params}: ScreenParams) => {
size={36}
/>
<View style={[s.ml10]}>
<Text style={styles.searchResultDisplayName}>
<Text type="h5" style={pal.text}>
{item.displayName || item.handle}
</Text>
<Text style={styles.searchResultHandle}>@{item.handle}</Text>
<Text style={pal.textLight}>@{item.handle}</Text>
</View>
</TouchableOpacity>
))}
@ -98,46 +100,31 @@ export const Search = ({navIdx, visible, params}: ScreenParams) => {
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: colors.white,
},
inputContainer: {
flexDirection: 'row',
paddingVertical: 16,
paddingHorizontal: 16,
borderBottomColor: colors.gray1,
borderBottomWidth: 1,
borderTopWidth: 1,
},
inputIcon: {
marginRight: 10,
color: colors.gray3,
alignSelf: 'center',
},
input: {
flex: 1,
fontSize: 16,
color: colors.black,
},
outputContainer: {
flex: 1,
backgroundColor: colors.gray1,
},
searchResult: {
flexDirection: 'row',
backgroundColor: colors.white,
borderBottomWidth: 1,
borderBottomColor: colors.gray1,
paddingVertical: 16,
borderTopWidth: 1,
paddingVertical: 12,
paddingHorizontal: 16,
},
searchResultDisplayName: {
fontSize: 16,
fontWeight: 'bold',
},
searchResultHandle: {
fontSize: 14,
color: colors.gray5,
},
})