[🏁 #10] Searching for feeds (#4368)

* refactor name

* refactor to support feeds search

* more refactor

* cleanup

* allow searching for feeds

* better empty states

* move some stuff around

* one more move

* rename buttons

* another move

* clarify variable names

src/components/StarterPack/Wizard/WizardAddDialog.tsx

@@ -2,45 +2,131 @@ import React, {useLayoutEffect, useRef, useState} from 'react'
 import type {ListRenderItemInfo, TextInput as RNTextInput} from 'react-native'
 import {View} from 'react-native'
 import {AppBskyActorDefs} from '@atproto/api'
+import {GeneratorView} from '@atproto/api/dist/client/types/app/bsky/feed/defs'
 import {BottomSheetFlatListMethods} from '@discord/bottom-sheet'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import debounce from 'lodash.debounce'
 
-import {isWeb} from '#/platform/detection'
+import {isWeb} from 'platform/detection'
 import {useActorAutocompleteQuery} from 'state/queries/actor-autocomplete'
+import {
+  useGetPopularFeedsQuery,
+  useSearchPopularFeedsMutation,
+} from 'state/queries/feed'
 import {useProfileFollowsQuery} from 'state/queries/profile-follows'
 import {useSession} from 'state/session'
 import {WizardAction, WizardState} from '#/screens/StarterPack/Wizard/State'
-import {WizardProfileCard} from '#/screens/StarterPack/Wizard/StepProfiles/WizardProfileCard'
 import {atoms as a, native, useTheme, web} from '#/alf'
 import * as Dialog from '#/components/Dialog'
 import {TextInput} from '#/components/dms/dialogs/TextInput'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
+import {WizardFeedCard} from '#/components/StarterPack/Wizard/WizardFeedCard'
+import {WizardProfileCard} from '#/components/StarterPack/Wizard/WizardProfileCard'
 import {Text} from '#/components/Typography'
 
-function keyExtractor(item: AppBskyActorDefs.ProfileViewBasic) {
+interface Props {
-  return item.did
-}
-
-export function WizardAddProfilesDialog({
-  control,
-  state,
-  dispatch,
-}: {
   control: Dialog.DialogControlProps
+  type: 'profiles' | 'feeds'
   state: WizardState
   dispatch: (action: WizardAction) => void
-}) {
+}
+
+function keyExtractor(
+  item: AppBskyActorDefs.ProfileViewBasic | GeneratorView,
+  index: number,
+) {
+  return `${item.did}-${index}`
+}
+
+export function WizardAddDialog(props: Props) {
+  if (props.type === 'profiles') {
+    return <AddProfiles {...props} />
+  }
+  return <AddFeeds {...props} />
+}
+
+function AddProfiles(props: Props) {
   const [searchText, setSearchText] = useState('')
 
   const {currentAccount} = useSession()
-  const {data: results} = useActorAutocompleteQuery(searchText, true, 12)
   const {data: followsPages, fetchNextPage} = useProfileFollowsQuery(
     currentAccount?.did,
   )
   const follows = followsPages?.pages.flatMap(page => page.follows) || []
 
+  const {data: searchedProfiles} = useActorAutocompleteQuery(
+    searchText,
+    true,
+    12,
+  )
+
+  return (
+    <AddDialog
+      {...props}
+      data={searchText ? searchedProfiles : follows}
+      onEndReached={searchText ? undefined : () => fetchNextPage()}
+      searchText={searchText}
+      setSearchText={setSearchText}
+    />
+  )
+}
+
+function AddFeeds(props: Props) {
+  const [searchText, setSearchText] = useState('')
+
+  const {data: popularFeedsPages, fetchNextPage} = useGetPopularFeedsQuery()
+
+  const popularFeeds =
+    popularFeedsPages?.pages.flatMap(page => page.feeds) || []
+
+  const {
+    data: searchedFeeds,
+    mutate: search,
+    reset: resetSearch,
+  } = useSearchPopularFeedsMutation()
+
+  const debouncedSearch = React.useMemo(
+    () => debounce(q => search(q), 500), // debounce for 500ms
+    [search],
+  )
+
+  const onChangeText = (text: string) => {
+    setSearchText(text)
+    if (text.length > 1) {
+      debouncedSearch(text)
+    } else {
+      resetSearch()
+    }
+  }
+
+  return (
+    <AddDialog
+      {...props}
+      data={searchText ? searchedFeeds : popularFeeds}
+      onEndReached={() => fetchNextPage()}
+      searchText={searchText}
+      setSearchText={onChangeText}
+    />
+  )
+}
+
+function AddDialog({
+  type,
+  control,
+  state,
+  dispatch,
+  data,
+  onEndReached,
+  searchText,
+  setSearchText,
+}: Props & {
+  data?: AppBskyActorDefs.ProfileViewBasic[] | GeneratorView[]
+  onEndReached?: () => void
+  searchText: string
+  setSearchText: (text: string) => void
+}) {
   const listRef = useRef<BottomSheetFlatListMethods>(null)
   const inputRef = useRef<RNTextInput>(null)
 
@@ -52,13 +138,12 @@ export function WizardAddProfilesDialog({
     }
   }, [])
 
-  const renderItem = ({
+  const renderItem = ({item}: ListRenderItemInfo<any>) =>
-    item,
+    type === 'profiles' ? (
-  }: ListRenderItemInfo<AppBskyActorDefs.ProfileViewBasic>) => {
-    return (
       <WizardProfileCard profile={item} state={state} dispatch={dispatch} />
+    ) : (
+      <WizardFeedCard generator={item} state={state} dispatch={dispatch} />
     )
-  }
 
   return (
     <Dialog.Outer
@@ -67,7 +152,7 @@ export function WizardAddProfilesDialog({
       nativeOptions={{sheet: {snapPoints: ['100%']}}}>
       <Dialog.InnerFlatList
         ref={listRef}
-        data={searchText.length > 0 ? results : follows}
+        data={data}
         renderItem={renderItem}
         keyExtractor={keyExtractor}
         ListHeaderComponent={
@@ -75,6 +160,7 @@ export function WizardAddProfilesDialog({
             searchText={searchText}
             setSearchText={setSearchText}
             inputRef={inputRef}
+            type={type}
           />
         }
         stickyHeaderIndices={[0]}
@@ -91,7 +177,7 @@ export function WizardAddProfilesDialog({
         ]}
         webInnerStyle={[a.py_0, {maxWidth: 500, minWidth: 200}]}
         keyboardDismissMode="on-drag"
-        onEndReached={() => fetchNextPage()}
+        onEndReached={onEndReached}
         onEndReachedThreshold={2}
         removeClippedSubviews={true}
       />
@@ -100,10 +186,12 @@ export function WizardAddProfilesDialog({
 }
 
 function ListHeader({
+  type,
   searchText,
   setSearchText,
   inputRef,
 }: {
+  type: 'profiles' | 'feeds'
   searchText: string
   setSearchText: (text: string) => void
   inputRef: React.Ref<RNTextInput>
@@ -145,7 +233,11 @@ function ListHeader({
             a.leading_tight,
             t.atoms.text_contrast_high,
           ]}>
-          <Trans>Select profiles to add</Trans>
+          {type === 'profiles' ? (
+            <Trans>Select profiles to add</Trans>
+          ) : (
+            <Trans>Select feeds to add</Trans>
+          )}
         </Text>
       </View>
 

src/components/StarterPack/Wizard/WizardFeedCard.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import {View} from 'react-native'
+import {GeneratorView} from '@atproto/api/dist/client/types/app/bsky/feed/defs'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {UserAvatar} from 'view/com/util/UserAvatar'
+import {WizardAction, WizardState} from '#/screens/StarterPack/Wizard/State'
+import {atoms as a, useTheme} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
+import {Text} from '#/components/Typography'
+
+export function WizardFeedCard({
+  generator,
+  state,
+  dispatch,
+}: {
+  generator: GeneratorView
+  state: WizardState
+  dispatch: (action: WizardAction) => void
+}) {
+  const {_} = useLingui()
+  const t = useTheme()
+
+  const includesFeed = state.feeds.some(f => f.uri === generator.uri)
+  const onAdd = () => {
+    if (includesFeed) {
+      dispatch({type: 'RemoveFeed', feedUri: generator.uri})
+    } else {
+      dispatch({type: 'AddFeed', feed: generator})
+    }
+  }
+
+  return (
+    <View
+      style={[
+        a.flex_row,
+        a.align_center,
+        a.px_md,
+        a.py_sm,
+        a.border_b,
+        a.gap_md,
+        t.atoms.border_contrast_low,
+      ]}>
+      <UserAvatar type="algo" size={45} avatar={generator.avatar} />
+      <View style={[a.flex_1]}>
+        <Text style={[a.flex_1, a.font_bold, a.text_md]} numberOfLines={1}>
+          {generator.displayName}
+        </Text>
+        <Text
+          style={[a.flex_1, t.atoms.text_contrast_medium]}
+          numberOfLines={1}>
+          {_(msg`Feed by @${generator.creator.handle}`)}
+        </Text>
+      </View>
+      <Button
+        label={includesFeed ? _(msg`Remove`) : _(msg`Add`)}
+        variant="solid"
+        color={includesFeed ? 'secondary' : 'primary'}
+        size="small"
+        style={{paddingVertical: 6}}
+        onPress={onAdd}>
+        <ButtonText>
+          {includesFeed ? <Trans>Remove</Trans> : <Trans>Add</Trans>}
+        </ButtonText>
+      </Button>
+    </View>
+  )
+}

src/components/StarterPack/Wizard/WizardListEmpty.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import {View} from 'react-native'
+import {Trans} from '@lingui/macro'
+
+import {atoms as a, useTheme} from '#/alf'
+import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag'
+import {UserCircle_Stroke2_Corner0_Rounded as UserCircle} from '#/components/icons/UserCircle'
+import {Text} from '#/components/Typography'
+
+export function WizardListEmpty({type}: {type: 'profiles' | 'feeds'}) {
+  const t = useTheme()
+
+  return (
+    <View
+      style={[a.flex_1, a.px_md, a.align_center, a.gap_md, {marginTop: 80}]}>
+      {type === 'profiles' ? (
+        <UserCircle
+          width={100}
+          height={100}
+          style={t.atoms.text_contrast_medium}
+        />
+      ) : (
+        <Hashtag
+          width={100}
+          height={100}
+          style={t.atoms.text_contrast_medium}
+        />
+      )}
+      <Text
+        style={[
+          a.font_bold,
+          a.text_xl,
+          a.text_center,
+          t.atoms.text_contrast_medium,
+        ]}>
+        {type === 'profiles' ? (
+          <Trans>Recommend people to follow!</Trans>
+        ) : (
+          <Trans>Add some cool feeds!</Trans>
+        )}
+      </Text>
+    </View>
+  )
+}

src/screens/StarterPack/Wizard/State.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import {AppBskyActorDefs} from '@atproto/api'
+import {GeneratorView} from '@atproto/api/dist/client/types/app/bsky/feed/defs'
 
 const steps = ['Landing', 'Details', 'Profiles', 'Feeds'] as const
 type Step = (typeof steps)[number]
@@ -12,8 +13,8 @@ type Action =
   | {type: 'SetDescription'; description: string}
   | {type: 'AddProfile'; profile: AppBskyActorDefs.ProfileViewBasic}
   | {type: 'RemoveProfile'; profileDid: string}
-  | {type: 'AddFeed'; uri: string}
+  | {type: 'AddFeed'; feed: GeneratorView}
-  | {type: 'RemoveFeed'; uri: string}
+  | {type: 'RemoveFeed'; feedUri: string}
   | {type: 'SetProcessing'; processing: boolean}
 
 interface State {
@@ -23,7 +24,7 @@ interface State {
   description?: string
   avatar?: string
   profiles: AppBskyActorDefs.ProfileViewBasic[]
-  feedUris: string[]
+  feeds: GeneratorView[]
   processing: boolean
 }
 
@@ -66,12 +67,12 @@ function reducer(state: State, action: Action): State {
       }
       break
     case 'AddFeed':
-      updatedState = {...state, feedUris: [...state.feedUris, action.uri]}
+      updatedState = {...state, feeds: [...state.feeds, action.feed]}
       break
     case 'RemoveFeed':
       updatedState = {
         ...state,
-        feedUris: state.feedUris.filter(uri => uri !== action.uri),
+        feeds: state.feeds.filter(f => f.uri !== action.feedUri),
       }
       break
     case 'SetProcessing':
@@ -118,7 +119,7 @@ export function Provider({
           canNext: true,
           currentStep: initialStep,
           profiles: [],
-          feedUris: [],
+          feeds: [],
           processing: false,
         },
   )

src/screens/StarterPack/Wizard/StepFeeds.tsx

@@ -1,88 +1,33 @@
 import React from 'react'
-import {ListRenderItemInfo, View} from 'react-native'
+import {ListRenderItemInfo} from 'react-native'
 import {GeneratorView} from '@atproto/api/dist/client/types/app/bsky/feed/defs'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
 
-import {useProfileFeedgensQuery} from 'state/queries/profile-feedgens'
-import {useSession} from 'state/session'
 import {List} from 'view/com/util/List'
-import {UserAvatar} from 'view/com/util/UserAvatar'
 import {useWizardState} from '#/screens/StarterPack/Wizard/State'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {WizardFeedCard} from '#/components/StarterPack/Wizard/WizardFeedCard'
-import {Text} from '#/components/Typography'
+import {WizardListEmpty} from '#/components/StarterPack/Wizard/WizardListEmpty'
-
-function renderItem({item}: ListRenderItemInfo<GeneratorView>) {
-  return <FeedCard generator={item} />
-}
 
 function keyExtractor(item: GeneratorView) {
   return item.uri
 }
 
 export function StepFeeds() {
-  const {currentAccount} = useSession()
-  const {data} = useProfileFeedgensQuery(currentAccount!.did)
-  const feeds = data?.pages.flatMap(page => page.feeds) || []
-
-  return (
-    <List
-      data={feeds}
-      renderItem={renderItem}
-      keyExtractor={keyExtractor}
-      style={[a.flex_1]}
-    />
-  )
-}
-
-function FeedCard({generator}: {generator: GeneratorView}) {
-  const {_} = useLingui()
-  const t = useTheme()
   const [state, dispatch] = useWizardState()
 
-  const includesFeed = state.feedUris.includes(generator.uri)
+  console.log(state)
-  const onAdd = () => {
+
-    if (includesFeed) {
+  const renderItem = ({item}: ListRenderItemInfo<GeneratorView>) => {
-      dispatch({type: 'RemoveFeed', uri: generator.uri})
+    return <WizardFeedCard generator={item} state={state} dispatch={dispatch} />
-    } else {
-      dispatch({type: 'AddFeed', uri: generator.uri})
-    }
   }
 
   return (
-    <View
+    <List
-      style={[
+      data={state.feeds}
-        a.flex_row,
+      renderItem={renderItem}
-        a.align_center,
+      keyExtractor={keyExtractor}
-        a.px_md,
+      style={[a.flex_1]}
-        a.py_sm,
+      ListEmptyComponent={<WizardListEmpty type="feeds" />}
-        a.border_b,
+    />
-        a.gap_md,
-        t.atoms.border_contrast_low,
-      ]}>
-      <UserAvatar type="algo" size={45} avatar={generator.avatar} />
-      <View style={[a.flex_1]}>
-        <Text style={[a.flex_1, a.font_bold, a.text_md]} numberOfLines={1}>
-          {generator.displayName}
-        </Text>
-        <Text
-          style={[a.flex_1, t.atoms.text_contrast_medium]}
-          numberOfLines={1}>
-          {_(msg`Feed by @${generator.creator.handle}`)}
-        </Text>
-      </View>
-      <Button
-        label={includesFeed ? _(msg`Remove`) : _(msg`Add`)}
-        variant="solid"
-        color={includesFeed ? 'secondary' : 'primary'}
-        size="small"
-        style={{paddingVertical: 6}}
-        onPress={onAdd}>
-        <ButtonText>
-          {includesFeed ? <Trans>Remove</Trans> : <Trans>Add</Trans>}
-        </ButtonText>
-      </Button>
-    </View>
   )
 }

src/screens/StarterPack/Wizard/StepProfiles.tsx

@@ -1,13 +1,12 @@
 import React from 'react'
 import {ListRenderItemInfo, View} from 'react-native'
 import {AppBskyActorDefs} from '@atproto/api'
-import {Trans} from '@lingui/macro'
 
 import {List} from 'view/com/util/List'
 import {useWizardState} from '#/screens/StarterPack/Wizard/State'
-import {WizardProfileCard} from '#/screens/StarterPack/Wizard/StepProfiles/WizardProfileCard'
 import {atoms as a} from '#/alf'
-import {Text} from '#/components/Typography'
+import {WizardListEmpty} from '#/components/StarterPack/Wizard/WizardListEmpty'
+import {WizardProfileCard} from '#/components/StarterPack/Wizard/WizardProfileCard'
 
 function keyExtractor(item: AppBskyActorDefs.ProfileViewBasic) {
   return item.did
@@ -27,26 +26,13 @@ export function StepProfiles() {
   return (
     <>
       <View style={[a.flex_1]}>
-        {state.profiles.length > 0 ? (
+        <List
-          <List
+          data={state.profiles}
-            data={state.profiles}
+          renderItem={renderItem}
-            renderItem={renderItem}
+          keyExtractor={keyExtractor}
-            keyExtractor={keyExtractor}
+          ListEmptyComponent={<WizardListEmpty type="profiles" />}
-          />
+        />
-        ) : (
-          <ListEmpty />
-        )}
       </View>
     </>
   )
 }
-
-function ListEmpty() {
-  return (
-    <View style={[a.flex_1, a.px_md, a.align_center]}>
-      <Text style={[a.font_bold, a.text_xl, a.text_center, {marginTop: 100}]}>
-        <Trans>Add the people you recommend to your starter pack!</Trans>
-      </Text>
-    </View>
-  )
-}

src/screens/StarterPack/Wizard/index.tsx

@@ -20,11 +20,11 @@ import {StepDetails} from '#/screens/StarterPack/Wizard/StepDetails'
 import {StepFeeds} from '#/screens/StarterPack/Wizard/StepFeeds'
 import {StepLanding} from '#/screens/StarterPack/Wizard/StepLanding'
 import {StepProfiles} from '#/screens/StarterPack/Wizard/StepProfiles'
-import {WizardAddProfilesDialog} from '#/screens/StarterPack/Wizard/StepProfiles/WizardAddProfilesDialog'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
 import {Loader} from '#/components/Loader'
+import {WizardAddDialog} from '#/components/StarterPack/Wizard/WizardAddDialog'
 import {Provider} from './State'
 
 export function Wizard({
@@ -83,7 +83,7 @@ function WizardInner() {
     staleTime: 0,
   })
   const bottomBarOffset = useBottomBarOffset()
-  const addProfilesControl = useDialogControl()
+  const searchDialogControl = useDialogControl()
 
   React.useEffect(() => {
     navigation.setOptions({
@@ -95,15 +95,15 @@ function WizardInner() {
     {
       Landing: {
         header: _(msg`Create a starter pack`),
-        button: _(msg`Create`),
+        button: _(msg`Get started`),
       },
       Details: {
         header: _(msg`Details`),
-        button: _(msg`Add profiles`),
+        button: _(msg`Continue`),
       },
       Profiles: {
         header: _(msg`Add profiles`),
-        button: _(msg`Add feeds`),
+        button: _(msg`Continue`),
       },
       Feeds: {
         header: _(msg`Add feeds`),
@@ -150,14 +150,14 @@ function WizardInner() {
         showBorder={true}
         showOnDesktop={true}
         renderButton={
-          state.currentStep === 'Profiles'
+          state.currentStep === 'Profiles' || state.currentStep === 'Feeds'
             ? () => (
                 <Button
                   label={_(msg`Cancel`)}
                   variant="solid"
                   color="primary"
                   size="xsmall"
-                  onPress={addProfilesControl.open}
+                  onPress={searchDialogControl.open}
                   style={{marginLeft: -15}}>
                   <ButtonText>
                     <Trans>Add</Trans>
@@ -187,11 +187,14 @@ function WizardInner() {
         </View>
       </KeyboardStickyView>
 
-      <WizardAddProfilesDialog
+      {(state.currentStep === 'Profiles' || state.currentStep === 'Feeds') && (
-        control={addProfilesControl}
+        <WizardAddDialog
-        state={state}
+          control={searchDialogControl}
-        dispatch={dispatch}
+          state={state}
-      />
+          dispatch={dispatch}
+          type={state.currentStep === 'Profiles' ? 'profiles' : 'feeds'}
+        />
+      )}
     </CenteredView>
   )
 }