DS Boyce
863 lines
21 KiB
TypeScript
863 lines
21 KiB
TypeScript
import {memo, useCallback, useMemo, useState} from 'react'
|
||
import {ActivityIndicator, View} from 'react-native'
|
||
import {Trans, useLingui} from '@lingui/react/macro'
|
||
|
||
import {urls} from '#/lib/constants'
|
||
import {usePostViewTracking} from '#/lib/hooks/usePostViewTracking'
|
||
import {useCallOnce} from '#/lib/once'
|
||
import {
|
||
cleanError,
|
||
isNetworkError,
|
||
shouldRetryError,
|
||
} from '#/lib/strings/errors'
|
||
import {augmentSearchQuery} from '#/lib/strings/helpers'
|
||
import {useActorSearch} from '#/state/queries/actor-search'
|
||
import {usePopularFeedsSearch} from '#/state/queries/feed'
|
||
import {useSearchPostsV2Query} from '#/state/queries/search-posts-v2'
|
||
import {useStarterPackSearch} from '#/state/queries/starter-pack-search'
|
||
import {useSession} from '#/state/session'
|
||
import {useLoggedOutViewControls} from '#/state/shell/logged-out'
|
||
import {useCloseAllActiveElements} from '#/state/util'
|
||
import {Pager} from '#/view/com/pager/Pager'
|
||
import {TabBar} from '#/view/com/pager/TabBar'
|
||
import {Post} from '#/view/com/post/Post'
|
||
import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard'
|
||
import {List} from '#/view/com/util/List'
|
||
import {StarterPackCard} from '#/screens/Search/components/StarterPackCard'
|
||
import {
|
||
hasPostOnlyFilters,
|
||
type SearchFilters,
|
||
} from '#/screens/Search/searchParams'
|
||
import {atoms as a, useTheme, web} from '#/alf'
|
||
import * as FeedCard from '#/components/FeedCard'
|
||
import * as Layout from '#/components/Layout'
|
||
import {InlineLinkText} from '#/components/Link'
|
||
import {ListFooter} from '#/components/Lists'
|
||
import {SearchError} from '#/components/SearchError'
|
||
import {Text} from '#/components/Typography'
|
||
import {type Metrics, useAnalytics} from '#/analytics'
|
||
import {type app} from '#/lexicons'
|
||
import type * as bsky from '#/types/bsky'
|
||
|
||
let SearchResults = ({
|
||
query,
|
||
filters,
|
||
hasFilters,
|
||
fromMe,
|
||
activeTab,
|
||
onPageSelected,
|
||
headerHeight,
|
||
}: {
|
||
query: string
|
||
filters: SearchFilters
|
||
hasFilters: boolean
|
||
fromMe: boolean
|
||
activeTab: number
|
||
onPageSelected: (page: number) => void
|
||
headerHeight: number
|
||
}): React.ReactNode => {
|
||
const ax = useAnalytics()
|
||
const {t: l} = useLingui()
|
||
/*
|
||
* People/Feeds visibility keys off post-only filters: a `lang` filter applies
|
||
* to people and feeds too, so it must not hide those tabs (which would also
|
||
* regress the non-v2 legacy language dropdown). Other filters are post-only.
|
||
*/
|
||
const hasPostFilters = hasPostOnlyFilters(filters) || fromMe
|
||
const activePage = hasPostFilters && activeTab > 1 ? 0 : activeTab
|
||
const tabShape = hasPostFilters ? 'filtered' : 'plain'
|
||
|
||
const isStarterPacksEnabled = ax.features.enabled(
|
||
ax.features.SearchStarterPacksV2Enable,
|
||
)
|
||
|
||
const sections = useMemo(() => {
|
||
if (!query && !hasFilters) return []
|
||
/*
|
||
* People and Feeds tabs only make sense without post-restricting filters -
|
||
* those filters don't apply to actors or feeds.
|
||
*/
|
||
const noFilters = !hasPostFilters
|
||
return [
|
||
{
|
||
title: l`Top`,
|
||
component: (
|
||
<SearchScreenPostResults
|
||
hasFilters={hasFilters}
|
||
query={query}
|
||
filters={filters}
|
||
sort="top"
|
||
active={activePage === 0}
|
||
/>
|
||
),
|
||
},
|
||
{
|
||
title: l`Latest`,
|
||
component: (
|
||
<SearchScreenPostResults
|
||
hasFilters={hasFilters}
|
||
query={query}
|
||
filters={filters}
|
||
sort="latest"
|
||
active={activePage === 1}
|
||
/>
|
||
),
|
||
},
|
||
noFilters && {
|
||
title: l`People`,
|
||
component: (
|
||
<SearchScreenUserResults query={query} active={activePage === 2} />
|
||
),
|
||
},
|
||
noFilters && {
|
||
title: l`Feeds`,
|
||
component: (
|
||
<SearchScreenFeedsResults query={query} active={activePage === 3} />
|
||
),
|
||
},
|
||
noFilters &&
|
||
isStarterPacksEnabled && {
|
||
title: l`Starter packs`,
|
||
component: (
|
||
<SearchScreenStarterPackResults
|
||
query={query}
|
||
active={activePage === 4}
|
||
/>
|
||
),
|
||
},
|
||
].filter(Boolean) as {
|
||
title: string
|
||
component: React.ReactNode
|
||
}[]
|
||
}, [
|
||
l,
|
||
query,
|
||
filters,
|
||
hasFilters,
|
||
hasPostFilters,
|
||
activePage,
|
||
isStarterPacksEnabled,
|
||
])
|
||
|
||
// There may be fewer tabs after changing the search options.
|
||
const selectedPage = activePage > sections.length - 1 ? 0 : activePage
|
||
|
||
return (
|
||
<Pager
|
||
key={tabShape}
|
||
onPageSelected={onPageSelected}
|
||
renderTabBar={props => (
|
||
<Layout.Center style={[a.z_10, web([a.sticky, {top: headerHeight}])]}>
|
||
<TabBar items={sections.map(section => section.title)} {...props} />
|
||
</Layout.Center>
|
||
)}
|
||
initialPage={selectedPage}>
|
||
{sections.map((section, i) => (
|
||
<View key={i}>{section.component}</View>
|
||
))}
|
||
</Pager>
|
||
)
|
||
}
|
||
SearchResults = memo(SearchResults)
|
||
export {SearchResults}
|
||
|
||
function Loader() {
|
||
return (
|
||
<Layout.Content>
|
||
<View style={[a.py_xl]}>
|
||
<ActivityIndicator />
|
||
</View>
|
||
</Layout.Content>
|
||
)
|
||
}
|
||
|
||
function EmptyState({
|
||
messageText,
|
||
error,
|
||
children,
|
||
}: {
|
||
messageText: React.ReactNode
|
||
error?: string
|
||
children?: React.ReactNode
|
||
}) {
|
||
const t = useTheme()
|
||
|
||
return (
|
||
<Layout.Content>
|
||
<View style={[a.p_xl]}>
|
||
<View style={[t.atoms.bg_contrast_25, a.rounded_sm, a.p_lg]}>
|
||
<Text style={[a.text_md]}>{messageText}</Text>
|
||
|
||
{error && (
|
||
<>
|
||
<View
|
||
style={[
|
||
{
|
||
marginVertical: 12,
|
||
height: 1,
|
||
width: '100%',
|
||
backgroundColor: t.atoms.text.color,
|
||
opacity: 0.2,
|
||
},
|
||
]}
|
||
/>
|
||
|
||
<Text style={[t.atoms.text_contrast_medium]}>
|
||
<Trans>Error: {error}</Trans>
|
||
</Text>
|
||
</>
|
||
)}
|
||
|
||
{children}
|
||
</View>
|
||
</View>
|
||
</Layout.Content>
|
||
)
|
||
}
|
||
|
||
function NoResultsText({
|
||
hasFilters = false,
|
||
query,
|
||
}: {
|
||
hasFilters?: boolean
|
||
query: string
|
||
}) {
|
||
const t = useTheme()
|
||
const {t: l} = useLingui()
|
||
|
||
return (
|
||
<>
|
||
<Text style={[a.text_lg, t.atoms.text_contrast_high]}>
|
||
{hasFilters ? (
|
||
query ? (
|
||
<Trans>
|
||
No results found for “
|
||
<Text style={[a.text_lg, a.font_medium]}>{query}</Text>” with
|
||
advanced search filters applied.
|
||
</Trans>
|
||
) : (
|
||
<Trans>
|
||
No results found for your query with advanced search filters
|
||
applied.
|
||
</Trans>
|
||
)
|
||
) : (
|
||
<Trans>
|
||
No results found for “
|
||
<Text style={[a.text_lg, a.font_medium]}>{query}</Text>”.
|
||
</Trans>
|
||
)}
|
||
</Text>
|
||
{'\n\n'}
|
||
<Text
|
||
style={[
|
||
a.mt_lg,
|
||
a.text_md,
|
||
a.leading_snug,
|
||
t.atoms.text_contrast_high,
|
||
]}>
|
||
{hasFilters ? (
|
||
<Trans>Try a different search term or remove some filters.</Trans>
|
||
) : (
|
||
<Trans>Try a different search term.</Trans>
|
||
)}
|
||
</Text>
|
||
{'\n\n'}
|
||
<Text
|
||
style={[
|
||
a.mt_lg,
|
||
a.text_md,
|
||
a.leading_snug,
|
||
t.atoms.text_contrast_high,
|
||
]}>
|
||
<Trans context="english-only-resource">
|
||
Learn more about{' '}
|
||
<InlineLinkText
|
||
label={l({
|
||
message: 'Read about how to use advanced search filters',
|
||
context: 'english-only-resource',
|
||
})}
|
||
to={urls.website.blog.searchTipsAndTricks}
|
||
style={[a.text_md, a.leading_snug]}>
|
||
how to use advanced search
|
||
</InlineLinkText>
|
||
.
|
||
</Trans>
|
||
</Text>
|
||
</>
|
||
)
|
||
}
|
||
|
||
type SearchResultSlice =
|
||
| {
|
||
type: 'post'
|
||
key: string
|
||
post: app.bsky.feed.defs.PostView
|
||
}
|
||
| {
|
||
type: 'loadingMore'
|
||
key: string
|
||
}
|
||
|
||
let SearchScreenPostResults = ({
|
||
hasFilters = false,
|
||
query,
|
||
filters,
|
||
sort,
|
||
active,
|
||
}: {
|
||
hasFilters: boolean
|
||
query: string
|
||
filters?: SearchFilters
|
||
sort?: 'top' | 'latest'
|
||
active: boolean
|
||
}): React.ReactNode => {
|
||
const ax = useAnalytics()
|
||
const {t: l} = useLingui()
|
||
const {hasSession} = useSession()
|
||
const [isPTR, setIsPTR] = useState(false)
|
||
const trackPostView = usePostViewTracking('SearchResults')
|
||
|
||
const augmentedV2Query = useMemo(() => {
|
||
return augmentSearchQuery(query || '')
|
||
}, [query])
|
||
|
||
const v2 = useSearchPostsV2Query({
|
||
query: augmentedV2Query,
|
||
filters,
|
||
sort,
|
||
enabled: active,
|
||
})
|
||
const {
|
||
isFetched,
|
||
data: results,
|
||
isFetching,
|
||
error,
|
||
refetch,
|
||
fetchNextPage,
|
||
isFetchingNextPage,
|
||
hasNextPage,
|
||
} = v2
|
||
|
||
const t = useTheme()
|
||
const onPullToRefresh = useCallback(async () => {
|
||
setIsPTR(true)
|
||
await refetch()
|
||
setIsPTR(false)
|
||
}, [setIsPTR, refetch])
|
||
const onEndReached = useCallback(() => {
|
||
if (isFetching || !hasNextPage || error) return
|
||
void fetchNextPage()
|
||
}, [isFetching, error, hasNextPage, fetchNextPage])
|
||
|
||
const posts = useMemo(() => {
|
||
return results?.pages.flatMap(page => page.posts) || []
|
||
}, [results])
|
||
const items = useMemo(() => {
|
||
let temp: SearchResultSlice[] = []
|
||
|
||
const seenUris = new Set()
|
||
for (const post of posts) {
|
||
if (seenUris.has(post.uri)) {
|
||
continue
|
||
}
|
||
temp.push({
|
||
type: 'post',
|
||
key: post.uri,
|
||
post,
|
||
})
|
||
seenUris.add(post.uri)
|
||
}
|
||
|
||
if (isFetchingNextPage) {
|
||
temp.push({
|
||
type: 'loadingMore',
|
||
key: 'loadingMore',
|
||
})
|
||
}
|
||
|
||
return temp
|
||
}, [posts, isFetchingNextPage])
|
||
|
||
const closeAllActiveElements = useCloseAllActiveElements()
|
||
const {requestSwitchToAccount} = useLoggedOutViewControls()
|
||
|
||
const fireTracking = useCallOnce(() => {
|
||
if (sort) {
|
||
// ts only
|
||
ax.metric('search:results:loaded', {
|
||
tab: sort,
|
||
initialCount: items.length,
|
||
})
|
||
}
|
||
})
|
||
if (isFetched && sort) {
|
||
fireTracking()
|
||
}
|
||
|
||
const showSignIn = () => {
|
||
closeAllActiveElements()
|
||
requestSwitchToAccount({requestedAccount: 'none'})
|
||
}
|
||
|
||
const showCreateAccount = () => {
|
||
closeAllActiveElements()
|
||
requestSwitchToAccount({requestedAccount: 'new'})
|
||
}
|
||
|
||
if (!hasSession) {
|
||
return (
|
||
<SearchError title={l`Search is currently unavailable when logged out`}>
|
||
<Text style={[a.text_md, a.text_center, a.leading_snug]}>
|
||
<Trans>
|
||
<InlineLinkText label={l`Sign in`} to="#" onPress={showSignIn}>
|
||
Sign in
|
||
</InlineLinkText>
|
||
<Text style={t.atoms.text_contrast_medium}> or </Text>
|
||
<InlineLinkText
|
||
label={l`Create an account`}
|
||
to={'#'}
|
||
onPress={showCreateAccount}>
|
||
create an account
|
||
</InlineLinkText>
|
||
<Text> </Text>
|
||
<Text style={t.atoms.text_contrast_medium}>
|
||
to search for news, sports, politics, and everything else
|
||
happening on Bluesky.
|
||
</Text>
|
||
</Trans>
|
||
</Text>
|
||
</SearchError>
|
||
)
|
||
}
|
||
|
||
return error ? (
|
||
<EmptyState
|
||
messageText={
|
||
shouldRetryError(error) || isNetworkError(error)
|
||
? l`We’re sorry, but your search could not be completed. Please try again in a few minutes.`
|
||
: l`We’re sorry, but your search could not be completed.`
|
||
}
|
||
error={cleanError(error)}
|
||
/>
|
||
) : (
|
||
<>
|
||
{isFetched ? (
|
||
<>
|
||
{posts.length ? (
|
||
<List
|
||
data={items}
|
||
renderItem={({
|
||
item,
|
||
index,
|
||
}: {
|
||
item: SearchResultSlice
|
||
index: number
|
||
}) => {
|
||
if (item.type === 'post') {
|
||
return (
|
||
<SearchPost from={sort} position={index} post={item.post} />
|
||
)
|
||
} else {
|
||
return null
|
||
}
|
||
}}
|
||
keyExtractor={(item: SearchResultSlice) => item.key}
|
||
refreshing={isPTR}
|
||
onRefresh={() => {
|
||
void onPullToRefresh()
|
||
}}
|
||
onEndReached={onEndReached}
|
||
onItemSeen={(item: SearchResultSlice) => {
|
||
if (item.type === 'post') {
|
||
trackPostView(item.post)
|
||
}
|
||
}}
|
||
desktopFixedHeight
|
||
ListFooterComponent={
|
||
<ListFooter
|
||
isFetchingNextPage={isFetchingNextPage}
|
||
hasNextPage={hasNextPage}
|
||
/>
|
||
}
|
||
/>
|
||
) : (
|
||
<EmptyState
|
||
messageText={
|
||
<NoResultsText hasFilters={hasFilters} query={query} />
|
||
}
|
||
/>
|
||
)}
|
||
</>
|
||
) : (
|
||
<Loader />
|
||
)}
|
||
</>
|
||
)
|
||
}
|
||
SearchScreenPostResults = memo(SearchScreenPostResults)
|
||
|
||
function SearchPost({
|
||
from,
|
||
position,
|
||
post,
|
||
}: {
|
||
from: Metrics['search:result:press']['tab']
|
||
position: Metrics['search:result:press']['position']
|
||
post: app.bsky.feed.defs.PostView
|
||
}) {
|
||
const ax = useAnalytics()
|
||
|
||
const onBeforePress = useCallback(() => {
|
||
ax.metric('search:result:press', {
|
||
tab: from,
|
||
resultType: 'post',
|
||
position,
|
||
uri: post.uri,
|
||
})
|
||
}, [ax, from, position, post])
|
||
|
||
return <Post post={post} onBeforePress={onBeforePress} />
|
||
}
|
||
|
||
let SearchScreenUserResults = ({
|
||
query,
|
||
active,
|
||
}: {
|
||
query: string
|
||
active: boolean
|
||
}): React.ReactNode => {
|
||
const ax = useAnalytics()
|
||
const {t: l} = useLingui()
|
||
const {hasSession} = useSession()
|
||
const [isPTR, setIsPTR] = useState(false)
|
||
|
||
const {
|
||
isFetched,
|
||
data: results,
|
||
isFetching,
|
||
error,
|
||
refetch,
|
||
fetchNextPage,
|
||
isFetchingNextPage,
|
||
hasNextPage,
|
||
} = useActorSearch({
|
||
query,
|
||
enabled: active,
|
||
})
|
||
|
||
const onPullToRefresh = useCallback(async () => {
|
||
setIsPTR(true)
|
||
await refetch()
|
||
setIsPTR(false)
|
||
}, [setIsPTR, refetch])
|
||
const onEndReached = useCallback(() => {
|
||
if (!hasSession) return
|
||
if (isFetching || !hasNextPage || error) return
|
||
void fetchNextPage()
|
||
}, [isFetching, error, hasNextPage, fetchNextPage, hasSession])
|
||
|
||
const profiles = useMemo(() => {
|
||
return results?.pages.flatMap(page => page.actors) || []
|
||
}, [results])
|
||
|
||
const fireTracking = useCallOnce(() => {
|
||
ax.metric('search:results:loaded', {
|
||
tab: 'people',
|
||
initialCount: profiles.length,
|
||
})
|
||
})
|
||
if (isFetched) {
|
||
fireTracking()
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<EmptyState
|
||
messageText={
|
||
shouldRetryError(error) || isNetworkError(error)
|
||
? l`We’re sorry, but your search could not be completed. Please try again in a few minutes.`
|
||
: l`We’re sorry, but your search could not be completed.`
|
||
}
|
||
error={error.toString()}
|
||
/>
|
||
)
|
||
}
|
||
|
||
return isFetched && profiles ? (
|
||
<>
|
||
{profiles.length ? (
|
||
<List
|
||
data={profiles}
|
||
renderItem={({
|
||
item,
|
||
index,
|
||
}: {
|
||
item: bsky.profile.AnyProfileView
|
||
index: number
|
||
}) => <SearchScreenProfileButton position={index} profile={item} />}
|
||
keyExtractor={(item: bsky.profile.AnyProfileView) => item.did}
|
||
refreshing={isPTR}
|
||
onRefresh={() => void onPullToRefresh()}
|
||
onEndReached={onEndReached}
|
||
desktopFixedHeight
|
||
ListFooterComponent={
|
||
<ListFooter
|
||
hasNextPage={hasNextPage && hasSession}
|
||
isFetchingNextPage={isFetchingNextPage}
|
||
/>
|
||
}
|
||
/>
|
||
) : (
|
||
<EmptyState messageText={<NoResultsText query={query} />} />
|
||
)}
|
||
</>
|
||
) : (
|
||
<Loader />
|
||
)
|
||
}
|
||
SearchScreenUserResults = memo(SearchScreenUserResults)
|
||
|
||
function SearchScreenProfileButton({
|
||
position,
|
||
profile,
|
||
}: {
|
||
position: number
|
||
profile: bsky.profile.AnyProfileView
|
||
}) {
|
||
const ax = useAnalytics()
|
||
|
||
const handlePress = () => {
|
||
ax.metric('search:result:press', {
|
||
tab: 'people',
|
||
resultType: 'profile',
|
||
position,
|
||
uri: profile.did,
|
||
})
|
||
}
|
||
return <ProfileCardWithFollowBtn profile={profile} onPress={handlePress} />
|
||
}
|
||
|
||
let SearchScreenFeedsResults = ({
|
||
query,
|
||
active,
|
||
}: {
|
||
query: string
|
||
active: boolean
|
||
}): React.ReactNode => {
|
||
const ax = useAnalytics()
|
||
const t = useTheme()
|
||
|
||
const {
|
||
data: results,
|
||
isFetched,
|
||
isFetching,
|
||
error,
|
||
fetchNextPage,
|
||
isFetchingNextPage,
|
||
hasNextPage,
|
||
} = usePopularFeedsSearch({
|
||
query,
|
||
enabled: active,
|
||
})
|
||
const feeds = useMemo(() => {
|
||
return results?.pages.flatMap(page => page.feeds) || []
|
||
}, [results])
|
||
const onEndReached = useCallback(() => {
|
||
if (isFetching || !hasNextPage || error) return
|
||
void fetchNextPage()
|
||
}, [isFetching, error, hasNextPage, fetchNextPage])
|
||
|
||
const fireTracking = useCallOnce(() => {
|
||
ax.metric('search:results:loaded', {
|
||
tab: 'feeds',
|
||
initialCount: feeds.length,
|
||
})
|
||
})
|
||
if (isFetched) {
|
||
fireTracking()
|
||
}
|
||
|
||
return isFetched ? (
|
||
<>
|
||
{feeds.length || hasNextPage ? (
|
||
<List
|
||
data={feeds}
|
||
renderItem={({
|
||
item,
|
||
index,
|
||
}: {
|
||
item: app.bsky.feed.defs.GeneratorView
|
||
index: number
|
||
}) => (
|
||
<View
|
||
style={[
|
||
a.border_t,
|
||
t.atoms.border_contrast_low,
|
||
a.px_lg,
|
||
a.py_lg,
|
||
]}>
|
||
<SearchFeedCard position={index} view={item} />
|
||
</View>
|
||
)}
|
||
keyExtractor={(item: app.bsky.feed.defs.GeneratorView) => item.uri}
|
||
onEndReached={onEndReached}
|
||
desktopFixedHeight
|
||
ListFooterComponent={
|
||
<ListFooter
|
||
hasNextPage={hasNextPage}
|
||
isFetchingNextPage={isFetchingNextPage}
|
||
/>
|
||
}
|
||
/>
|
||
) : (
|
||
<EmptyState messageText={<NoResultsText query={query} />} />
|
||
)}
|
||
</>
|
||
) : (
|
||
<Loader />
|
||
)
|
||
}
|
||
SearchScreenFeedsResults = memo(SearchScreenFeedsResults)
|
||
|
||
function SearchFeedCard({
|
||
position,
|
||
view,
|
||
}: {
|
||
position: number
|
||
view: app.bsky.feed.defs.GeneratorView
|
||
}) {
|
||
const ax = useAnalytics()
|
||
|
||
const handleOnPress = () => {
|
||
ax.metric('search:result:press', {
|
||
tab: 'feeds',
|
||
resultType: 'feed',
|
||
position,
|
||
uri: view.uri,
|
||
})
|
||
}
|
||
|
||
return <FeedCard.Default view={view} onPress={handleOnPress} />
|
||
}
|
||
|
||
let SearchScreenStarterPackResults = ({
|
||
query,
|
||
active,
|
||
}: {
|
||
query: string
|
||
active: boolean
|
||
}): React.ReactNode => {
|
||
const ax = useAnalytics()
|
||
const {t: l} = useLingui()
|
||
const [isPTR, setIsPTR] = useState(false)
|
||
|
||
const {
|
||
isFetched,
|
||
data: results,
|
||
isFetching,
|
||
error,
|
||
refetch,
|
||
fetchNextPage,
|
||
isFetchingNextPage,
|
||
hasNextPage,
|
||
} = useStarterPackSearch({
|
||
query,
|
||
enabled: active,
|
||
})
|
||
|
||
const onPullToRefresh = useCallback(async () => {
|
||
setIsPTR(true)
|
||
await refetch()
|
||
setIsPTR(false)
|
||
}, [setIsPTR, refetch])
|
||
const onEndReached = useCallback(() => {
|
||
if (isFetching || !hasNextPage || error) return
|
||
void fetchNextPage()
|
||
}, [isFetching, error, hasNextPage, fetchNextPage])
|
||
const starterPacks = useMemo(() => {
|
||
return results?.pages.flatMap(page => page.starterPacks) || []
|
||
}, [results])
|
||
|
||
const fireTracking = useCallOnce(() => {
|
||
ax.metric('search:results:loaded', {
|
||
tab: 'starterPacks',
|
||
initialCount: starterPacks.length,
|
||
})
|
||
})
|
||
if (isFetched) {
|
||
fireTracking()
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<EmptyState
|
||
messageText={
|
||
shouldRetryError(error) || isNetworkError(error)
|
||
? l`We’re sorry, but your search could not be completed. Please try again in a few minutes.`
|
||
: l`We’re sorry, but your search could not be completed.`
|
||
}
|
||
error={cleanError(error)}
|
||
/>
|
||
)
|
||
}
|
||
|
||
return isFetched ? (
|
||
<>
|
||
{starterPacks.length ? (
|
||
<List
|
||
data={starterPacks}
|
||
renderItem={({
|
||
item,
|
||
index,
|
||
}: {
|
||
item: app.bsky.graph.defs.StarterPackView
|
||
index: number
|
||
}) => (
|
||
<View style={[a.px_lg, a.pb_lg, index === 0 && a.pt_lg]}>
|
||
<SearchStarterPack position={index} view={item} />
|
||
</View>
|
||
)}
|
||
keyExtractor={(item: app.bsky.graph.defs.StarterPackView) => item.uri}
|
||
refreshing={isPTR}
|
||
onRefresh={() => void onPullToRefresh()}
|
||
onEndReached={onEndReached}
|
||
desktopFixedHeight
|
||
ListFooterComponent={
|
||
<ListFooter
|
||
hasNextPage={hasNextPage}
|
||
isFetchingNextPage={isFetchingNextPage}
|
||
/>
|
||
}
|
||
/>
|
||
) : (
|
||
<EmptyState messageText={<NoResultsText query={query} />} />
|
||
)}
|
||
</>
|
||
) : (
|
||
<Loader />
|
||
)
|
||
}
|
||
SearchScreenStarterPackResults = memo(SearchScreenStarterPackResults)
|
||
|
||
function SearchStarterPack({
|
||
position,
|
||
view,
|
||
}: {
|
||
position: number
|
||
view: app.bsky.graph.defs.StarterPackView
|
||
}) {
|
||
const ax = useAnalytics()
|
||
|
||
const handleOnPress = () => {
|
||
ax.metric('search:result:press', {
|
||
tab: 'starterPacks',
|
||
resultType: 'starterPack',
|
||
position,
|
||
uri: view.uri,
|
||
})
|
||
}
|
||
|
||
return <StarterPackCard view={view} onPress={handleOnPress} />
|
||
}
|