acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Wire up interstitial and Explore page

Browse Source
This commit is contained in:
Eric Bailey
2024-12-16 13:59:30 -06:00
parent 04fae9a6b6
commit 682dc446bf
5 changed files with 161 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/TrendingTopics.tsx
+46 -90
View File
@@ -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 (
<View
style={[
a.p_sm,
a.px_md,
a.rounded_md,
a.border,
t.atoms.border_contrast_medium,
t.atoms.bg,
style,
]}>
<Text
style={[a.flex_1, a.text_md, a.font_bold, a.leading_tight]}
numberOfLines={1}>
{topic}
</Text>
</View>
)
}
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<LinkProps, 'to' | 'label'>) {
const topic = useTopic(raw)
if (!topic) return null
return (
<InternalLink
label={topic.label}
to={topic.url}
style={[a.flex_col, style]}
{...rest}>
{children}
</InternalLink>
)
}
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 (
<View style={[a.flex_row, a.flex_wrap, a.gap_sm, gutters]}>
{topics.map(topic => (
<Link key={topic} topic={topic}>
{({hovered}) => (
<TopicLarge
topic={topic}
style={[
hovered && [
t.atoms.border_contrast_high,
t.atoms.bg_contrast_25,
],
]}
/>
)}
</Link>
))}
</View>
)
}
// 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])
}
src/components/interstitials/Trending.tsx
+22 -22
View File
@@ -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() {
</View>
<View style={[a.flex_row, a.flex_wrap, a.gap_sm]}>
{Trending.TOP.slice(0, 8).map(topic => (
<Trending.Topic
topic={topic}
/>
))}
{/*Trending.TOPICS.slice(0, 8).map(topic => (
<Trending.Link key={topic} topic={topic}>
{({hovered}) => (
<Trending.TopicLarge
topic={topic}
style={[
hovered && [
t.atoms.border_contrast_high,
t.atoms.bg_contrast_25,
],
]}
/>
)}
</Trending.Link>
))*/}
{isLoading ? null : error || !topics ? null : (
<>
{topics.map(topic => (
<TrendingTopicLink key={topic.link} topic={topic}>
{({hovered}) => (
<TrendingTopic
topic={topic}
style={[
hovered && [
t.atoms.border_contrast_high,
t.atoms.bg_contrast_25,
],
]}
/>
)}
</TrendingTopicLink>
))}
</>
)}
</View>
<Prompt.Basic
src/screens/Search/components/ExploreTrendingTopics.tsx
+35
View File
@@ -0,0 +1,35 @@
import {View} from 'react-native'
import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics'
import {atoms as a, useTheme, useGutters} from '#/alf'
import {TrendingTopic, TrendingTopicLink} from '#/components/TrendingTopics'
export function ExploreTrendingTopics() {
const t = useTheme()
const gutters = useGutters([0, 'compact'])
const {data: topics, error, isLoading} = useTrendingTopics()
return (
<View style={[a.flex_row, a.flex_wrap, a.gap_sm, gutters]}>
{isLoading ? null : error || !topics ? null : (
<>
{topics.map(topic => (
<TrendingTopicLink key={topic.link} topic={topic}>
{({hovered}) => (
<TrendingTopic
topic={topic}
style={[
hovered && [
t.atoms.border_contrast_high,
t.atoms.bg_contrast_25,
],
]}
/>
)}
</TrendingTopicLink>
))}
</>
)}
</View>
)
}
src/state/queries/trending/useTrendingTopics.ts
+56
View File
@@ -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
},
})
}
src/view/screens/Search/Explore.tsx
+2 -1
View File
@@ -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() {
}
/>
<View style={[a.pt_md, a.pb_lg]}>
<TrendingTopics.Grid topics={item.topics} />
<ExploreTrendingTopics />
</View>
</>
)