diff options
| -rw-r--r-- | src/screens/Search/Explore.tsx | 450 |
1 files changed, 223 insertions, 227 deletions
diff --git a/src/screens/Search/Explore.tsx b/src/screens/Search/Explore.tsx index 86877677a..33d8d343c 100644 --- a/src/screens/Search/Explore.tsx +++ b/src/screens/Search/Explore.tsx @@ -325,272 +325,268 @@ export function Explore({ fetchNextPageFeedPreviews, ]) - const items = useMemo<ExploreScreenItems[]>(() => { + const topBorder = useMemo( + () => ({type: 'topBorder', key: 'top-border'} as const), + [], + ) + const trendingTopicsModule = useMemo( + () => ({type: 'trendingTopics', key: 'trending-topics'} as const), + [], + ) + const suggestedFollowsModule = useMemo(() => { const i: ExploreScreenItems[] = [] - - const addTopBorder = () => { - i.push({type: 'topBorder', key: 'top-border'}) - } - - const addTrendingTopicsModule = () => { + i.push({ + type: 'tabbedHeader', + key: 'suggested-accounts-header', + title: _(msg`Suggested Accounts`), + icon: Person, + searchButton: { + label: _(msg`Search for more accounts`), + metricsTag: 'suggestedAccounts', + tab: 'user', + }, + }) + + if (!canShowSuggestedProfiles) { + i.push({type: 'profilePlaceholder', key: 'profilePlaceholder'}) + } else if (profilesError) { i.push({ - type: 'trendingTopics', - key: `trending-topics`, + type: 'error', + key: 'profilesError', + message: _(msg`Failed to load suggested follows`), + error: cleanError(profilesError), }) - - // temp - disable trending videos - // if (isNative) { - // i.push({ - // type: 'trendingVideos', - // key: `trending-videos`, - // }) - // } - } - - const addSuggestedFollowsModule = () => { - i.push({ - type: 'tabbedHeader', - key: 'suggested-accounts-header', - title: _(msg`Suggested Accounts`), - icon: Person, - searchButton: { - label: _(msg`Search for more accounts`), - metricsTag: 'suggestedAccounts', - tab: 'user', - }, - }) - - if (!canShowSuggestedProfiles) { - i.push({type: 'profilePlaceholder', key: 'profilePlaceholder'}) - } else if (profilesError) { - i.push({ - type: 'error', - key: 'profilesError', - message: _(msg`Failed to load suggested follows`), - error: cleanError(profilesError), - }) - } else { - if (profiles !== undefined) { - if (profiles.pages.length > 0 && moderationOpts) { - // Currently the responses contain duplicate items. - // Needs to be fixed on backend, but let's dedupe to be safe. - let seen = new Set() - const profileItems: ExploreScreenItems[] = [] - for (const page of profiles.pages) { - for (const actor of page.actors) { - if (!seen.has(actor.did) && !actor.viewer?.following) { - seen.add(actor.did) - profileItems.push({ - type: 'profile', - key: actor.did, - profile: actor, - recId: page.recId, - }) - } + } else { + if (profiles !== undefined) { + if (profiles.pages.length > 0 && moderationOpts) { + // Currently the responses contain duplicate items. + // Needs to be fixed on backend, but let's dedupe to be safe. + let seen = new Set() + const profileItems: ExploreScreenItems[] = [] + for (const page of profiles.pages) { + for (const actor of page.actors) { + if (!seen.has(actor.did) && !actor.viewer?.following) { + seen.add(actor.did) + profileItems.push({ + type: 'profile', + key: actor.did, + profile: actor, + recId: page.recId, + }) } } + } - if (profileItems.length === 0) { - if (!hasNextProfilesPage) { - // no items! remove the header - i.pop() - } - } else { - i.push(...profileItems) - } - if (hasNextProfilesPage) { - i.push({ - type: 'loadMore', - key: 'loadMoreProfiles', - message: _(msg`Load more suggested accounts`), - isLoadingMore: isLoadingMoreProfiles, - onLoadMore: onLoadMoreProfiles, - }) + if (profileItems.length === 0) { + if (!hasNextProfilesPage) { + // no items! remove the header + i.pop() } } else { - console.log('no pages') + i.push(...profileItems) + } + if (hasNextProfilesPage) { + i.push({ + type: 'loadMore', + key: 'loadMoreProfiles', + message: _(msg`Load more suggested accounts`), + isLoadingMore: isLoadingMoreProfiles, + onLoadMore: onLoadMoreProfiles, + }) } } else { - i.push({type: 'profilePlaceholder', key: 'profilePlaceholder'}) + console.log('no pages') } + } else { + i.push({type: 'profilePlaceholder', key: 'profilePlaceholder'}) } } - - const addSuggestedFeedsModule = () => { - i.push({ - type: 'header', - key: 'suggested-feeds-header', - title: _(msg`Discover Feeds`), - icon: ListSparkle, - searchButton: { - label: _(msg`Search for more feeds`), - metricsTag: 'suggestedFeeds', - tab: 'feed', - }, - }) - - if (feeds && preferences) { - // Currently the responses contain duplicate items. - // Needs to be fixed on backend, but let's dedupe to be safe. - let seen = new Set() - const feedItems: ExploreScreenItems[] = [] - for (const page of feeds.pages) { - for (const feed of page.feeds) { - if (!seen.has(feed.uri)) { - seen.add(feed.uri) - feedItems.push({ - type: 'feed', - key: feed.uri, - feed, - }) - } + return i + }, [ + profiles, + _, + canShowSuggestedProfiles, + hasNextProfilesPage, + isLoadingMoreProfiles, + moderationOpts, + onLoadMoreProfiles, + profilesError, + ]) + const suggestedFeedsModule = useMemo(() => { + const i: ExploreScreenItems[] = [] + i.push({ + type: 'header', + key: 'suggested-feeds-header', + title: _(msg`Discover Feeds`), + icon: ListSparkle, + searchButton: { + label: _(msg`Search for more feeds`), + metricsTag: 'suggestedFeeds', + tab: 'feed', + }, + }) + + if (feeds && preferences) { + // Currently the responses contain duplicate items. + // Needs to be fixed on backend, but let's dedupe to be safe. + let seen = new Set() + const feedItems: ExploreScreenItems[] = [] + for (const page of feeds.pages) { + for (const feed of page.feeds) { + if (!seen.has(feed.uri)) { + seen.add(feed.uri) + feedItems.push({ + type: 'feed', + key: feed.uri, + feed, + }) } } + } - // feeds errors can occur during pagination, so feeds is truthy - if (feedsError) { - i.push({ - type: 'error', - key: 'feedsError', - message: _(msg`Failed to load suggested feeds`), - error: cleanError(feedsError), - }) - } else if (preferencesError) { - i.push({ - type: 'error', - key: 'preferencesError', - message: _(msg`Failed to load feeds preferences`), - error: cleanError(preferencesError), - }) + // feeds errors can occur during pagination, so feeds is truthy + if (feedsError) { + i.push({ + type: 'error', + key: 'feedsError', + message: _(msg`Failed to load suggested feeds`), + error: cleanError(feedsError), + }) + } else if (preferencesError) { + i.push({ + type: 'error', + key: 'preferencesError', + message: _(msg`Failed to load feeds preferences`), + error: cleanError(preferencesError), + }) + } else { + if (feedItems.length === 0) { + if (!hasNextFeedsPage) { + i.pop() + } } else { - if (feedItems.length === 0) { - if (!hasNextFeedsPage) { - i.pop() - } + // This query doesn't follow the limit very well, so the first press of the + // load more button just unslices the array back to ~10 items + if (!hasPressedLoadMoreFeeds) { + i.push(...feedItems.slice(0, 3)) } else { - // This query doesn't follow the limit very well, so the first press of the - // load more button just unslices the array back to ~10 items - if (!hasPressedLoadMoreFeeds) { - i.push(...feedItems.slice(0, 3)) - } else { - i.push(...feedItems) - } - } - if (hasNextFeedsPage) { - i.push({ - type: 'loadMore', - key: 'loadMoreFeeds', - message: _(msg`Load more suggested feeds`), - isLoadingMore: isLoadingMoreFeeds, - onLoadMore: onLoadMoreFeeds, - }) + i.push(...feedItems) } } - } else { - if (feedsError) { - i.push({ - type: 'error', - key: 'feedsError', - message: _(msg`Failed to load suggested feeds`), - error: cleanError(feedsError), - }) - } else if (preferencesError) { + if (hasNextFeedsPage) { i.push({ - type: 'error', - key: 'preferencesError', - message: _(msg`Failed to load feeds preferences`), - error: cleanError(preferencesError), + type: 'loadMore', + key: 'loadMoreFeeds', + message: _(msg`Load more suggested feeds`), + isLoadingMore: isLoadingMoreFeeds, + onLoadMore: onLoadMoreFeeds, }) - } else { - i.push({type: 'feedPlaceholder', key: 'feedPlaceholder'}) } } - } - - const addSuggestedStarterPacksModule = () => { - i.push({ - type: 'header', - key: 'suggested-starterPacks-header', - title: _(msg`Starter Packs`), - icon: StarterPack, - }) - - if (isLoadingSuggestedSPs) { - Array.from({length: 3}).forEach((_, index) => - i.push({ - type: 'starterPackSkeleton', - key: `starterPackSkeleton-${index}`, - }), - ) - } else if (suggestedSPsError || !suggestedSPs) { - // just get rid of the section - i.pop() - } else { - suggestedSPs.starterPacks.map(s => { - i.push({ - type: 'starterPack', - key: s.uri, - view: s, - }) + } else { + if (feedsError) { + i.push({ + type: 'error', + key: 'feedsError', + message: _(msg`Failed to load suggested feeds`), + error: cleanError(feedsError), + }) + } else if (preferencesError) { + i.push({ + type: 'error', + key: 'preferencesError', + message: _(msg`Failed to load feeds preferences`), + error: cleanError(preferencesError), }) + } else { + i.push({type: 'feedPlaceholder', key: 'feedPlaceholder'}) } } - - const addFeedPreviews = () => { - i.push(...feedPreviewSlices) - if (isFetchingNextPageFeedPreviews) { + return i + }, [ + feeds, + _, + feedsError, + hasNextFeedsPage, + hasPressedLoadMoreFeeds, + isLoadingMoreFeeds, + onLoadMoreFeeds, + preferences, + preferencesError, + ]) + const suggestedStarterPacksModule = useMemo(() => { + const i: ExploreScreenItems[] = [] + i.push({ + type: 'header', + key: 'suggested-starterPacks-header', + title: _(msg`Starter Packs`), + icon: StarterPack, + }) + + if (isLoadingSuggestedSPs) { + Array.from({length: 3}).forEach((__, index) => i.push({ - type: 'preview:loading', - key: 'preview-loading-more', + type: 'starterPackSkeleton', + key: `starterPackSkeleton-${index}`, + }), + ) + } else if (suggestedSPsError || !suggestedSPs) { + // just get rid of the section + i.pop() + } else { + suggestedSPs.starterPacks.map(s => { + i.push({ + type: 'starterPack', + key: s.uri, + view: s, }) - } + }) + } + return i + }, [suggestedSPs, _, isLoadingSuggestedSPs, suggestedSPsError]) + const feedPreviewsModule = useMemo(() => { + const i: ExploreScreenItems[] = [] + i.push(...feedPreviewSlices) + if (isFetchingNextPageFeedPreviews) { + i.push({ + type: 'preview:loading', + key: 'preview-loading-more', + }) } + return i + }, [feedPreviewSlices, isFetchingNextPageFeedPreviews]) - // Dynamic module ordering + const isNewUser = guide?.guide === 'follow-10' && !guide.isComplete + const items = useMemo<ExploreScreenItems[]>(() => { + const i: ExploreScreenItems[] = [] - addTopBorder() + // Dynamic module ordering - if (guide?.guide === 'follow-10' && !guide.isComplete) { - addSuggestedFollowsModule() - addSuggestedStarterPacksModule() - addTrendingTopicsModule() + i.push(topBorder) + if (isNewUser) { + i.push(...suggestedFollowsModule) + i.push(...suggestedStarterPacksModule) + i.push(trendingTopicsModule) } else { - addTrendingTopicsModule() - addSuggestedFollowsModule() - addSuggestedStarterPacksModule() + i.push(trendingTopicsModule) + i.push(...suggestedFollowsModule) + i.push(...suggestedStarterPacksModule) } - if (gate('explore_show_suggested_feeds')) { - addSuggestedFeedsModule() + i.push(...suggestedFeedsModule) } - - addFeedPreviews() + i.push(...feedPreviewsModule) return i }, [ - _, - profiles, - feeds, - preferences, - onLoadMoreFeeds, - onLoadMoreProfiles, - isLoadingMoreProfiles, - isLoadingMoreFeeds, - profilesError, - feedsError, - preferencesError, - hasNextProfilesPage, - hasNextFeedsPage, - guide, + topBorder, + isNewUser, + suggestedFollowsModule, + suggestedStarterPacksModule, + suggestedFeedsModule, + trendingTopicsModule, + feedPreviewsModule, gate, - moderationOpts, - hasPressedLoadMoreFeeds, - suggestedSPs, - isLoadingSuggestedSPs, - suggestedSPsError, - feedPreviewSlices, - isFetchingNextPageFeedPreviews, - canShowSuggestedProfiles, ]) const renderItem = useCallback( @@ -709,7 +705,7 @@ export function Explore({ case 'profilePlaceholder': { return ( <> - {Array.from({length: 3}).map((_, index) => ( + {Array.from({length: 3}).map((__, i) => ( <View style={[ a.px_lg, @@ -717,7 +713,7 @@ export function Explore({ a.border_t, t.atoms.border_contrast_low, ]} - key={index}> + key={i}> <ProfileCard.Outer> <ProfileCard.Header> <ProfileCard.AvatarPlaceholder /> |