diff --git a/src/components/StarterPack/Wizard/WizardListEmpty.tsx b/src/components/StarterPack/Wizard/WizardListEmpty.tsx
deleted file mode 100644
index c48b718046..0000000000
--- a/src/components/StarterPack/Wizard/WizardListEmpty.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-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 (
-
- {type === 'profiles' ? (
-
- ) : (
-
- )}
-
- {type === 'profiles' ? (
-
- Search for people that you want to suggest others to follow
-
- ) : (
- Add some cool feeds!
- )}
-
-
- )
-}
diff --git a/src/screens/StarterPack/Wizard/StepFeeds.tsx b/src/screens/StarterPack/Wizard/StepFeeds.tsx
index 4eb3fd8ff4..8fb51eeff7 100644
--- a/src/screens/StarterPack/Wizard/StepFeeds.tsx
+++ b/src/screens/StarterPack/Wizard/StepFeeds.tsx
@@ -1,12 +1,17 @@
-import React from 'react'
-import {ListRenderItemInfo} from 'react-native'
+import React, {useState} from 'react'
+import {ListRenderItemInfo, View} from 'react-native'
import {GeneratorView} from '@atproto/api/dist/client/types/app/bsky/feed/defs'
+import debounce from 'lodash.debounce'
+import {
+ useGetPopularFeedsQuery,
+ useSearchPopularFeedsMutation,
+} from 'state/queries/feed'
+import {SearchInput} from 'view/com/util/forms/SearchInput'
import {List} from 'view/com/util/List'
import {useWizardState} from '#/screens/StarterPack/Wizard/State'
import {atoms as a} from '#/alf'
import {WizardFeedCard} from '#/components/StarterPack/Wizard/WizardFeedCard'
-import {WizardListEmpty} from '#/components/StarterPack/Wizard/WizardListEmpty'
function keyExtractor(item: GeneratorView) {
return item.uri
@@ -14,18 +19,54 @@ function keyExtractor(item: GeneratorView) {
export function StepFeeds() {
const [state, dispatch] = useWizardState()
+ const [query, setQuery] = 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 onChangeQuery = (text: string) => {
+ setQuery(text)
+ if (text.length > 1) {
+ debouncedSearch(text)
+ } else {
+ resetSearch()
+ }
+ }
const renderItem = ({item}: ListRenderItemInfo) => {
return
}
return (
-
}
- />
+ <>
+
+ setQuery('')}
+ onSubmitQuery={() => {}}
+ />
+
+ fetchNextPage() : undefined}
+ />
+ >
)
}
diff --git a/src/screens/StarterPack/Wizard/StepProfiles.tsx b/src/screens/StarterPack/Wizard/StepProfiles.tsx
index 4156007b91..6bc5e35bd1 100644
--- a/src/screens/StarterPack/Wizard/StepProfiles.tsx
+++ b/src/screens/StarterPack/Wizard/StepProfiles.tsx
@@ -1,5 +1,6 @@
import React, {useState} from 'react'
import {ListRenderItemInfo, View} from 'react-native'
+import {KeyboardAwareScrollView} from 'react-native-keyboard-controller'
import {AppBskyActorDefs} from '@atproto/api'
import {useActorAutocompleteQuery} from 'state/queries/actor-autocomplete'
@@ -54,6 +55,7 @@ export function StepProfiles() {
renderItem={renderItem}
keyExtractor={keyExtractor}
onEndReached={!query ? () => fetchNextPage() : undefined}
+ renderScrollComponent={props => }
/>
>
)
diff --git a/src/screens/StarterPack/Wizard/index.tsx b/src/screens/StarterPack/Wizard/index.tsx
index ec504aed58..254e029b5a 100644
--- a/src/screens/StarterPack/Wizard/index.tsx
+++ b/src/screens/StarterPack/Wizard/index.tsx
@@ -1,7 +1,7 @@
import React from 'react'
import {Keyboard, View} from 'react-native'
import {KeyboardAwareScrollView} from 'react-native-keyboard-controller'
-import {AppBskyActorDefs, AppBskyFeedDefs} from '@atproto/api'
+import {AppBskyActorDefs} from '@atproto/api'
import {GeneratorView} from '@atproto/api/dist/client/types/app/bsky/feed/defs'
import {msg, Plural, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
@@ -186,20 +186,21 @@ function WizardInner() {
- {state.currentStep === 'Details' && (
+ {state.currentStep === 'Details' ? (
+ ) : (
+
)}
-
-
{(state.currentStep === 'Profiles' || state.currentStep === 'Feeds') && (
- {items.slice(0, 5).map(p => (
+ {items.slice(0, 5).map((p, index) => (