Add search view; factor out SuggestedFollows component; add suggested follows to search

src/state/models/onboard.ts

@@ -9,7 +9,7 @@ export const OnboardStage = {
 export const OnboardStageOrder = [OnboardStage.Explainers, OnboardStage.Follows]
 
 export class OnboardModel {
-  isOnboarding: boolean = true
+  isOnboarding: boolean = false
   stage: string = OnboardStageOrder[0]
 
   constructor() {

src/view/com/discover/SuggestedFollows.tsx

@@ -0,0 +1,177 @@
+import React, {useMemo, useEffect} from 'react'
+import {
+  ActivityIndicator,
+  FlatList,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native'
+import LinearGradient from 'react-native-linear-gradient'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {observer} from 'mobx-react-lite'
+import {ErrorScreen} from '../util/ErrorScreen'
+import {UserAvatar} from '../util/UserAvatar'
+import {useStores} from '../../../state'
+import {
+  SuggestedActorsViewModel,
+  SuggestedActor,
+} from '../../../state/models/suggested-actors-view'
+import {s, colors, gradients} from '../../lib/styles'
+
+export const SuggestedFollows = observer(
+  ({onNoSuggestions}: {onNoSuggestions?: () => void}) => {
+    const store = useStores()
+
+    const view = useMemo<SuggestedActorsViewModel>(
+      () => new SuggestedActorsViewModel(store),
+      [],
+    )
+
+    useEffect(() => {
+      console.log('Fetching suggested actors')
+      view
+        .setup()
+        .catch((err: any) => console.error('Failed to fetch suggestions', err))
+    }, [view])
+
+    useEffect(() => {
+      if (!view.isLoading && !view.hasError && !view.hasContent) {
+        onNoSuggestions?.()
+      }
+    }, [view, view.isLoading, view.hasError, view.hasContent])
+
+    const onPressTryAgain = () =>
+      view
+        .setup()
+        .catch((err: any) => console.error('Failed to fetch suggestions', err))
+
+    const renderItem = ({item}: {item: SuggestedActor}) => <User item={item} />
+    return (
+      <View style={styles.container}>
+        {view.isLoading ? (
+          <View>
+            <ActivityIndicator />
+          </View>
+        ) : view.hasError ? (
+          <ErrorScreen
+            title="Failed to load suggestions"
+            message="There was an error while trying to load suggested follows."
+            details={view.error}
+            onPressTryAgain={onPressTryAgain}
+          />
+        ) : (
+          <View style={styles.suggestionsContainer}>
+            <FlatList
+              data={view.suggestions}
+              keyExtractor={item => item._reactKey}
+              renderItem={renderItem}
+              style={s.flex1}
+            />
+          </View>
+        )}
+      </View>
+    )
+  },
+)
+
+const User = ({item}: {item: SuggestedActor}) => {
+  return (
+    <View style={styles.actor}>
+      <View style={styles.actorMeta}>
+        <View style={styles.actorAvi}>
+          <UserAvatar
+            size={40}
+            displayName={item.displayName}
+            handle={item.handle}
+          />
+        </View>
+        <View style={styles.actorContent}>
+          <Text style={[s.f17, s.bold]} numberOfLines={1}>
+            {item.displayName}
+          </Text>
+          <Text style={[s.f14, s.gray5]} numberOfLines={1}>
+            @{item.handle}
+          </Text>
+        </View>
+        <View style={styles.actorBtn}>
+          <TouchableOpacity>
+            <LinearGradient
+              colors={[gradients.primary.start, gradients.primary.end]}
+              start={{x: 0, y: 0}}
+              end={{x: 1, y: 1}}
+              style={[styles.btn, styles.gradientBtn]}>
+              <FontAwesomeIcon icon="plus" style={[s.white, s.mr5]} size={15} />
+              <Text style={[s.white, s.fw600, s.f15]}>Follow</Text>
+            </LinearGradient>
+          </TouchableOpacity>
+        </View>
+      </View>
+      {item.description ? (
+        <View style={styles.actorDetails}>
+          <Text style={[s.f15]} numberOfLines={4}>
+            {item.description}
+          </Text>
+        </View>
+      ) : undefined}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+
+  suggestionsContainer: {
+    flex: 1,
+    backgroundColor: colors.gray1,
+  },
+
+  actor: {
+    backgroundColor: colors.white,
+    borderRadius: 6,
+    margin: 2,
+    marginBottom: 0,
+  },
+  actorMeta: {
+    flexDirection: 'row',
+  },
+  actorAvi: {
+    width: 60,
+    paddingLeft: 10,
+    paddingTop: 10,
+    paddingBottom: 10,
+  },
+  actorContent: {
+    flex: 1,
+    paddingRight: 10,
+    paddingTop: 10,
+  },
+  actorBtn: {
+    paddingRight: 10,
+    paddingTop: 10,
+  },
+  actorDetails: {
+    paddingLeft: 60,
+    paddingRight: 10,
+    paddingBottom: 10,
+  },
+
+  gradientBtn: {
+    paddingHorizontal: 24,
+    paddingVertical: 6,
+  },
+  secondaryBtn: {
+    paddingHorizontal: 14,
+  },
+  btn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 7,
+    borderRadius: 50,
+    backgroundColor: colors.gray1,
+    marginLeft: 6,
+  },
+})

src/view/com/onboard/Follows.tsx

@@ -1,78 +1,29 @@
-import React, {useMemo, useEffect} from 'react'
+import React from 'react'
 import {
-  ActivityIndicator,
-  FlatList,
   SafeAreaView,
   StyleSheet,
   Text,
   TouchableOpacity,
   View,
 } from 'react-native'
-import LinearGradient from 'react-native-linear-gradient'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {observer} from 'mobx-react-lite'
-import {ErrorScreen} from '../util/ErrorScreen'
+import {SuggestedFollows} from '../discover/SuggestedFollows'
-import {UserAvatar} from '../util/UserAvatar'
 import {useStores} from '../../../state'
-import {
+import {s} from '../../lib/styles'
-  SuggestedActorsViewModel,
-  SuggestedActor,
-} from '../../../state/models/suggested-actors-view'
-import {s, colors, gradients} from '../../lib/styles'
 
 export const Follows = observer(() => {
   const store = useStores()
 
-  const view = useMemo<SuggestedActorsViewModel>(
+  const onNoSuggestions = () => {
-    () => new SuggestedActorsViewModel(store),
-    [],
-  )
-
-  useEffect(() => {
-    console.log('Fetching suggested actors')
-    view
-      .setup()
-      .catch((err: any) => console.error('Failed to fetch suggestions', err))
-  }, [view])
-
-  useEffect(() => {
-    if (!view.isLoading && !view.hasError && !view.hasContent) {
     // no suggestions, bounce from this view
     store.onboard.next()
   }
-  }, [view, view.isLoading, view.hasError, view.hasContent])
-
-  const onPressTryAgain = () =>
-    view
-      .setup()
-      .catch((err: any) => console.error('Failed to fetch suggestions', err))
   const onPressNext = () => store.onboard.next()
 
-  const renderItem = ({item}: {item: SuggestedActor}) => <User item={item} />
   return (
     <SafeAreaView style={styles.container}>
       <Text style={styles.title}>Suggested follows</Text>
-      {view.isLoading ? (
+      <SuggestedFollows onNoSuggestions={onNoSuggestions} />
-        <View>
-          <ActivityIndicator />
-        </View>
-      ) : view.hasError ? (
-        <ErrorScreen
-          title="Failed to load suggestions"
-          message="There was an error while trying to load suggested follows."
-          details={view.error}
-          onPressTryAgain={onPressTryAgain}
-        />
-      ) : (
-        <View style={styles.suggestionsContainer}>
-          <FlatList
-            data={view.suggestions}
-            keyExtractor={item => item._reactKey}
-            renderItem={renderItem}
-            style={s.flex1}
-          />
-        </View>
-      )}
       <View style={styles.footer}>
         <TouchableOpacity onPress={onPressNext}>
           <Text style={[s.blue3, s.f18]}>Skip</Text>
@@ -86,49 +37,6 @@ export const Follows = observer(() => {
   )
 })
 
-const User = ({item}: {item: SuggestedActor}) => {
-  return (
-    <View style={styles.actor}>
-      <View style={styles.actorMeta}>
-        <View style={styles.actorAvi}>
-          <UserAvatar
-            size={40}
-            displayName={item.displayName}
-            handle={item.handle}
-          />
-        </View>
-        <View style={styles.actorContent}>
-          <Text style={[s.f17, s.bold]} numberOfLines={1}>
-            {item.displayName}
-          </Text>
-          <Text style={[s.f14, s.gray5]} numberOfLines={1}>
-            @{item.handle}
-          </Text>
-        </View>
-        <View style={styles.actorBtn}>
-          <TouchableOpacity>
-            <LinearGradient
-              colors={[gradients.primary.start, gradients.primary.end]}
-              start={{x: 0, y: 0}}
-              end={{x: 1, y: 1}}
-              style={[styles.btn, styles.gradientBtn]}>
-              <FontAwesomeIcon icon="plus" style={[s.white, s.mr5]} size={15} />
-              <Text style={[s.white, s.fw600, s.f15]}>Follow</Text>
-            </LinearGradient>
-          </TouchableOpacity>
-        </View>
-      </View>
-      {item.description ? (
-        <View style={styles.actorDetails}>
-          <Text style={[s.f15]} numberOfLines={4}>
-            {item.description}
-          </Text>
-        </View>
-      ) : undefined}
-    </View>
-  )
-}
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -141,58 +49,6 @@ const styles = StyleSheet.create({
     paddingBottom: 12,
   },
 
-  suggestionsContainer: {
-    flex: 1,
-    backgroundColor: colors.gray1,
-  },
-
-  actor: {
-    backgroundColor: colors.white,
-    borderRadius: 6,
-    margin: 2,
-    marginBottom: 0,
-  },
-  actorMeta: {
-    flexDirection: 'row',
-  },
-  actorAvi: {
-    width: 60,
-    paddingLeft: 10,
-    paddingTop: 10,
-    paddingBottom: 10,
-  },
-  actorContent: {
-    flex: 1,
-    paddingRight: 10,
-    paddingTop: 10,
-  },
-  actorBtn: {
-    paddingRight: 10,
-    paddingTop: 10,
-  },
-  actorDetails: {
-    paddingLeft: 60,
-    paddingRight: 10,
-    paddingBottom: 10,
-  },
-
-  gradientBtn: {
-    paddingHorizontal: 24,
-    paddingVertical: 6,
-  },
-  secondaryBtn: {
-    paddingHorizontal: 14,
-  },
-  btn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 7,
-    borderRadius: 50,
-    backgroundColor: colors.gray1,
-    marginLeft: 6,
-  },
-
   footer: {
     flexDirection: 'row',
     paddingHorizontal: 32,

src/view/lib/icons.tsx

@@ -53,6 +53,33 @@ export function HomeIcon({
   )
 }
 
+// Copyright (c) 2020 Refactoring UI Inc.
+// https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
+export function MangifyingGlassIcon({
+  style,
+  size,
+}: {
+  style?: StyleProp<ViewStyle>
+  size?: string | number
+}) {
+  return (
+    <Svg
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={2}
+      stroke="currentColor"
+      width={size || 24}
+      height={size || 24}
+      style={style}>
+      <Path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+      />
+    </Svg>
+  )
+}
+
 // https://github.com/Remix-Design/RemixIcon/blob/master/License
 export function BellIcon({
   style,

src/view/screens/Search.tsx

@@ -1,11 +1,57 @@
-import React from 'react'
+import React, {useEffect} from 'react'
-import {Text, View} from 'react-native'
+import {StyleSheet, Text, View} from 'react-native'
+import {ViewHeader} from '../com/util/ViewHeader'
+import {SuggestedFollows} from '../com/discover/SuggestedFollows'
 import {ScreenParams} from '../routes'
+import {useStores} from '../../state'
+import {colors} from '../lib/styles'
+
+export const Search = ({visible, params}: ScreenParams) => {
+  const store = useStores()
+  const {name} = params
+
+  useEffect(() => {
+    if (visible) {
+      store.nav.setTitle(`Search`)
+    }
+  }, [store, visible, name])
 
-export const Search = ({params}: ScreenParams) => {
   return (
-    <View style={{justifyContent: 'center', alignItems: 'center'}}>
+    <View style={styles.container}>
-      <Text style={{fontSize: 20, fontWeight: 'bold'}}>Search</Text>
+      <ViewHeader title="Search" />
+      <View style={styles.todoContainer}>
+        <Text style={styles.todoLabel}>
+          Search is still being implemented. Check back soon!
+        </Text>
+      </View>
+      <Text style={styles.heading}>Suggested follows</Text>
+      <SuggestedFollows />
     </View>
   )
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.white,
+  },
+
+  todoContainer: {
+    backgroundColor: colors.pink1,
+    margin: 10,
+    padding: 10,
+    borderRadius: 6,
+  },
+  todoLabel: {
+    color: colors.pink5,
+    textAlign: 'center',
+  },
+
+  heading: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    paddingTop: 12,
+    paddingBottom: 6,
+    paddingHorizontal: 12,
+  },
+})

src/view/shell/mobile/index.tsx

@@ -33,7 +33,12 @@ import {MainMenu} from './MainMenu'
 import {TabsSelector} from './TabsSelector'
 import {Composer} from './Composer'
 import {s, colors} from '../../lib/styles'
-import {GridIcon, HomeIcon, BellIcon} from '../../lib/icons'
+import {
+  GridIcon,
+  HomeIcon,
+  MangifyingGlassIcon,
+  BellIcon,
+} from '../../lib/icons'
 
 const SWIPE_GESTURE_DIST_TRIGGER = 0.5
 const SWIPE_GESTURE_VEL_TRIGGER = 2500
@@ -45,7 +50,7 @@ const Btn = ({
   onPress,
   onLongPress,
 }: {
-  icon: IconProp | 'menu' | 'house' | 'bell'
+  icon: IconProp | 'menu' | 'house' | 'bell' | 'search'
   inactive?: boolean
   notificationCount?: number
   onPress?: (event: GestureResponderEvent) => void
@@ -58,6 +63,11 @@ const Btn = ({
     IconEl = GridIcon
   } else if (icon === 'house') {
     IconEl = HomeIcon
+    size = 24
+  } else if (icon === 'search') {
+    IconEl = MangifyingGlassIcon
+    size = 24
+    addedStyles = {position: 'relative', top: -1} as ViewStyle
   } else if (icon === 'bell') {
     IconEl = BellIcon
     size = 24
@@ -114,6 +124,7 @@ export const MobileShell: React.FC = observer(() => {
       store.nav.navigate('/')
     }
   }
+  const onPressSearch = () => store.nav.navigate('/search')
   const onPressMenu = () => setMainMenuActive(true)
   const onPressNotifications = () => store.nav.navigate('/notifications')
   const onPressTabs = () => setTabsSelectorActive(true)
@@ -210,7 +221,7 @@ export const MobileShell: React.FC = observer(() => {
       </SafeAreaView>
       <View style={styles.bottomBar}>
         <Btn icon="house" onPress={onPressHome} />
-        <Btn icon="search" inactive={true} onPress={() => {} /* TODO */} />
+        <Btn icon="search" onPress={onPressSearch} />
         <Btn icon="menu" onPress={onPressMenu} />
         <Btn
           icon="bell"