From 682dc446bfc2408aeed472dec02bcdf66f5e65b2 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Mon, 16 Dec 2024 13:59:30 -0600 Subject: [PATCH] Wire up interstitial and Explore page --- src/components/TrendingTopics.tsx | 136 ++++++------------ src/components/interstitials/Trending.tsx | 44 +++--- .../components/ExploreTrendingTopics.tsx | 35 +++++ .../queries/trending/useTrendingTopics.ts | 56 ++++++++ src/view/screens/Search/Explore.tsx | 3 +- 5 files changed, 161 insertions(+), 113 deletions(-) create mode 100644 src/screens/Search/components/ExploreTrendingTopics.tsx create mode 100644 src/state/queries/trending/useTrendingTopics.ts diff --git a/src/components/TrendingTopics.tsx b/src/components/TrendingTopics.tsx index 862ab5619b..ec0a6a00c1 100644 --- a/src/components/TrendingTopics.tsx +++ b/src/components/TrendingTopics.tsx @@ -5,37 +5,16 @@ import {useLingui} from '@lingui/react' import {AtUri} from '@atproto/api' import {hasMutedWord} from '@atproto/api/dist/moderation/mutewords' -import {atoms as a, useGutters, useTheme, ViewStyleProp} from '#/alf' +import {atoms as a, useTheme, ViewStyleProp} from '#/alf' import {Link as InternalLink, LinkProps} from '#/components/Link' import {Text} from '#/components/Typography' -import {BSKY_APP_HOST, feedUriToHref} from '#/lib/strings/url-helpers' -import {makeProfileLink, makeSearchLink} from '#/lib/routes/links' +import {feedUriToHref} from '#/lib/strings/url-helpers' +import {makeProfileLink} from '#/lib/routes/links' import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag' import {MagnifyingGlass_Filled_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass' import {UserAvatar} from '#/view/com/util/UserAvatar' import {usePreferencesQuery} from '#/state/queries/preferences' - -export function TopicLarge({topic, style}: {topic: string} & ViewStyleProp) { - const t = useTheme() - return ( - - - {topic} - - - ) -} +import type {TrendingTopic} from '#/state/queries/trending/useTrendingTopics' export function TopicSmall({topic, style}: {topic: string} & ViewStyleProp) { const t = useTheme() @@ -59,11 +38,11 @@ export function TopicSmall({topic, style}: {topic: string} & ViewStyleProp) { ) } -export function Topic({ +export function TrendingTopic({ topic: raw, size, style, -}: {topic: RawTopic; size?: 'large' | 'small'} & ViewStyleProp) { +}: {topic: TrendingTopic; size?: 'large' | 'small'} & ViewStyleProp) { const t = useTheme() const topic = useTopic(raw) @@ -111,6 +90,29 @@ export function Topic({ ) } +export function TrendingTopicLink({ + topic: raw, + children, + style, + ...rest +}: { + topic: TrendingTopic +} & Omit) { + const topic = useTopic(raw) + + if (!topic) return null + + return ( + + {children} + + ) +} + export function Link({ topic, children, @@ -134,30 +136,6 @@ export function Link({ ) } -export function Grid({topics}: {topics: string[]}) { - const t = useTheme() - const gutters = useGutters([0, 'compact']) - return ( - - {topics.map(topic => ( - - {({hovered}) => ( - - )} - - ))} - - ) -} - // temp export const TOPICS = [ '#atproto', @@ -172,43 +150,17 @@ export const TOPICS = [ 'Open Web', ] -export const TOP = [ - { - name: '#atproto', - uri: 'https://bsky.app/hashtag/atproto', - }, - { - name: 'South Korea', - uri: BSKY_APP_HOST + makeSearchLink({query: 'South Korea'}), - }, - { - name: 'Paul Frazee', - uri: 'at://did:plc:ragtjsm2j2vknwkz3zp4oxrd/app.bsky.actor.profile/self' - }, - { - name: 'Wired', - uri: BSKY_APP_HOST + makeSearchLink({query: 'Wired'}), - }, - { - name: 'Quiet Posters', - uri: 'at://did:plc:vpkhqolt662uhesyj6nxm7ys/app.bsky.feed.generator/infreq', - }, -] - -type RawTopic = { - name: string - uri: string -} - -type Topic = +type ParsedTrendingTopic = | { type: 'topic' | 'tag' + label: string name: string url: string uri: undefined } | { type: 'profile' | 'feed' + label: string name: string url: string uri: AtUri @@ -221,32 +173,34 @@ export function useMutedWords() { }, [preferences?.moderationPrefs?.mutedWords]) } -export function useTopic(topic: RawTopic): Topic | undefined { +export function useTopic(raw: TrendingTopic): ParsedTrendingTopic | undefined { + const {_} = useLingui() const mutedWords = useMutedWords() + return React.useMemo(() => { - const {name, uri} = topic + const {topic: name, link: uri} = raw if (hasMutedWord({ mutedWords, text: name })) return - if (uri.startsWith('https')) { - const url = new URL(uri) - if (url.origin !== BSKY_APP_HOST) return - if (url.pathname.startsWith('/search')) { + if (!uri.startsWith('at://')) { + if (uri.startsWith('/search')) { return { type: 'topic', + label: _(msg`Browse posts about ${name}`), name, - url: url.pathname, uri: undefined, + url: uri, } - } else if (url.pathname.startsWith('/hashtag')) { + } else if (uri.startsWith('/hashtag')) { return { type: 'tag', + label: _(msg`Browse posts tagged with ${name}`), name: name.replace(/^#/, ''), - url: url.pathname, uri: undefined, + url: uri, } } } else { @@ -255,6 +209,7 @@ export function useTopic(topic: RawTopic): Topic | undefined { case 'app.bsky.actor.profile': { return { type: 'profile', + label: _(msg`View ${name}'s profile`), name, uri: urip, url: makeProfileLink({did: urip.host, handle: urip.host}), @@ -263,6 +218,7 @@ export function useTopic(topic: RawTopic): Topic | undefined { case 'app.bsky.feed.generator': { return { type: 'feed', + label: _(msg`Browse the ${name} feed`), name, uri: urip, url: feedUriToHref(uri), @@ -270,5 +226,5 @@ export function useTopic(topic: RawTopic): Topic | undefined { } } } - }, [topic, mutedWords]) + }, [raw, mutedWords]) } diff --git a/src/components/interstitials/Trending.tsx b/src/components/interstitials/Trending.tsx index cee0524cf5..2dd2c84af2 100644 --- a/src/components/interstitials/Trending.tsx +++ b/src/components/interstitials/Trending.tsx @@ -9,15 +9,16 @@ import {GradientFill} from '#/components/GradientFill' import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times' import {Trending2_Stroke2_Corner2_Rounded as Graph} from '#/components/icons/Trending2' import * as Prompt from '#/components/Prompt' -import * as Trending from '#/components/TrendingTopics' +import {TrendingTopic, TrendingTopicLink} from '#/components/TrendingTopics' import {Text} from '#/components/Typography' +import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics' export function TrendingInterstitial() { const t = useTheme() const {_} = useLingui() const gutters = useGutters(['base']) const trendingPrompt = Prompt.usePromptControl() - + const {data: topics, error, isLoading} = useTrendingTopics() const {setTrendingDiscoverHidden} = useTrendingSettingsApi() return ( @@ -53,26 +54,25 @@ export function TrendingInterstitial() { - {Trending.TOP.slice(0, 8).map(topic => ( - - ))} - {/*Trending.TOPICS.slice(0, 8).map(topic => ( - - {({hovered}) => ( - - )} - - ))*/} + {isLoading ? null : error || !topics ? null : ( + <> + {topics.map(topic => ( + + {({hovered}) => ( + + )} + + ))} + + )} + {isLoading ? null : error || !topics ? null : ( + <> + {topics.map(topic => ( + + {({hovered}) => ( + + )} + + ))} + + )} + + ) +} diff --git a/src/state/queries/trending/useTrendingTopics.ts b/src/state/queries/trending/useTrendingTopics.ts new file mode 100644 index 0000000000..6bae41b03d --- /dev/null +++ b/src/state/queries/trending/useTrendingTopics.ts @@ -0,0 +1,56 @@ +import {useQuery} from '@tanstack/react-query' + +// TEMP +import {makeSearchLink} from '#/lib/routes/links' + +export type TrendingTopic = { + topic: string + displayName: string + description: string + link: string +} + +export const trendingTopicsQueryKey = ['trending-topics'] + +// TODO ideally handle down-state faster + +export function useTrendingTopics() { + return useQuery({ + queryKey: trendingTopicsQueryKey, + async queryFn() { + const topics: TrendingTopic[] = [ + { + topic: '#atproto', + displayName: '#atproto', + description: '', + link: '/hashtag/atproto', + }, + { + topic: 'South Korea', + displayName: 'South Korea', + description: '', + link: makeSearchLink({query: 'South Korea'}), + }, + { + topic: 'Paul Frazee', + displayName: 'Paul Frazee', + description: '', + link: 'at://did:plc:ragtjsm2j2vknwkz3zp4oxrd/app.bsky.actor.profile/self', + }, + { + topic: 'Wired', + displayName: 'Wired', + description: '', + link: makeSearchLink({query: 'Wired'}), + }, + { + topic: 'Quiet Posters', + displayName: 'Quiet Posters', + description: '', + link: 'at://did:plc:vpkhqolt662uhesyj6nxm7ys/app.bsky.feed.generator/infreq', + }, + ] + return topics + }, + }) +} diff --git a/src/view/screens/Search/Explore.tsx b/src/view/screens/Search/Explore.tsx index 3aa1464594..2ce2f923f0 100644 --- a/src/view/screens/Search/Explore.tsx +++ b/src/view/screens/Search/Explore.tsx @@ -39,6 +39,7 @@ import {Loader} from '#/components/Loader' import * as StarterPackSuggestions from '#/components/StarterPack/Suggestions' import * as TrendingTopics from '#/components/TrendingTopics' import {Text} from '#/components/Typography' +import {ExploreTrendingTopics} from "#/screens/Search/components/ExploreTrendingTopics" function SuggestedItemsHeader({ title, @@ -610,7 +611,7 @@ export function Explore() { } /> - + )