Implement user search

src/view/com/discover/SuggestedFollows.tsx

@@ -120,12 +120,7 @@ export const SuggestedFollows = observer(
             onPressTryAgain={onPressTryAgain}
           />
         ) : view.isEmpty ? (
-          <View style={styles.emptyContainer}>
+          <View />
-            <Text style={[s.gray5, s.textCenter]}>
-              You already follow everybody we were going to suggest. Check back
-              in the future!
-            </Text>
-          </View>
         ) : (
           <View style={styles.suggestionsContainer}>
             <FlatList

src/view/screens/Search.tsx

@@ -1,36 +1,80 @@
-import React, {useEffect} from 'react'
+import React, {useEffect, useState, useMemo} from 'react'
-import {StyleSheet, Text, View} from 'react-native'
+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}>
+      <View style={styles.inputContainer}>
-        <Text style={styles.todoLabel}>
+        <MagnifyingGlassIcon style={styles.inputIcon} />
-          Search is still being implemented. Check back soon!
+        <TextInput
-        </Text>
+          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: {
+  inputContainer: {
-    backgroundColor: colors.pink1,
+    flexDirection: 'row',
-    margin: 10,
+    paddingVertical: 16,
-    padding: 10,
+    paddingHorizontal: 16,
-    borderRadius: 6,
+    borderBottomColor: colors.gray1,
+    borderBottomWidth: 1,
   },
-  todoLabel: {
+  inputIcon: {
-    color: colors.pink5,
+    marginRight: 10,
-    textAlign: 'center',
+    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,
+  searchResultHandle: {
-    paddingHorizontal: 12,
+    fontSize: 14,
+    color: colors.gray5,
   },
 })