diff --git a/src/view/com/discover/SuggestedFollows.tsx b/src/view/com/discover/SuggestedFollows.tsx index 80231521..d8cb0c4d 100644 --- a/src/view/com/discover/SuggestedFollows.tsx +++ b/src/view/com/discover/SuggestedFollows.tsx @@ -120,12 +120,7 @@ export const SuggestedFollows = observer( onPressTryAgain={onPressTryAgain} /> ) : view.isEmpty ? ( - - - You already follow everybody we were going to suggest. Check back - in the future! - - + ) : ( { const store = useStores() + const [query, setQuery] = useState('') + const autocompleteView = useMemo( + () => 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 ( - - - Search is still being implemented. Check back soon! - + + + + + + {query ? ( + + {autocompleteView.searchRes.map((item, i) => ( + onSelect(item.handle)}> + + + + {item.displayName} + + @{item.handle} + + + ))} + + ) : ( + + )} - Suggested follows - - ) } @@ -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, }, })