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

Handle service config, enablement, load states, update lex contract

Browse Source
This commit is contained in:
Eric Bailey
2024-12-16 17:08:56 -06:00
parent 9d7ebe3ee7
commit 2097b67ff0
11 changed files with 289 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.native.tsx
+9 -6
View File
@@ -57,6 +57,7 @@ import {Provider as ProgressGuideProvider} from '#/state/shell/progress-guide'
import {Provider as SelectedFeedProvider} from '#/state/shell/selected-feed'
import {Provider as StarterPackProvider} from '#/state/shell/starter-pack'
import {Provider as HiddenRepliesProvider} from '#/state/threadgate-hidden-replies'
import {Provider as TrendingConfigProvider} from '#/state/trending-config'
import {TestCtrls} from '#/view/com/testing/TestCtrls'
import {Provider as VideoVolumeProvider} from '#/view/com/util/post-embeds/VideoVolumeContext'
import * as Toast from '#/view/com/util/Toast'
@@ -143,12 +144,14 @@ function InnerApp() {
<BackgroundNotificationPreferencesProvider>
<MutedThreadsProvider>
<ProgressGuideProvider>
<GestureHandlerRootView
style={s.h100pct}>
<TestCtrls />
<Shell />
<NuxDialogs />
</GestureHandlerRootView>
<TrendingConfigProvider>
<GestureHandlerRootView
style={s.h100pct}>
<TestCtrls />
<Shell />
<NuxDialogs />
</GestureHandlerRootView>
</TrendingConfigProvider>
</ProgressGuideProvider>
</MutedThreadsProvider>
</BackgroundNotificationPreferencesProvider>
src/App.web.tsx
+5 -2
View File
@@ -47,6 +47,7 @@ import {Provider as ProgressGuideProvider} from '#/state/shell/progress-guide'
import {Provider as SelectedFeedProvider} from '#/state/shell/selected-feed'
import {Provider as StarterPackProvider} from '#/state/shell/starter-pack'
import {Provider as HiddenRepliesProvider} from '#/state/threadgate-hidden-replies'
import {Provider as TrendingConfigProvider} from '#/state/trending-config'
import {Provider as ActiveVideoProvider} from '#/view/com/util/post-embeds/ActiveVideoWebContext'
import {Provider as VideoVolumeProvider} from '#/view/com/util/post-embeds/VideoVolumeContext'
import * as Toast from '#/view/com/util/Toast'
@@ -127,8 +128,10 @@ function InnerApp() {
<MutedThreadsProvider>
<SafeAreaProvider>
<ProgressGuideProvider>
<Shell />
<NuxDialogs />
<TrendingConfigProvider>
<Shell />
<NuxDialogs />
</TrendingConfigProvider>
</ProgressGuideProvider>
</SafeAreaProvider>
</MutedThreadsProvider>
src/components/TrendingTopics.tsx
+10 -10
View File
@@ -91,7 +91,6 @@ export function TrendingTopic({
<Text
style={[
a.flex_1,
a.font_bold,
a.leading_tight,
isSmall ? [a.text_sm] : [a.text_md, {paddingBottom: 1}],
@@ -103,7 +102,13 @@ export function TrendingTopic({
)
}
export function TrendingTopicSkeleton({size}: {size: 'large' | 'small'}) {
export function TrendingTopicSkeleton({
size = 'large',
index = 0,
}: {
size?: 'large' | 'small'
index?: number
}) {
const t = useTheme()
const isSmall = size === 'small'
return (
@@ -115,11 +120,11 @@ export function TrendingTopicSkeleton({size}: {size: 'large' | 'small'}) {
t.atoms.bg_contrast_25,
isSmall
? {
width: 90,
width: index % 2 === 0 ? 75 : 90,
height: 27,
}
: {
width: 110,
width: index % 2 === 0 ? 90 : 110,
height: 36,
},
]}
@@ -130,7 +135,6 @@ export function TrendingTopicSkeleton({size}: {size: 'large' | 'small'}) {
export function TrendingTopicLink({
topic: raw,
children,
style,
...rest
}: {
topic: TrendingTopic
@@ -140,11 +144,7 @@ export function TrendingTopicLink({
if (!topic) return null
return (
<InternalLink
label={topic.label}
to={topic.url}
style={[a.flex_col, style]}
{...rest}>
<InternalLink label={topic.label} to={topic.url} {...rest}>
{children}
</InternalLink>
)
src/components/interstitials/Trending.tsx
+33 -9
View File
@@ -2,26 +2,44 @@ import {View} from 'react-native'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useTrendingSettingsApi} from '#/state/preferences/trending'
import {
useTrendingSettings,
useTrendingSettingsApi,
} from '#/state/preferences/trending'
import {
DEFAULT_LIMIT as TRENDING_TOPICS_COUNT,
useTrendingTopics,
} from '#/state/queries/trending/useTrendingTopics'
import {useTrendingConfig} from '#/state/trending-config'
import {atoms as a, tokens, useGutters, useTheme} from '#/alf'
import {Button, ButtonIcon} from '#/components/Button'
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 {TrendingTopic, TrendingTopicLink} from '#/components/TrendingTopics'
import {
TrendingTopic,
TrendingTopicLink,
TrendingTopicSkeleton,
} from '#/components/TrendingTopics'
import {Text} from '#/components/Typography'
import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics'
export function TrendingInterstitial() {
const {enabled} = useTrendingConfig()
const {trendingDiscoverHidden} = useTrendingSettings()
return !enabled ? null : trendingDiscoverHidden ? null : <Inner />
}
export function Inner() {
const t = useTheme()
const {_} = useLingui()
const gutters = useGutters(['base'])
const trendingPrompt = Prompt.usePromptControl()
const {data: topics, error, isLoading} = useTrendingTopics()
const {setTrendingDiscoverHidden} = useTrendingSettingsApi()
const {data: trending, error, isLoading} = useTrendingTopics()
const noTopics = !isLoading && !error && !trending?.topics
return (
return error || noTopics ? null : (
<View
style={[
gutters,
@@ -33,12 +51,14 @@ export function TrendingInterstitial() {
<View style={[a.flex_row, a.align_center, a.gap_sm]}>
<View style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
<Graph size="lg" />
<Text style={[a.text_lg, a.font_heavy, t.atoms.text_contrast_medium]}>
<Text style={[a.text_lg, a.font_heavy]}>
<Trans>Trending</Trans>
</Text>
<View style={[a.py_xs, a.px_sm, a.rounded_sm, a.overflow_hidden]}>
<GradientFill gradient={tokens.gradients.primary} />
<Text style={[a.text_md, a.font_heavy]}>BETA</Text>
<Text style={[a.text_sm, a.font_heavy, {color: 'white'}]}>
<Trans>BETA</Trans>
</Text>
</View>
</View>
@@ -54,9 +74,13 @@ export function TrendingInterstitial() {
</View>
<View style={[a.flex_row, a.flex_wrap, a.gap_sm]}>
{isLoading ? null : error || !topics ? null : (
{isLoading ? (
Array(TRENDING_TOPICS_COUNT)
.fill(0)
.map((_n, i) => <TrendingTopicSkeleton key={i} index={i} />)
) : !trending?.topics ? null : (
<>
{topics.map(topic => (
{trending.topics.map(topic => (
<TrendingTopicLink key={topic.link} topic={topic}>
{({hovered}) => (
<TrendingTopic
src/screens/Search/components/ExploreTrendingTopics.tsx
+85 -26
View File
@@ -1,35 +1,94 @@
import {View} from 'react-native'
import {Trans} from '@lingui/macro'
import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics'
import {atoms as a, useTheme, useGutters} from '#/alf'
import {TrendingTopic, TrendingTopicLink} from '#/components/TrendingTopics'
import {isWeb} from '#/platform/detection'
import {
DEFAULT_LIMIT as TRENDING_TOPICS_COUNT,
useTrendingTopics,
} from '#/state/queries/trending/useTrendingTopics'
import {useTrendingConfig} from '#/state/trending-config'
import {atoms as a, tokens, useGutters, useTheme} from '#/alf'
import {GradientFill} from '#/components/GradientFill'
import {Trending2_Stroke2_Corner2_Rounded as Trending} from '#/components/icons/Trending2'
import {
TrendingTopic,
TrendingTopicLink,
TrendingTopicSkeleton,
} from '#/components/TrendingTopics'
import {Text} from '#/components/Typography'
export function ExploreTrendingTopics() {
const {enabled} = useTrendingConfig()
return enabled ? <Inner /> : null
}
function Inner() {
const t = useTheme()
const gutters = useGutters([0, 'compact'])
const {data: topics, error, isLoading} = useTrendingTopics()
const {data: trending, error, isLoading} = useTrendingTopics()
const noTopics = !isLoading && !error && !trending?.topics
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>
return error || noTopics ? null : (
<>
<View
style={[
isWeb
? [a.flex_row, a.px_lg, a.py_lg, a.pt_2xl, a.gap_md]
: [{flexDirection: 'row-reverse'}, a.p_lg, a.pt_2xl, a.gap_md],
a.border_b,
t.atoms.border_contrast_low,
]}>
<View style={[a.flex_1, a.gap_sm]}>
<View style={[a.flex_row, a.align_center, a.gap_sm]}>
<Trending
size="lg"
fill={t.palette.primary_500}
style={{marginLeft: -2}}
/>
<Text style={[a.text_2xl, a.font_heavy, t.atoms.text]}>
<Trans>Trending</Trans>
</Text>
<View style={[a.py_xs, a.px_sm, a.rounded_sm, a.overflow_hidden]}>
<GradientFill gradient={tokens.gradients.primary} />
<Text style={[a.text_sm, a.font_heavy, {color: 'white'}]}>
<Trans>BETA</Trans>
</Text>
</View>
</View>
<Text style={[t.atoms.text_contrast_high, a.leading_snug]}>
<Trans>What people are posting about now</Trans>
</Text>
</View>
</View>
<View style={[a.pt_md, a.pb_lg]}>
<View
style={[a.flex_row, a.justify_start, a.flex_wrap, a.gap_sm, gutters]}>
{isLoading ? (
Array(TRENDING_TOPICS_COUNT)
.fill(0)
.map((_, i) => <TrendingTopicSkeleton key={i} index={i} />)
) : !trending?.topics ? null : (
<>
{trending.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>
</View>
</>
)
}
src/state/queries/service-config.ts
+35
View File
@@ -0,0 +1,35 @@
import {useQuery} from '@tanstack/react-query'
import {useAgent} from '#/state/session'
type ServiceConfig = {
checkEmailConfirmed: boolean
trendingTopicsEnabled: boolean
trendingTopicsLangs: string[]
}
export function useServiceConfigQuery() {
const agent = useAgent()
return useQuery<ServiceConfig>({
queryKey: ['service-config'],
queryFn: async () => {
try {
const {data} = await agent.api.app.bsky.unspecced.getConfig()
return {
checkEmailConfirmed: Boolean(data.checkEmailConfirmed),
// TODO
trendingTopicsEnabled: true, // Boolean(data.trendingTopicsEnabled),
// TODO
trendingTopicsLangs: ['en'], // data.trendingTopicsLangs ?? [],
}
} catch (e) {
return {
checkEmailConfirmed: false,
trendingTopicsEnabled: false,
trendingTopicsLangs: [],
}
}
},
staleTime: 5 * 60 * 1000,
})
}
src/state/queries/trending/useTrendingTopics.ts
+30 -3
View File
@@ -10,14 +10,38 @@ export type TrendingTopic = {
link: string
}
export const trendingTopicsQueryKey = ['trending-topics']
export const DEFAULT_LIMIT = 12
// TODO ideally handle down-state faster
export const trendingTopicsQueryKey = ['trending-topics']
export function useTrendingTopics() {
return useQuery({
queryKey: trendingTopicsQueryKey,
async queryFn() {
/*
try {
const params = new URLSearchParams()
params.set('viewer', agent.session?.did || '')
const res = await fetch(
``,
{
headers: {
Authorization:
'Bearer ',
},
},
)
if (!res.ok) {
throw new Error('Failed to fetch trending topics')
}
const data = await res.json()
return data.topics
} catch (e) {
console.error(e)
}
*/
const topics: TrendingTopic[] = [
{
topic: '#atproto',
@@ -50,7 +74,10 @@ export function useTrendingTopics() {
link: 'at://did:plc:vpkhqolt662uhesyj6nxm7ys/app.bsky.feed.generator/infreq',
},
]
return topics
return {
topics,
recommended: [],
}
},
})
}
src/state/shell/trending-config.tsx
+31
View File
@@ -0,0 +1,31 @@
import React from 'react'
import {useLanguagePrefs} from '#/state/preferences/languages'
import {useServiceConfigQuery} from '#/state/queries/service-config'
type Context = {
enabled: boolean
}
const Context = React.createContext<Context>({
enabled: false,
})
export function Provider({children}: React.PropsWithChildren<{}>) {
const langPrefs = useLanguagePrefs()
const {data: config} = useServiceConfigQuery()
const ctx = React.useMemo<Context>(() => {
const serviceEnabled = Boolean(config?.trendingTopicsEnabled)
const languageIsSupported = langPrefs.contentLanguages.some(lang => {
return (config?.trendingTopicsLangs ?? []).includes(lang)
})
return {
enabled: serviceEnabled && languageIsSupported,
}
}, [config, langPrefs])
return <Context.Provider value={ctx}>{children}</Context.Provider>
}
export function useTrendingConfig() {
return React.useContext(Context)
}
src/state/trending-config.tsx
+32
View File
@@ -0,0 +1,32 @@
import React from 'react'
import {useLanguagePrefs} from '#/state/preferences/languages'
import {useServiceConfigQuery} from '#/state/queries/service-config'
type Context = {
enabled: boolean
}
const Context = React.createContext<Context>({
enabled: false,
})
export function Provider({children}: React.PropsWithChildren<{}>) {
const langPrefs = useLanguagePrefs()
const {data: config} = useServiceConfigQuery()
const ctx = React.useMemo<Context>(() => {
// TODO maybe default to true
const serviceEnabled = Boolean(config?.trendingTopicsEnabled)
const languageIsSupported = langPrefs.contentLanguages.some(lang => {
return (config?.trendingTopicsLangs ?? []).includes(lang)
})
return {
enabled: serviceEnabled && languageIsSupported,
}
}, [config, langPrefs])
return <Context.Provider value={ctx}>{children}</Context.Provider>
}
export function useTrendingConfig() {
return React.useContext(Context)
}
src/view/screens/Search/Explore.tsx
+4 -107
View File
@@ -25,21 +25,18 @@ import {
ProfileCardFeedLoadingPlaceholder,
} from '#/view/com/util/LoadingPlaceholder'
import {UserAvatar} from '#/view/com/util/UserAvatar'
import {atoms as a, tokens,useTheme, ViewStyleProp} from '#/alf'
import {ExploreTrendingTopics} from '#/screens/Search/components/ExploreTrendingTopics'
import {atoms as a, useTheme, ViewStyleProp} from '#/alf'
import {Button} from '#/components/Button'
import * as FeedCard from '#/components/FeedCard'
import {GradientFill} from '#/components/GradientFill'
import {ArrowBottom_Stroke2_Corner0_Rounded as ArrowBottom} from '#/components/icons/Arrow'
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
import {Props as SVGIconProps} from '#/components/icons/common'
import {ListSparkle_Stroke2_Corner0_Rounded as ListSparkle} from '#/components/icons/ListSparkle'
import {Trending2_Stroke2_Corner2_Rounded as Trending} from '#/components/icons/Trending2'
import {UserCircle_Stroke2_Corner0_Rounded as Person} from '#/components/icons/UserCircle'
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,
@@ -251,7 +248,6 @@ type ExploreScreenItems =
| {
type: 'trendingTopics'
key: string
topics: string[]
}
| {
type: 'suggestedStarterPacks'
@@ -349,89 +345,8 @@ export function Explore() {
i.push({
type: 'trendingTopics',
key: `trending-topics`,
topics: [
'#atproto',
'South Korea',
'Wired',
'Basket Weaving',
'Coup',
'Chappel Roan',
'the juice',
'Superman',
'#FCF',
'Open Web',
],
})
/*
i.push({
type: 'header',
key: 'starter-packs-header',
title: _(msg`Starter packs`),
description: _(msg`Find accounts to follow based on your interests.`),
icon: PersonGroup,
})
i.push({
type: 'suggestedStarterPacks',
key: 'suggested-starter-packs',
starterPacks: [
{
uri: 'at://did:plc:ragtjsm2j2vknwkz3zp4oxrd/app.bsky.graph.starterpack/3kvaphb2hpf2u',
cid: '',
indexedAt: '',
record: {
$type: 'app.bsky.graph.starterpack',
description:
'Engineers who work on or discuss the ATProtocol, both at Bluesky and in the community',
list: 'at://did:plc:ragtjsm2j2vknwkz3zp4oxrd/app.bsky.graph.list/3kvaphagg4e2l',
name: 'ATProtocol Hackers',
},
creator: {
did: 'did:plc:ragtjsm2j2vknwkz3zp4oxrd',
handle: 'pfrazee.com',
displayName: 'Paul Frazee',
},
},
{
uri: 'at://did:plc:qrllvid7s54k4hnwtqxwetrf/app.bsky.graph.starterpack/3kvuh7u324m2c',
cid: '',
indexedAt: '',
record: {
$type: 'app.bsky.graph.starterpack',
createdAt: '2024-06-26T23:23:01.073Z',
description:
'Legal practice, scholarship, journalism, and argument',
feeds: [],
list: 'at://did:plc:qrllvid7s54k4hnwtqxwetrf/app.bsky.graph.list/3kvuh7twnjc2m',
name: 'Bluesky for Law',
},
creator: {
did: 'did:plc:qrllvid7s54k4hnwtqxwetrf',
handle: 'joshuajfriedman.com',
displayName: 'Joshua J. Friedman',
},
},
{
uri: 'at://did:plc:7exlcsle4mjfhu3wnhcgizz6/app.bsky.graph.starterpack/3laotg2fqva2h',
cid: '',
indexedAt: '',
record: {
$type: 'app.bsky.graph.starterpack',
createdAt: '2024-11-11T17:22:22.743Z',
description: 'people who work at the website, the verge dot com',
list: 'at://did:plc:7exlcsle4mjfhu3wnhcgizz6/app.bsky.graph.list/3laotg2bjok2d',
name: 'The Verge staff',
},
creator: {
did: 'did:plc:7exlcsle4mjfhu3wnhcgizz6',
handle: 'theverge.com',
displayName: 'The Verge',
},
},
],
})
*/
i.push({
type: 'header',
key: 'suggested-follows-header',
@@ -596,25 +511,7 @@ export function Explore() {
)
}
case 'trendingTopics': {
return (
<>
<SuggestedItemsHeader
title={_(msg`Trending`)}
description={_(msg`What people are posting about now.`)}
icon={Trending}
titleChild={
<View
style={[a.py_xs, a.px_sm, a.rounded_sm, a.overflow_hidden]}>
<GradientFill gradient={tokens.gradients.primary} />
<Text style={[a.text_md, a.font_heavy]}>BETA</Text>
</View>
}
/>
<View style={[a.pt_md, a.pb_lg]}>
<ExploreTrendingTopics />
</View>
</>
)
return <ExploreTrendingTopics />
}
case 'suggestedStarterPacks': {
return (
@@ -696,7 +593,7 @@ export function Explore() {
}
}
},
[_, t, moderationOpts],
[t, moderationOpts],
)
// note: actually not a screen, instead it's nested within
src/view/shell/desktop/SidebarTrendingTopics.tsx
+15 -9
View File
@@ -6,7 +6,11 @@ import {
useTrendingSettings,
useTrendingSettingsApi,
} from '#/state/preferences/trending'
import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics'
import {
DEFAULT_LIMIT as TRENDING_TOPICS_COUNT,
useTrendingTopics,
} from '#/state/queries/trending/useTrendingTopics'
import {useTrendingConfig} from '#/state/trending-config'
import {atoms as a, useTheme} from '#/alf'
import {Button, ButtonIcon} from '#/components/Button'
import {Divider} from '#/components/Divider'
@@ -21,8 +25,9 @@ import {
import {Text} from '#/components/Typography'
export function SidebarTrendingTopics() {
const {enabled} = useTrendingConfig()
const {trendingSidebarHidden} = useTrendingSettings()
return trendingSidebarHidden ? null : <Inner />
return !enabled ? null : trendingSidebarHidden ? null : <Inner />
}
function Inner() {
@@ -30,9 +35,8 @@ function Inner() {
const {_} = useLingui()
const trendingPrompt = Prompt.usePromptControl()
const {setTrendingSidebarHidden} = useTrendingSettingsApi()
const {data: topics, error, isLoading} = useTrendingTopics()
const noTopics = !isLoading && !error && !topics
const {data: trending, error, isLoading} = useTrendingTopics()
const noTopics = !isLoading && !error && !trending?.topics
return error || noTopics ? null : (
<>
@@ -61,12 +65,14 @@ function Inner() {
<View style={[a.flex_row, a.flex_wrap, a.gap_xs]}>
{isLoading ? (
Array(8)
Array(TRENDING_TOPICS_COUNT)
.fill(0)
.map((_, i) => <TrendingTopicSkeleton key={i} size="small" />)
) : error || !topics ? null : (
.map((_n, i) => (
<TrendingTopicSkeleton key={i} size="small" index={i} />
))
) : !trending?.topics ? null : (
<>
{topics.map(topic => (
{trending.topics.map(topic => (
<TrendingTopicLink key={topic.link} topic={topic}>
{({hovered}) => (
<TrendingTopic