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