From 0d2b9797b1ffb6ed56a65f32600d3c7a211cb4fa Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 12 Jun 2024 21:05:59 -0500 Subject: [PATCH] Add tab, query, factor out --- src/state/queries/feed.ts | 28 ++++ src/view/screens/Search/Explore.tsx | 231 +++++++++++++++++----------- src/view/screens/Search/Search.tsx | 52 +++++++ 3 files changed, 221 insertions(+), 90 deletions(-) diff --git a/src/state/queries/feed.ts b/src/state/queries/feed.ts index fed23f5b12..7e4cdff373 100644 --- a/src/state/queries/feed.ts +++ b/src/state/queries/feed.ts @@ -299,6 +299,34 @@ export function useSearchPopularFeedsMutation() { }) } +const popularFeedsSearchQueryKeyRoot = 'actor-search' +export const createPopularFeedsSearchQueryKey = (query: string) => [ + popularFeedsSearchQueryKeyRoot, + query, +] + +export function usePopularFeedsSearch({ + query, + enabled, +}: { + query: string + enabled?: boolean +}) { + const agent = useAgent() + return useQuery({ + enabled, + queryKey: createPopularFeedsSearchQueryKey(query), + queryFn: async () => { + const res = await agent.app.bsky.unspecced.getPopularFeedGenerators({ + limit: 10, + query: query, + }) + + return res.data.feeds + }, + }) +} + export type SavedFeedSourceInfo = FeedSourceInfo & { savedFeed: AppBskyActorDefs.SavedFeed } diff --git a/src/view/screens/Search/Explore.tsx b/src/view/screens/Search/Explore.tsx index e1ee3b15d8..52cea8fe1a 100644 --- a/src/view/screens/Search/Explore.tsx +++ b/src/view/screens/Search/Explore.tsx @@ -1,6 +1,12 @@ import React from 'react' import {View} from 'react-native' -import {AppBskyActorDefs, AppBskyFeedDefs, moderateProfile} from '@atproto/api' +import { + AppBskyActorDefs, + AppBskyFeedDefs, + moderateProfile, + ModerationDecision, + ModerationOpts, +} from '@atproto/api' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -20,7 +26,7 @@ import { FeedFeedLoadingPlaceholder, ProfileCardFeedLoadingPlaceholder, } from 'view/com/util/LoadingPlaceholder' -import {atoms as a, useTheme as useThemeNew} from '#/alf' +import {atoms as a, useTheme} from '#/alf' import {Button} from '#/components/Button' import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo' import {Loader} from '#/components/Loader' @@ -33,14 +39,14 @@ function SuggestedItemsHeader({ title: string description: string }) { - const t = useThemeNew() + const t = useTheme() return ( { + return item.items + .map(_item => { + if (_item.type === 'profile') { + return { + type: 'profile', + key: _item.profile.did, + avatar: _item.profile.avatar, + moderation: moderateProfile(_item.profile, moderationOpts!), + } + } else if (_item.type === 'feed') { + return { + type: 'feed', + key: _item.feed.uri, + avatar: _item.feed.avatar, + moderation: undefined, + } + } + return undefined + }) + .filter(Boolean) as LoadMoreItems[] + }, [item.items, moderationOpts]) + + return ( + + + + ) +} + type ExploreScreenItems = | { type: 'header' @@ -97,7 +230,7 @@ type ExploreScreenItems = export function Explore() { const {_} = useLingui() - const t = useThemeNew() + const t = useTheme() const {hasSession} = useSession() const {data: preferences, error: preferencesError} = usePreferencesQuery() const moderationOpts = useModerationOpts() @@ -304,89 +437,7 @@ export function Explore() { ) } case 'loadMore': { - return ( - - - - ) + return } case 'profilePlaceholder': { return @@ -431,7 +482,7 @@ export function Explore() { } } }, - [_, t, hasSession, moderationOpts], + [t, hasSession, moderationOpts], ) return ( diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx index b1337c7397..f1b0301d00 100644 --- a/src/view/screens/Search/Search.tsx +++ b/src/view/screens/Search/Search.tsx @@ -35,6 +35,7 @@ import {listenSoftReset} from '#/state/events' import {useModerationOpts} from '#/state/preferences/moderation-opts' import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete' import {useActorSearch} from '#/state/queries/actor-search' +import {usePopularFeedsSearch} from '#/state/queries/feed' import {useSearchPostsQuery} from '#/state/queries/search-posts' import {useSession} from '#/state/session' import {useSetDrawerOpen} from '#/state/shell' @@ -56,6 +57,7 @@ import {Text} from '#/view/com/util/text/Text' import {CenteredView, ScrollView} from '#/view/com/util/Views' import {Explore} from '#/view/screens/Search/Explore' import {SearchLinkCard, SearchProfileCard} from '#/view/shell/desktop/Search' +import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard' import {atoms as a} from '#/alf' import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' @@ -276,6 +278,50 @@ let SearchScreenUserResults = ({ } SearchScreenUserResults = React.memo(SearchScreenUserResults) +let SearchScreenFeedsResults = ({ + query, + active, +}: { + query: string + active: boolean +}): React.ReactNode => { + const {_} = useLingui() + const {hasSession} = useSession() + + const {data: results, isFetched} = usePopularFeedsSearch({ + query, + enabled: active, + }) + + return isFetched && results ? ( + <> + {results.length ? ( + ( + + )} + keyExtractor={item => item.did} + // @ts-ignore web only -prf + desktopFixedHeight + contentContainerStyle={{paddingBottom: 100}} + /> + ) : ( + + )} + + ) : ( + + ) +} +SearchScreenFeedsResults = React.memo(SearchScreenFeedsResults) + let SearchScreenInner = ({query}: {query?: string}): React.ReactNode => { const pal = usePalette('default') const setMinimalShellMode = useSetMinimalShellMode() @@ -323,6 +369,12 @@ let SearchScreenInner = ({query}: {query?: string}): React.ReactNode => { ), }, + { + title: _(msg`Feeds`), + component: ( + + ), + }, ] }, [_, query, activeTab])